Páginas

▼

23 enero 2011

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.

Gradientes CSS3

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: 
-moz-linear-gradient(POSICION_INICIAL, COLOR_INICIAL, COLOR_FINAL);
 Mientras que para Chrome y Safari es: 
-webkit-gradient(linear, POSICION_INICIAL, POSICION_FINAL, from(rgba(COLOR_INICIAL), to(COLOR_FINAL));

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: 
background-image:-moz-linear-gradient(top , #C80000, rgba(125, 0, 0, 0.698))

background-image:-webkit-gradient(linear,left top,left bottom , from(#C80000), to(rgba(125, 0, 0, 0.698)))
 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:
Este es texto en la caja
 
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

a la/s

2 comentarios:

  1. Diana Reyes1/24/2011 05:46:00 a.m.

    SäNTÿ, no parece fácil pero lo voy a probar, puede darle un toque especial a mi blog.
    Saludos.

    ResponderBorrar
  2. Unknown1/24/2011 10:46:00 p.m.

    Jubilada en Acción!, jeje si, yo también cuando vi esta nueva propiedad me quede boquiabierto pensando cuan difícil me sería aprender a utilizar eso. Pero con la práctica le pierde uno el miedo.

    Claro que la herramienta que coloqué aquí arriba no sirve mucho para practicar, pero nos ahorrará varios dolores de cabeza xD

    Suerte!!

    ResponderBorrar

Si necesitas ayuda mas personalizada deja un <a href='URL'>ENLACE</a> hacia tu blog.