Hace algunas semanas os dimos desde SiloCreativo algunos trucos sobre como conseguir mejores sombras en nuestros diseños web. En ese artículo nos centramos en la propiedad CSS box-shadow para poner en marcha nuestros ejemplos. Y a pesar de ser muy utilizada, no queremos pasar por alto otras alternativas disponibles para la creación de sombras en la web.
Y es que la web en sus orígenes era bastante diferente a lo que conocemos actualmente. Todo se maquetaba con contenedores con unas formas muy definidas, por lo que con una sola propiedad CSS con la que crear sombras era mas que suficiente. Pero hoy en día tenemos todo tipo de elementos y unos diseños mucho más flexibles y asimétricos, por lo que el propio CSS ha tenido que ir evolucionando para dar respuesta a estas nuevas necesidades.
A lo largo del artículos veremos tres diferentes métodos con los que crear sombras, que nos son más que tres propiedades CSS diferentes, y en que ámbitos son de mejor aplicación. Todo esto depende tanto de nuestros proyectos como de las necesidades que tenga, por lo que aquí mostramos no es más que un punto de partida para empezar a trabajar y tomar las decisiones que consideremos más adecuadas. Y una última recomendación. Si estáis empezando con CSS y queréis saber más sobre este lenguaje, podéis echar un vistazo a nuestra guía de iniciación al CSS, donde seguro que resolvéis muchas de vuestras dudas..
Box-shadow – la propiedad clásica para hacer sombras
Prácticamente todos, cuando pensamos en aplicar una sombra mediante CSS, pensamos en la propiedad box-shadow. Y es que es la ideal para cualquier tipo de contenedor o elemento que tengamos en nuestra web, como botones, cards, inputs, imágenes… Para los que no lo conozcáis, la propiedad box-shadow tiene estos valores:
box-shadow: desplazamiento-x desplazamiento-y radio-desenfoque dispersión color;- desplazamiento-x – desplazamiento horizontal. Los valores negativos indican un desplazamiento de la sombra hacia la izquierda, y los valores positivos hacia la derecha.
- desplazamiento-y – desplazamiento vertical. Los valores negativos indican un desplazamiento de la sombra hacia arriba, y los valores positivos hacia abajo.
- radio-desenfoque – nos indica el difuminado de la sombra. Con un valor 0, la sombra no tendrá ningún tipo de difuminado.
- dispersión – nos marca la propagación de la sombra. Con un valor 0, la sombra tiene el mismo tamaño que su elemento. Conforme más alto sea este valor más grande será la sombra con respecto a su elemento.
- color – el color de la sombra. Se puede utilizar valores HEX, pero utilizaremos RGBA para usar transparencias.
Con estos cinco valores, podemos conseguir sombras de todo tipo. Desde sombras duras y muy cercanas, hasta otras más suaves y dispersas. Según las necesidades de nuestro proyecto, utilizaremos las que mejor encajen.
En alguna que otra ocasión, es posible que queramos aplicar mas de una sombra a un elemento. Al leer nuestro navegador nuestra hoja de estilo en cascada, si ponemos dos propiedades box-shadow seguidas, solo se aplicará la última. Por eso, la mejor forma de hacerlo es aplicar dentro de una misma propiedades dos valores (o los que necesitemos) simplemente separados por una coma, como se puede ver a continuación:
box-shadow: 5px 5px 5px 2px blue, 8px 8px 8px 5px green;Así, conseguimos que las dos sombras se muestren de forma correcta. Esto nos viene muy bien en ciertas ocasiones, como vimos en nuestro artículo sobre el neumorfismo aplicado a los botones.
¿Cuándo usar box-shadow?
Esta propiedad es la que vamos a aplicar en la mayoría de los casos, ya que se adapta perfectamente a todos nuestros contenedores, sea cual sea su tamaño o si tiene los bordes redondeados. Además, la propiedad CSS de las tres que vamos a ver hoy que tiene más compatibilidad con la mayoría de navegadores. Eso sí, como veremos a lo largo del artículo, nos va a presentar problemas en según que situaciones.
Text-shadow – creando sombras en textos
La propiedad CSS text-shadow es ideal para cuando queremos que nuestros textos tengan sombra. Pero claro, ¿por qué necesitamos esta propiedad existiendo box-shadow? Porque pasaría esto:
Y es que box-shadow aplica la sombra al contenedor donde esta el texto, en vez de al propio texto, que es lo que hace text-shadow una propiedad muy a tener en cuenta. Los valores son muy parecidos a los de box-shadow, solo que en este no tendremos el parámetro de dispersión.
text-shadow: desplazamiento-x desplazamiento-y radio-desenfoque color;Al igual que ocurría con la propiedad box-shadow, si queremos aplicar varias sombras al mismo tiempo sobre un elemento, es tan sencillo como aplicar los dos valores separados por una coma:
text-shadow: 5px 5px 5px 2px blue, 8px 8px 8px 5px green;¿Cuándo usar text-shadow?
El uso de la propiedad text-shadow estará limitada para cuando usemos textos. En otros escenarios no tendría mucho sentido usarla, ya que está creada específicamente para textos. En la siguiente sección, veremos como las drop-shadow también nos servirán para los textos, por lo que podremos usar una u otra indistintamente.
Drop-shadow – la propiedad polivalente
El tercer y último método para crear sombras será mediante la propiedad CSS filter: drop-shadow. Con este filtro podemos crear sombras otro tipo de elementos (aparte de los textos), que no comparten su forma con el contenedor que los alberga. Los casos más comunes son los de los PNG transparentes o los SVG, cuando queremos aplicarle sombra solo al dibujo. Veamos la diferencia entre un PNG transparente si le aplicamos la propiedad box-shadow, y el mismo con filter: drop-shadow:
No tienen nada que ver una con otra, ya que con box-shadow se aplica al contenedor donde está la imagen, y con filter: drop-shadow directamente a la parte de la imagen que no es transparente. Con una imagen en formato SVG, con fondo transparente, pasaría lo mismo. Nos podemos ahorrar el tener que aplicar sombreados de forma previa en programas de edición de imágenes como Photoshop. Los valores de este filtro van a ser parecidos a los dos anteriores:
filter: drop-shadow(desplazamiento-x desplazamiento-y radio-desenfoque color);Y para aplicar varias sombras a la vez, varía un poco con lo anterior, aunque es igual de sencillo:
filter: drop-shadow(5px 5px 5px red) drop-shadow(8px 8px 8px green);¿Cuándo usar drop-shadow?
Este filtro realmente podemos usarlo en cualquier elemento, tanto en contenedores, textos, imágenes con fondo transparentes y SVG. Eso sí, hay que tener en que nos es compatible con el 100% de los navegadores, tal como nos muestra Can I use. No se mostrarán estas sombras ni en Internet Explorer ni Opera Mini. Pero podemos considerarlos tan minoritarios que casi es más una anotación al margen que una advertencia real.
Consideraciones finales
Hay un punto que hay que tener en cuenta, sobre todo si vamos a usar la propiedad box-shadow como el filtro drop-shadow de forma conjunta en un proyecto, y queremos mantener cierta homogeneidad en todas las sombras. Y es que, para conseguir el mismo radio de desenfoque o blur con ambas propiedades, necesitamos que en el filtro drop-shadow tenga el doble de valor que en box-shadow. Es decir, si aplicamos un box-shadow con un valor de radio de desenfoque de 10px, para conseguir el mismo radio de desenfoque en el filtro drop-shadow, tendrá que ser de 5px.
También tener cuidado al aplicar dos propiedades a un mismo elemento. Por ejemplo, si a un texto le aplicamos tanto la propiedad text-shadow como el filtro drop-shadow, ambos se mostrarán, pero este último con ciertas particularidades. Y es que la sombra de drop-shadow no tomará su origen para su desplazamiento x e y desde el texto, sino desde la sombra que aplica text-shadow. Por este motivo, y para no añadir complejidad, siempre que queramos aplicar varias sombras a un elemento, es mejor usar una propiedad con múltiples valores, a varias propiedades juntas.
Con esto damos por terminado este artículo. Esperamos que os haya servido de ayuda a todos los que tuvieseis algún tipo de duda o problemas con las sombras en vuestros proyectos. Y que en los próximos, consigáis aplicarlas de forma efectiva y sin complicaciones, usando para cada caso el método que mejor se ajuste.
Como siempre, tenéis los comentarios abiertos para cualquier duda, experiencia o añadido que nos queráis hacer sobre este tema.
