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 ↑
  • Comentarios recientes

  • Miniposts

    • iOS 8 disponible para descargar

      Hoy se anunció de manera oficial iOS 8, la fecha de llegada será el próximo 17 de septiembre. En iPhonehacks han recopilado los enlaces de descarga directo para los diferentes dispositivos que soportan la nueva versión del sistema operativo. Así que para quienes no desean esperar, ya pueden acceder a la versión Golden Master ...

    • Festigame Colombia 2014

      El festival de videojuegos, cultura gamer y entretenimiento familiar más grande de América Latina ha llegado a nuestro país. Festigame que es un evento creado en Chile en 2012, se ha convertido en el evento anual donde las marcas más importantes de la industria presentan sus últimos productos en el ...

    • Peter Griffin también tiene cuenta en Instagram

      El protagonista de la serie de humor, Padre de Familia, Peter Griffin ha inaugurado su presencia en la red social de fotografía con divertidas fotografías de su vida, y a pesar de ser un personaje de ficción ya ha superado los 200.000 seguidores en tan sólo dos semanas. Son unas fotos bastante divertidas, las ...

    • Manual y documentación de Node.js para Android

      Node.js se ha venido haciendo bastante popular en los últimos años, cada vez son más los usos que como desarrolladores web le damos a esta tecnología. La siguiente aplicación es el manual y la documentación de Node.js, que contiene los siguientes temas: About these Docs Synopsis Assertion Testing Buffer C/C++ Addons Child Processes Cluster Console Crypto Debugger DNS Domain Events File System Globals HTTP HTTPS Modules Net OS Path Process Punycode Query Strings Readline REPL Stream String Decoder Timers TLS/SSL TTY UDP/Datagram URL Utilities VM ZLIB

    • Star Wars Traceroute

      ¿Qué pasa cuando un ingeniero está muy desocupado? pues pasan cosas como esta: Mac y Linux Van a la consola y escriben: traceroute 216.81.59.173 Windows Buscan el CMD y escriben: tracert 216.81.59.173 El resultado es interesante y sorprendente. Si quieren ver la salida de la ejecución del comando, pueden ver el gist Ver más: Beagle Network

  • Comunicados - Notas de Prensa