Drop-shadow es un valor CSS de la propiedad filter, que te permitirá aplicar sombra a las imágenes. Es similar a box-shadow, solo que en esta última no se pueden aplicar sombras a las imágenes, sino a las cajas de contenido. Drop-shadow permite sombrear las imágenes, y esto es especialmente útil si usamos imágenes PNG, ya que el contorno de dicha imagen quedará con sombra. Arriba, en la cabecera de CSSBlog puedes comprobar como al pasar el ratón la imagen queda rodeada de una sombra de color blanca.

¿Para qué navegadores funcionan?

Drop-shadow funciona para estos navegadores:

  • Firefox ¿? Ver nota.
  • Chrome 18.0+
  • Safari 4.0+
  • Internet Explorer 8, 9.
  • Opera 12+.

Explicaré su funcionamiento:

Código HTML

El código HTML es sencillo. Haré una explicación con el logo del blog.Tenemos nuestra imagen insertada en HTML, rodeada de un div:

<div class="logo"><a href="https://www.cssblog.es"><img src="http://img.cssblog.es/wp-content/themes/collective/images/logo-new-cssblog2.png" width="347" height="102" alt="CSSBlog ES"/></a></div>

 

Código CSS

En mi caso lo tengo puesto para que cuando se pase el ratón por encima (:hover) se aplique la propiedad drop shadow. Es decir, el estado normal sería así:

#header .logo a img {
border: none;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
float: left;
margin-right: 25px;
}

Le tengo puesta una transición para que el paso de normal a :hover sea más suave. Ahora vamos con el estado :hover:

#header .logo a img:hover {
text-decoration: none;
-webkit-filter: drop-shadow(0px 0px 0px #fff);
-moz-filter: drop-shadow(0px 0px 0px #fff);
-ms-filter: drop-shadow(0px 0px 0px #fff);
-o-filter: drop-shadow(0px 0px 0px #fff);
filter: drop-shadow(0px 0px 0px #fff);
}

Cada línea es para un navegador, -webkit- para navegadores como Chrome y Safari, -moz para Firefox, -ms para Internet Explorer, -o- para opera, y filter es la versión estandarizada CSS3.

El primer valor corresponde a la posición x. Cuanto más aumentemos el valor más se irá la sombra a la derecha, si lo disminuimos pasa lo contrario. El segundo valor es la posición y, cuanto más lo aumentemos más se irá hacia abajo la sombra, y viceversa. El tercer valor es el blur, cuanto más aumentemos dicho valor más difuminada se mostrará la sombra. Finalmente, con el quinto valor le damos el color a la sombra.

Ejemplo

Para ver un ejemplo pasar el cursor sobre el logo de CSSBlog.es, que se encuentra en la cabecera.

Sin drop-shadow:

sin-drop-shadow

Con drop-shadow:

con-drop-shadow

Eso es todo. Si tienes dudas puedes escribirla en los comentarios o en el foro de la comunidad.