En diseño web debemos tener recursos a mano que podamos aplicar con CSS en nuestra tienda online o a la hora de crear una web y uno de los más prácticos y vistosos son las sombras. No siempre utilizarás todas sus posibilidades en un diseño en particular, pero cuantos más conozcas más opciones de personalización podrás aplicar a tus trabajos. Las sombras CSS son una utilísima herramienta para aplicar un toque diferente a los elementos de la página, creando también un efecto de profundidad cuando lo desees.
Cómo se definen las sombras CSS
Comencemos viendo cómo se desarrolla el CSS para crear sombras, aclarando también que existen dos tipos de sombra:
Sombras para las cajas
Tenemos sombras para los elementos en general, que se aplicará sobre la «caja» del elemento. Estas se consiguen con el atributo «box-shadow» y la sintaxis sería la siguiente:
box-shadow: 1px 1px 1px 1px rgba(32,32,32,0.3);
Por orden de aparición, los valores de unidades entregadas a box-shadow son los siguientes:
- Desplazamiento de la sombra en la horizontal
- Desplazamiento de la sombra en vertical
- Desenfoque de la sombra
- Propagación de la sombra
- Color aplicado
Los 4 valores iniciales los podemos entregar en distancia, por ejemplo píxeles. El último valor será un color. El color puede ser un RGB normal, pero es muy habitual que acabemos usando un RGBA porque le aplicará también una transparencia en el color de la sombra.
Sombras para el texto
Por su parte, existen sombras CSS que se pueden aplicar sobre el texto del elemento, mediante las que se pueden conseguir otros tipos de efectos.
text-shadow: 1px 1px 1px rgba(32,32,32,0.3);
De nuevo, los valores por orden de aparición son los siguientes:
- Desplazamiento en la horizontal
- Desplazamiento en la vertical
- Desenfoque
- Color de la sombra
Cómo crear efectos con sombras
Si lo que queremos es crear efectos vistosos con las sombras CSS podemos trabajar con tres principales alternativas que vamos a tratar ahora por separado. Las veremos con las sombras para las cajas, pero básicamente podrías hacer lo mismo con los textos.
Efectos 3D con sombras CSS
El primer efecto que podemos conseguir es la separación entre las cajas y el resto de la página. Para ello, podremos aplicar un desplazamiento de la sombra unido con un degradado.
El degradado siempre lo podemos asignar un poco mayor que el desplazamiento, para conseguir que la sombra no sea demasiado sólida. Unido a un color de la sombra con valor RBGA para transparencia conseguiremos efectos bastante atractivos. Aquí tenemos varias reglas CSS para sombras, que aplicadas a cajas conseguirán el mencionado efecto de separación, emulando un poco el 3D.
.separar0 { box-shadow: none; } .separar1 { box-shadow: 2px 2px 4px 0 rgba(20, 20, 20, 0.3); } .separar2 { box-shadow: 7px 7px 12px 0 rgba(20, 20, 20, 0.3); } .separar3 { box-shadow: 14px 14px 20px 0 rgba(20, 20, 20, 0.3); }
Aplicadas estas clases a 4 cajas, quedarían más o menos como aparece en la siguiente imagen: 
Efecto de sombra interior
Es posible aplicar una sombra al interior del elemento con el valor «inset». Para las sombras en el interior de los elementos es preferible ser bastante conservadores y no pasarse de desplazamiento o degradado de la sombra, porque podría afectar a la visibilidad del contenido de las cajas. Incluso podemos trabajar únicamente con un poco de degradado sin aplicar desplazamiento, para que el sombreado sea equitativo en todos los lados de la caja.
El valor «inset» lo aplicamos en la propiedad box-shadow, de la siguiente manera.
.interior1 { box-shadow: inset 1px 1px 4px 0 rgba(20, 20, 20, 0.2); } .interior2 { box-shadow: inset 0px 0px 10px 0 rgba(20, 20, 20, 0.2); }
Estos efectos aplicados tendrían más o menos este aspecto.
Aplicar varias sombras al mismo tiempo
Es posible aplicar distintos valores de sombra al mismo tiempo sobre las cajas o textos de la página. Esto nos puede ayudar a conseguir toda una variedad de nuevos efectos, por ejemplo sombras de distintos colores o sombras con una propagación en colores diferentes.
Para aplicar más de una sombra simplemente separamos las distintas especificaciones de cada sombra separadas por comas. Podemos poner tantas como queramos, mezclando desplazamientos, desenfoques y propagaciones distintas, así como colores. En estos ejemplos puedes ver sombras que mezclan varios colores, para conseguir un efecto muy particular.
.colorear1 { box-shadow: -1px -1px 6px 0 rgb(122, 221, 102), 4px 4px 16px 2px rgb(92, 162, 235); } .colorear2 { box-shadow: 2px 2px 8px 0 rgb(209, 102, 221), 4px 4px 16px 0 #d66, 0px 0px 24px 2px rgb(221, 197, 102); }
Observarás que no se trata de definir varias declaraciones box-shadow, pues en ese caso estaríamos simplemente sobrescribiendo la sombra. En realidad es una única declaración a la que le hemos añadido diversas sombras separadas por comas. El efecto que conseguimos mediante ese código se puede ver en la imagen siguiente.
Eso es todo lo que necesitas saber sobre la creación de sombras con CSS. ¡Ahora simplemente necesitas practicar! ¡Déjate llevar por tu creatividad para mejorar el diseño web!