Hacker of the Web
Tus ideas en código!...y mas

Estas en: > > CSS3: Interesantes gradientes

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

Por: Unknown
En que se publicó
Etiquetas , ,
#

Deja tu huella y comenta!

Hola!, por favor deja tus comentarios, te aseguro serán contestados, dudas, sugerencias, lo que sea!!!!!!!!!!.

Si el formulario no funciona, o quieres irte a la segura: agrega tu comentario de forma tradicional

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

Emoticons
Comenta con tu:
Comenta:

2 comentarios !

Diana Reyes dijo...

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

Unknown dijo...

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!!


Página Principal
Arriba