sábado, 21 de enero de 2012

Efecto Shadow con CSS3

Ultimamente he estado viendo un poco las nuevas novedades de CSS3, esta vez no esperare a que este totalmente implementado para empezar a probar dentro de las cosas más interesantes que me he encontrado es la posibilidad de ponerle efecto shadow a un div o a un texto, los que visitan mi blog desde Mozilla Firefox podrán notar que el título de los posts tiene una apariencia algo diferente, una pequeña sombrita algo tenue.

Pues no estoy usando Jquery o Flash para lograr dicho efecto, es puro y llano CSS3, con una interesante propiedad llamada text-shadow, bueno, en realidad la propiedad existia desde CSS2, pero creo que tenia muy poca difusión, la estructura es basicamente la siguiente:
{text-shadow: 2px 2px 2px #000;}
Con lo anterior se podria lograr algo como lo siguiente:

También se puede lograr cosas avanzadas jugando un poco con la propiedad:
{text-shadow:0 0 4px #fff, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20;color:#fff;}
box shadow
{-webkit-box-shadow: 3px 3px 5px #333;;-moz-box-shadow: 3px 3px 5px #333;;box-shadow: 3px 3px 5px #333;}

box shadow
Al igual que la propiedad text-shadow con esta podemos jugar un poco:
Aclaro un par de cosas, todos son los ejemplos son imagenes, la razón de esto es que no todos los navegadores aceptan estas propiedades.
La otra aclaración es sobre la manera como funcionas las propiedades:
{box-shadow: x y shadow color;}

1 comentario:

  1. Thanks for informative post. I am pleased sure this post has helped me save many hours of browsing other similar posts just to find what I was looking for.Thank you very much for that ghd hair straightener sale great article and valuable information.

    ResponderEliminar