Sombras CSS

Un efecto interesante que podemos utilizar en nuestros diseños web a partir de CSS3 es el de las sombras, ya que nos permiten añadir atractivas sombras que pueden suavizar y hacer más elegantes nuestros diseños.

Podemos utilizar dos tipos de propiedades, text-shadow y box-shadow. La primera de ellas para sombras en textos, y la segunda para sombras en otro tipo de elementos como cajas o contenedores. Ambas propiedades son prácticamente idénticas, solo con algunas diferencias:

Propiedad Valor Significado
text-shadow | none Aplica una sombra a un contenido de texto.
box-shadow inset | none Aplica una sombra a una caja o contenedor.
  • Los valores y nos permiten indicar las coordenadas de X e Y donde se situará la sombra, respecto a la posición del texto o contenedor original.

  • El primer valor es el blur, que no es otra cosa que el radio de desenfoque de la sombra (en px, em, etc...). Cuanto más bajo sea este valor, menos difuminada estará la sombra, cuanto más alto sea, más borrosa.

  • El segundo valor es el factor de crecimiento de la sombra. En algunos casos, en los que tenemos una sombra con muy poco desenfoque y las posiciones son 0, puede que la sombra quede justo detrás del elemento, sin poderse apreciar. Aumentando este valor, haremos que la sombra crezca hacia los lados el tamaño que indiquemos.

  • Por último, podemos indicar el a utilizar (recuerda que puedes utilizar canales alfa) y la palabra clave inset si queremos que la sombra sea interna, en lugar de externa que es la que aparece por defecto.

div {
    /* Sombra normal */
    box-shadow: 2px 2px 10px #666;
    /* Sombra superior sin desenfoque */
    box-shadow: 5px -5px 0 2px #444;
    /* Sombra interior */
    box-shadow: 5px 5px 25px #222 inset;
}

Ojo: Ten en cuenta que tanto el de factor de crecimiento como la palabra clave inset sólo están disponibles para box-shadow, ya que text-shadow no posee esos parámetros.

Sombras múltiples

Una característica interesante de la propiedad background en CSS es la posibilidad de indicar fondos multiples separando por comas. En el caso de las sombras, también es posible hacer lo mismo, consiguiendo efectos muy vistosos:

p {
    /* Se indican 3 sombras diferentes */
    text-shadow:
      2px 2px 0 #AAA,
      6px 6px 2px #777,
      12px 12px 8px #444;
}

En el caso de la propiedad box-shadow también se pueden indicar sombras múltiples.

Sombras flexibles

En el módulo de filtros CSS existe una función denominada drop-shadow que puede utilizarse en un filtro. Dicha función permite aplicar una sombra idéntica a un objeto determinado con una forma irregular.

Por ejemplo, podríamos disponer de una imagen PNG con fondo transparente, al que le queremos aplicar una sombra de modo que respete su contorno. Con la propiedad box-shadow la sombra que se aplicaría sería totalmente rectangular, sin embargo, con la propiedad filter y la función drop-shadow (la cuál tiene los mismos parámetros que text-shadow), aplicaría una sombra que respetará exactamente la forma de la imagen.

img {
    filter: drop-shadow(5px 5px 10px #444);
}
Manz
Publicado por Manz

Docente, divulgador informático y freelance. Autor de Emezeta.com, es profesor en la Universidad de La Laguna y dirige el curso de Programación web FullStack y Diseño web FrontEnd de EOI en Tenerife (Canarias). En sus ratos libres, busca GIF de gatos en Internet.