Morton 6 de noviembre de 2010 a las 17.32
   Imprimir artículo
elWebmaster.com

CSS3: Crear efecto de sombra en imágenes


css3wide1A través de CSS3 podemos dar a nuestras imágenes un práctico efecto de sombra proyectada, ideal para destacar el logotipo de tu sitio web. Realizar este sencillo truco sólo nos llevará unas pocas líneas de ćodigo.

Fuente original del artículo: Net Tuts +
Traducción realizada por elWebmaster.com

Para comenzar necesitaremos, obviamente, la imagen a la que colocaremos el efecto. A esa imagen la contendremos dentro de un div, así:

[HTML]

logo


[/HTML]

Lo siguiente será definir el estilo del body. Para ello, incluiremos algo de CSS dentro del head:

[CSS]


logo


[/CSS]

Ahora que hemos definido el ancho y los márgenes del body, comenzaremos a darle estilo al div que contiene nuestra imagen:

[CSS]


[/CSS]

Con box-shadow creamos el efecto de sombra, al que luego definimos sus variables: Los dos primeros números servirán para definir el tamaño y la posición de la sombra, el tercer número definirá la cantidad de blur que tendrá la sombra, y finalmente debemos indicar el color que utilizaremos para la sombra. Con el resto del código utilizado, hemos creado un recuadro blanco alrededor de la imagen, que utilizaremos luego para trabajar mejor con las sombras. Sólo queda crearlas:

[CSS]


[/CSS]

A través del comando after, creamos un elemento de sombra que podremos manipular y redimensionar a nuestro gusto. Con z-index lo situamos en la parte trasera. Ya comienza a tomar forma, y sólo quedan algunos retoques para crear el efecto deseado:

[CSS]


[/CSS]

Como podrás ver, utilizand el comando transform, podemos dar un efecto a la sombra para que tome la forma correcta, detallando el ángulo deseado. Ahora sólo queda agregar algunas lineas más para asegurar la compatibilidad con todos los navegadores posibles, y habremos terminado:

[HTML]

logo


[/HTML]

Haz clic en este enlace para ver un ejemplo del resultado final>>

Fuente original del artículo: Net Tuts +
Traducción realizada por elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (3)

  1. jose angel lamas rodriguez dice:

    información muy util

  2. links for 2010-11-10 | Tombola! dice:

    […] CSS3: Crear efecto de sombra en imágenes – elWebmaster.com (tags: css) […]

  3. clemente peña morillo dice:

    HOLA BUENOS DIAS HOY FUE QUE TUVE UNPOQUITO DE TIEMPO Y COMO SIEMPRE ME FUI A MI CORREO Y DE INMEDIATO REVICE LOS MAILS RECIBIDOS Y DENTRO DE LOS MENSAJES Y ARTICULOS IMPORTANTES SIEMPRE ESTAN USTEDES , DESEO QUE SIGAN DANDO BUENAS ORIENTACIONES, PARA QUE SIGAN COPANDO Y COSITANDO EL FAVOR DEL USURIO NAVEGANTE. ME SIENTO AGRADECIDO, PUES ES APRENDIDO MUCHO DE USTEDES,GRACIAS

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder