Usar CSS3 sin conocer CSS3. Generadores

Pues así es. Ya puedes empezar a utilizar las nuevas características que incorpora el estándar para hojas de estilo CSS3, incluso si no has leído una sola línea sobre él. Para ello, tenemos muchas aplicaciones online que generan automáticamente el código necesario para añadir sombras a textos, bordes múltiples, esquinas redondeadas, tipografías no-estándar, reflejos, gradientes, columnas... simplemente indicando los parámetros necesarios en cada caso. El generador ya se ocupa de darnos las propiedades que hay que incluir en los selectores a los que queramos aplicar ese estilo.

Conste que no es lo recomendable, porque lo interesante es entender lo que se teclea para poder sacarle el máximo partido. Pero una cosa no es excluyente de la otra y si os vais fijando en las líneas de código, podreis observar fácilmente qué es lo que hace cada una e ir captando la idea.

Y para los que saben de CSS3, pues una ayudita nunca viene mal ;)

CSS3 GENERATOR
Muy intuitivo y completo. Sólo requiere introducir los valores. Muestra iconos de los navegadores que soportan cada propiedad y sobre ellos, la version mínima necesaria.
Disponibles: border-radius, box-shadow, gradient, rgba, rotate, transition y @font-face.



CSS3, PLEASE
Para mí muy original. Se presenta directamente todo el código y la vista previa de un elemento. Permite activar/desactivar diversas propiedades, así como modificar sus valores sobre el propio código, viendo sobre la marcha sus resultados.
Disponibles: border-radius, box-shadow, text-shadow, rgba, @font-face, column, resize, box-sizing y outline



STYLE MASTER
Flojito pero suficiente para lo más básico. También incorpora una vista previa y una barra con los navegadores que soportan cada propiedad de las que se pueden probar.
Disponibles: gradient, text-shadow, box-shadow y text-stroke



BORDER IMAGE GENERATOR
Ideal para ver cómo se pueden contruir bordes con imágenes.
Disponible: border-image



WIDGET PAD
No se pueden cambiar los valores de las distintas propiedades, pero resulta interesante para ver como funcionan sin tener que movernos del sitio. Incluye la propiedad para simular reflejos.
Disponibles: border-radius, box-shadow, box-reflect, transform, opacity, text-shadow y text-stroke




BORDER RADIUS
Sencillito como él solo pero eficaz en su cometido de mostrar cómo funcionan los bordes redondeados.
Disponible: border-radius



CSS3 GRADIENT GENERATOR
Centrado exclusivamente en la generacion de código para gradientes.
Disponible: gradient



CSS TRICKS BUTTON MAKER
Generador de botones construidos exclusivamente con CSS3. Primero se diseña el botón y una vez al gusto, se puede pinchar en él para obtener el código de estilo.
Disponibles:



Teneis que tener en cuenta que no todo funciona en todos los navegadores. Las distintas propiedades están siendo incorporadas paulatinamente por las nuevas versiones que van sacando los fabricantes. Por eso, en unas versiones/navegadores unas cosas funcionan y otras no. En esto, para variar, Internet Explorer se está quedando un poco atrás y es el que más carencias tiene al respecto. Sin embargo, en la mayoría de casos, el no interpretar bien el código no supone generalmente un perjuicio en la estética de la web. Si acaso, más bien una no-mejora.

Me explico... Si añadimos a una capa con borde el efecto de esquinas redondeadas, los navegadores que no soporten el border-radius simplemente no las mostrarán redondas, sino como siempre, en ángulo recto. O sea, el navegador ignora la propiedad y no la interpreta ni bien ni mal. Simplemente no la interpreta.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter