XML Malize Evans Dazigned
Compártenos



Bienvenidos al blog de Malize Dazigned.

Si os gusta lo que veis aquí, por favor, mostradlo marcando “me gusta” al final del artículo y dejando vuestro comentario. Si quereis ver algún tutorial en especial sobre diseño, diseño web, Illustrator, Photoshop, retoque fotográfico o fotografía, podeis usar el formulario de contacto para hacerme llegar la pregunta.

No olvideis daros de alta en nuestro feed (a vuestra derecha) para recibir los últimos tutoriales en vuestro blog.

Añadir sombra en CSS

Sep 5, 01:01 PM

Añadir una sombra en CSS es menos complicado de lo que parece, aunque, como siempre, si se quieren usar standards de CSS3 tenemos el típico problema del soporte a navegadores en la edad de piedra, como IE6 (aunque esto no es una novedad de CSS3, en CSS2 ya estaba implementado).

La sombra añadida a un div funciona con los siguientes navegadores.

* Firefox 3.5+ * Safari 3+ * Google Chrome * Opera 10.50 * Internet Explorer 5.5

La sintaxis es muy sencilla:

#div { box-shadow: 3px 3px 4px #000;
}

Los primeros dos valores son las distancias horizontales y verticales de sombra, el tercero para el desenfoque de la sombra y, por último, el color de la sombra.

Esta es la sintaxis para versiones de navegadores que aceptan CSS3, en caso contrario, tenemos dos versiones más:

#div { -moz-box-shadow: 3px 3px 4px #000; -webkit-box-shadow: 3px 3px 4px #000; box-shadow: 3px 3px 4px #000;
}

Por increíble que parezca, también hay un hack para exporer.

Para IE8 sería:

#div { -ms-filter: “progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=’#000000’)”;
}

Para IE del 5 al 7:

#div { filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=’#000000’);
}

Esta sintaxis es para añadir sombra a un div, sin embargo también se puede añadir sombra al texto:

text-shadow: 2px 2px 2px #000;

Y así es como quedaría el texto (si no puedes ver un texto con sombra, necesitas actualizar tu navegador).

,






 



Comentarios


  • Ataque censor al Festival de Sitges

    Mar 10, 11:26 AM

    El Festival de Sitges y su director, Ángel Sala, han sufrido un ataque de las esferas más conservadoras del país, que consideran un atentado contra la moralidad el que hayan tomado la decisión de incluir la película A Serbian Film en su programa del 2010.

    + Leer Más

  • Masters of Hasselblad: August Bradley

    Mar 7, 11:31 AM

    El increíble fotógrafo conceptual August Bradley inagura nuestra nueva sección de inspiración fotográfica dedicada a aquellos fotógrafos que han ganado el prestigioso galardón de fotografía Masters of Hasselblad.

    + Leer Más

  • El efecto Dragan I - Tutorial

    Mar 7, 11:19 AM

    Todos conocemos el espectacular estilo del fotógrafo Andrezej Dragan, creador de ese estilo conocido como “El Efecto Dragan”. Aquí desvelaremos unos cuantos trucos para que aprendas a hacerlo en tus fotografías.

    + Leer Más

    • Más cambios en la web

    Mar 2, 11:33 AM

    Estos han sido días de cambios en la web: pronto estarán disponibles nuevas funciones de búsqueda y el estilo del blog ya se asemeja al estilo del resto de la web.

    + Leer Más

    El Joker: Grandes versiones

    Jan 8, 04:08 PM

    Desde aquí hemos querido rendir nuestro pequeño homenaje a este gran personaje que ha dado muchos años de vidilla al Caballero Oscuro, como muestra de inspiración.

    + Leer Más

    Catálogo de Lencería para Sexy Apparel

    Dec 17, 01:58 PM

    Finalizado el catálogo de lencería para Sexy Apparel, con las maquilladoras Elisenda Amorós y Carmina Camps y el retocador GoaRetouch.

    + Leer Más

    Anita Muñequita

    Dec 6, 04:33 AM

    Nueva foto de la espectacular modelo Ana Hernández, retocada por la genial retocadora neoyorkina Jaz Harold

    + Leer Más