Aunque ya llevamos unos años con CSS3 entre nosotros (de hecho, los primeros borradores de esta versión se escribieron el último año del siglo pasado), es tal la cantidad de selectores, propiedades y espacios de nombres que nos ofrece, que todavía muchos de nosotros no sabemos muy bien cómo dar determinados estilos complejos, o lo que es peor, ni siquiera sabemos que esos formatos se pueden dar mediante hojas de estilos, y seguimos acudiendo a soluciones del pasado como diseñar algo en Photoshop para darle sombras o tridimensionalidad, para posteriormente exportarlo como imagen y aplicarlo a nuestros elementos HTML.
Por eso es de agradecer que existan herramientas como CSS3 Generator, que mediante simples selecciones nos permite modificar aspectos de nuestros elementos, a la vez que nos muestra una vista previa en tiempo real y el código asociado. Hacer un div con bordes redondeados de forma irregular, con sombra y múltiples columnas ya no tiene por qué suponer un dolor de cabeza.
Una de las mejores cualidades de esta página es que muestra las múltiples propiedades con las que se puede conseguir un efecto dependiendo del navegador, y si pasamos el ratón por encima de los logos de cada uno de ellos nos muestra a partir de qué versión está disponible esa opción. Por ejemplo, aplicar un borde redondeado con distintos radios como el que sigue, es posible a partir de Firefox 4, Chrome 6, IE9, Safari 5 y Opera 10.5:
-webkit-border-radius: 10px 50px 10px 30px; border-radius: 10px 50px 10px 30px;
Como principal pega, está el hecho de que si seleccionamos distintos efectos, aunque los veamos todos aplicados sobre el div utilizado para la vista previa, sólo podemos ir copiando los estilos uno por uno, en lugar de ofrecernos el acumulado de todo lo hecho. Pero bueno, siempre nos queda la opción de usar Firebug o las herramientas de desarrollador que incorpore nuestro navegador, y copiarnos las reglas que en ese momento tenga aplicadas el div previewWindow.
Página oficial | CSS3 Generator
