CSS3: Interesantes gradientes

El CSS es una herramienta que todos o al menos la mayoría de los Bloggers debemos o deberíamos de conocer o almenos los fundamentos. Ya que nos permite darle a nuestro web/blog el estilo que prefiramos de un manera sencilla.

En esta entrada explicaremos como podemos utilizar en nuestros blog los gradientes que se han agregado en CSS3. Si no eres muy experimentado con el CSS no temas, que aquí debajo esta lo que necesitas saber.

Bien lo primero que debemos tener en cuenta es que la compatibilidad de navegadores:

• Firefox 3+
• Chrome 7+
• Safari 4+

Para conseguir en Firefox los gradientes, la instrucción CSS es la siguiente: Mientras que para Chrome y Safari es:

POSICION_INICIAL y POSICION_FINAL: Debes sustituirlo por la posicion en donde estará el color inicial o final:

Para mozilla:

left

right

top

bottom

Para Chrome y Safari:

left bottom

right bottom

left top

left bottom

Valores

Izquierda

Derecha

Arriba

Abajo

COLOR_INICIAL y COLOR_FINAL: Es el color que inicia y el que termina, puede ser en hexadecimales, RGB o RGBA

Un ejemplo de su aplicación podría ser la siguiente: Si no comprendiste bien el concepto o quieres ponerlo en práctica, aqui te presento un generador con los controles gráficos de las instrucciones CSS para obtener un gradiente, disfrútalo:

-moz-linear-gradient(top, rgba(200,0,0,1), rgba(125,0,0,0.7));

-webkit-gradient(linear,left top,left bottom,from(rgba(200,0,0,1)), to(rgba(125,0,0,0.7)));

 

Rojo
(0-255)

Verde
(0-255)

Azul
(0-255)

Transparencia
(0%-100%)

Color inicial:

Color final:

Posicion inicial:

REFERENCIAS:
Mozilla Developer Center: -moz-linear-gradient
Safari Reference Library: -webkit-gradient