Que hay inventores para todo de eso no me cabe ya la menor duda pero este generador de código CSS3 me ha dejado alucinada. Pero vayamos por partes...

¿Qué efectos podemos conseguir con este generador online de CSS3?

Básicamente todos esos efectos que los que navegamos a diario por Internet ya conocemos y estamos cansados de ver, pero que a su vez están tan de moda. Como por ejemplo los bordes redondeados, dar sombra a elementos de bloque, dar sombra al texto, utilizar fuentes tipográficas no estandar, degradados, etc...

¿Podremos ver estos bonitos efectos en todos los navegadores?

Pues no, hay que tener en cuenta dos cosas:

  • No todos los navegadores soportan CSS3, como "casi" siempre Internet Explorer no soporta aún CSS3 (a excepción del uso de tipografía no estandar, menos mal!!). El resto de navegadores más usados sí lo hacen (Firefox, Safari, Chrome). El que mejor funciona sin duda es Safari!!
  • No todas las propiedades están oficialmente definidas, lo que significan que algunas están en fase experimental y necesitan de una nomenclatura especial para que se visualicen correctamente (-moz- para Firefox, -webkit- para Chrome,...). El tema de la nomenclatura si usamos la herramienta que os comento no va a suponer un problema porque ella solita ya la incluye, pero ojo! el código no será nunca 100% válido debido a esta nomenclatura especial.

¿Cuál es la herramienta?

Este generador de código CSS3 se llama "CSS3 Generator".

css3-generator.jpg

Es muy intuitivo y fácil de usar. Al final del proceso puedes copiar el código sin problemas e incluso un pequeño tooltip te indica para qué versiones de navegadores es compatible. Aunque en el caso de algunos efectos, como es el caso de degradados, esta herramienta te remite a otra página con el mismo tipo de funcionamiento, el generador de degradados.

2 ejemplos

Bonito botón con degradado, toda una moda en webs 2.0

boton-con-degradado.png


-webkit-gradient(
    linear,
    right top,
    right bottom,
    color-stop(0.2, rgb(33,122,104)),
    color-stop(0.91, rgb(12,230,219))
)
-moz-linear-gradient(
    center top,
    rgb(33,122,104) 20%,
    rgb(12,230,219) 91%
)

Bloque con 2 esquinas redondeadas

-webkit-border-top-left-radius: 20px;
 -webkit-border-top-right-radius: 0px;
 -webkit-border-bottom-right-radius: 20px;
 -webkit-border-bottom-left-radius: 0px;
 -moz-border-radius-topleft: 20px;
 -moz-border-radius-topright: 0px;
 -moz-border-radius-bottomright: 20px;
 -moz-border-radius-bottomleft: 0px;
 border-top-left-radius: 20px;
 border-top-right-radius: 0px;
 border-bottom-right-radius: 20px;
 border-bottom-left-radius: 0px;

Definitivamente todo un ahorro de tiempo!! Que lo disfruteis!

Stay tuned :)