Geek the Planet


CSS no image

Published on agosto 10th, 2009 | by Angelfire

2

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:

text shadow

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;}

text shadow

La otra propiedad es la Box-Shadow, con esta podemos hacer lo mismo que hicimos con el text, pero en esta ocasión para aplicarlo a divs, de nuevo no hay mucho que explicar una imagen basta.

{-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:

box shadow

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;}

Es sencillo.

Tags: , ,


About the Author

Systems Engineering, Computer Systems Specialist, Social Engineering Specialist. Social Media Analyzer. Usability and SEO enthusiasm (Este es mi perfil de Twitter...)



2 Responses to Efecto Shadow con CSS3

  1. Noel says:

    La pregunta sería, cuanto se demorará IE en implementar CSS3, me parece excelente este tipo de efectos no más por el hecho que nos facilita mucho la vida a los desarrolladores, pueda ser que microsoft no la “embarre” no implementando esto pronto.

  2. Polito says:

    Anda! Eh!

    Excelente info, lo malo de aquí son mis conocimientos en CSS. Las hojas de estilo marcan la Web 2.0, xD

Back to Top ↑