CSS3 como crear un degrado de color
Categories: CSS - Tags: CSSOtra interesante opcion que nos da CSS3 es de crear degradados de forma muy sencilla para ya no tener que recurrir a imágenes de fondo como usualmente se hace.
Veamos primero la forma más simple:
1 | background: -moz-linear-gradient(top, #65b6cf , #2c2c2c); |
Este ejemplo crea un degradado que empieza arriba partiendo del color #65b6cf hasta terminar en #2c2c2c
Veamos algo un poco más complicado esta vez vamos a definir la longitud del degradado
1 | background: -moz-linear-gradient(top, #65b6cf , #2c2c2c 50px); |
También es posible usar varios colores en nuestro degradado
1 | background: -moz-linear-gradient(top, #65b6cf , #2c2c2c 25%, #fff 80%); |
Existe otra opción muy parecida para crear degrados radiales
1 | background: -moz-radial-gradient(50%, #65b6cf , #2c2c2c); |
Todo eso funciona en firefox, para hacerlo funcionar en Webkit la forma es un poco distinta
1 | background: -webkit-gradient(linear, 0 0, 0 100%, from(#dedede), color-stop(8%, white), color-stop(20%, red); |
Hola Miguel
A mi me intereza el sombreado para el titulo de los blogs como el que utiliza finalsense en sus plantillas:
http://www.finalsense.com/services/blog_templates/girl_wind_image.htm
no se si se alcance a apreciar…espero que si, si no, este es su enlace a las plantillas:
http://www.finalsense.com/services/blog_templates/
ahi mismo puedes ver el codigo html…
PD.Si esta duplicado el comentario, disculpa, es que me cuesta trabajo leer las letras de la verificacion…
Hola, si miras la demo aparece sin la sombra http://finaltemp298.blogspot.com/ aunque puedes lograr ese efecto usando este código http://www.miguelmanchego.com/2010/css3-texto-con-sombra variando un poco la distancia de la sombra a 1px