Otra 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…
😉 Saludos cordiales..
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