Adentrarse en las sombras

Hablemos de sombras en el diseño web. Las sombras añaden textura, perspectiva y enfatizan las dimensiones de los objetos. En el diseño web, el uso de luces y sombras puede agregar realismo físico y puede usarse para crear interfaces táctiles ricas.

Tome la página de destino a continuación. Es para recorridos en bicicleta por Islandia. Observe la sombra paralela adornada del ciclista y cómo crea la percepción de que están volando sobre no solo el contenido de la página, sino la página misma, como si estuvieran “apareciendo” sobre la pantalla. Se siente dinámico e inmediato, lo cual es perfecto para el tema de la aventura.

Compare eso con el siguiente ejemplo. Es un diseño “plano”, sin sombras. En este caso, la propia bicicleta es el punto focal. La ausencia de profundidad y realismo permite que la moto destaque por sí sola.

Puede apreciar las diferencias entre estos enfoques. Usar sombras y profundidad es una elección de diseño; deben respaldar el tema y el mensaje que desea transmitir con el contenido.

luces y sombras

Como acabamos de ver, la profundidad puede mejorar el contenido. ¿Y qué hace exactamente una sombra? ¡Luz!

Es imposible hablar de sombras sin adentrarnos en la luz. Controla la dirección de una sombra, así como qué tan profunda o superficial aparece la sombra. No puedes tener uno sin el otro.

El sistema de diseño Material Design de Google es un buen ejemplo de cómo emplear luces y sombras de forma eficaz. Seguramente te has encontrado con la estética de Material Design porque Google la emplea en casi todos sus productos.

El sistema de diseño toma señales del mundo físico y expresa interfaces en un espacio tridimensional utilizando luz, superficies y sombras proyectadas. Sus pautas sobre el uso de luces y sombras cubren esto con gran detalle.

En el entorno de Material Design, las luces virtuales iluminan la interfaz de usuario. Las luces clave crean sombras direccionales más nítidas, llamadas sombras clave. La luz ambiental aparece desde todos los ángulos para crear sombras suaves y difusas, llamadas sombras ambientales.

Las sombras son un componente central de Material Design. Compare eso con las Pautas de interfaz humana de Apple para macOS, donde la translucidez y el desenfoque son más un factor determinante para evocar profundidad.

En este caso, la luz sigue siendo un factor influyente, ya que permite que los elementos se mezclen con el escritorio o incluso con otros paneles de la interfaz de usuario. Nuevamente, es una elección de diseño emplear esto en su interfaz. De cualquier manera, puedes ver cómo la luz influye en la percepción visual de la profundidad.

Fuentes de luz y color.

Ahora que entendemos la relación entre la luz y las sombras, debemos profundizar un poco más para ver cómo la luz afecta a las sombras. Ya hemos visto cómo la intensidad de la luz produce sombras a diferentes profundidades. Pero hay mucho que decir sobre la forma en que la luz afecta la dirección y el color de las sombras.

Hay dos tipos de sombras que ocurren cuando una luz incide sobre un objeto, una sombra paralela y una sombra de forma .

Sombras paralelas

Se proyecta una sombra paralela cuando un objeto bloquea una fuente de luz. Una sombra paralela puede variar en tono y valor. La terminología de color puede ser densa y confusa, así que hablemos de tono y valor por un momento.

El tono es un tono mezclado con gris. El valor describe la claridad u oscuridad general de un color. El valor es muy importante en la pintura, ya que es la forma en que el artista traduce las relaciones entre la luz y los objetos en color.

En el mundo del diseño web, estas facetas del color son intrínsecas a la interfaz de usuario del selector de color.

Formar sombras

Una sombra de forma , por otro lado, es el lado de un objeto que está alejado de la fuente de luz. Una sombra de forma tiene bordes más suaves y menos definidos que una sombra paralela. Las sombras de las formas ilustran el volumen y la profundidad de un objeto.

La apariencia de una sombra depende de la dirección de la luz, la intensidad de la luz y la distancia entre el objeto y la superficie donde se proyecta la sombra. Cuanto más intensa es la luz, más oscura y nítida es la sombra. Cuanto más suave es la luz, más tenue y suave es la sombra. En algunos casos, obtenemos dos sombras distintas para la luz direccional. La umbra es donde se obstruye la luz y la penumbra es donde se rechaza la luz.

Si una superficie está cerca de un objeto, la sombra será más nítida. Si una superficie está más alejada, la sombra será más tenue. Esto no es algo científico abstracto. Estas son cosas que encontramos todos los días, te des cuenta o no.

La luz también puede reflejarse desde los lados de un objeto u otra superficie. Las superficies brillantes reflejan la luz, las superficies oscuras absorben la luz.

Estas son las facetas de la luz más valiosas que hay que comprender para el diseño web. La física detrás de la luz es un tema complejo, aquí solo he tocado ligeramente algo de él. Si desea ver ejemplos explícitos de qué sombras se proyectan según diferentes fuentes de luz, esta guía para dibujar sombras para cómics es instructiva.

Colocación de fuentes de luz.

Recuerde, las sombras van de la mano con la luz, por lo que definir una fuente de luz (aunque técnicamente no la hay) es la forma de crear efectos de sombra impresionantes. El truco consiste en agregar sombras constantemente en relación con la fuente de luz. Una fuente de luz colocada encima de un elemento proyectará una sombra debajo del elemento. Colocar una fuente de luz a la izquierda de un elemento proyectará una sombra hacia la derecha. ¡Colocar múltiples fuentes de luz en la parte superior, inferior, izquierda y derecha de un elemento en realidad no proyecta ninguna sombra!

Se puede proyectar una fuente de luz en cualquier dirección que elija. Solo asegúrese de que se use de manera consistente en su diseño, de modo que la sombra de un elemento coincida con otras sombras en la página.

Elevación

Las sombras también pueden transmitir elevación . Una vez más, Material Design es un buen ejemplo porque demuestra cómo se utilizan las sombras para crear una percepción de separación entre elementos.

sombras interiores

Hablando de elevación, la box-shadowpropiedad es la única que puede crear sombras interiores para un efecto hundido. Entonces, en lugar de elevarse, el elemento parece estar presionado. Eso es gracias a la insetpalabra clave.

Eso es bueno para algo así como un efecto en el que al hacer clic en un botón parece presionarlo físicamente.

También es posible "falsificar" una sombra de texto interna con un pequeño truco que se admite principalmente en todos los navegadores:

Sombras en capas

¡No estamos limitados a una sola sombra por elemento! Por ejemplo, podemos proporcionar una lista de sombras de la box-shadowpropiedad separadas por comas. ¿Por qué querríamos hacer eso? Sombras más suaves, por ejemplo.

Los efectos interesantes es otra.

La superposición de sombras puede incluso mejorar la tipografía utilizando esta text-shadowpropiedad.

Solo sepa que las capas de sombras son un poco diferentes porque filter: drop-shadow()su sintaxis también requiere una lista, pero está separada por espacios en lugar de por comas.

.box {  box-shadow:     0 2px 2px #555, /* commas */    0 6px 5px #777,    0 12px 10px #999  ;}.box {  filter:    drop-shadow(0 2px 2px #555) /* spaces */    drop-shadow(0 6px 5px #777)    drop-shadow(0 12px 10px #999);}

¿Otra cosa? Las sombras se apilan una encima de la otra, en el orden en que se declaran, donde la sombra superior es la primera en la lista.

Quizás hayas adivinado que drop-shadow()aquí funciona un poco diferente. Las sombras se agregan exponencialmente, es decir 2^number of shadows - 1.

Así es como funciona:

• 1 sombra = (2^1 – 1). Se representa una sombra.
• 2 sombras = (2^2 – 1). Se representan tres sombras.
• 3 sombras = (2^3 – 1). Se representan siete sombras.

O, en código:

.one-shadow {  filter: drop-shadow(20px 20px 0 grey);}.three-shadows {  filter:     drop-shadow(20px 20px 0 grey)    drop-shadow(40px 0 0 yellow);}.seven-shadows {  filter:     drop-shadow(20px 20px 0 grey)    drop-shadow(40px 0 0 yellow);    drop-shadow(80px 0 0 red);}

El feDropShadow elemento funciona exactamente de la misma manera para los SVG.

Sombras y accesibilidad

Aquí tienes algo que puedes analizar: las sombras pueden ayudar a mejorar la accesibilidad.

Google realizó un estudio con participantes con baja visión para comprender mejor cómo las sombras y los contornos impactan la capacidad de un individuo para identificar e interactuar con un componente. Descubrieron que usar sombras y contornos:

• aumenta la facilidad y velocidad de encontrar un componente al escanear páginas, y
• mejora la capacidad de uno para determinar si un componente es interactivo o no.

Ese no fue un estudio científico de amplio alcance ni nada por el estilo, así que demos la vuelta y veamos qué dice el W3C en sus pautas para los estándares WCAG 2.0:

[…] el diseñador podría oscurecer el fondo detrás de la letra o agregar un contorno negro delgado (al menos un píxel de ancho) alrededor de la letra para mantener la relación de contraste entre la letra y el fondo por encima de 4,5:1.

Se trata de texto claro sobre un fondo claro. WCAG recomienda una relación de contraste de al menos 4,5:1 entre texto e imágenes. Puede utilizar sombras de texto para agregar un contraste más fuerte entre ellos.

Sombras y actuación

Antes de sumergirse en las sombras y agregarlas a todas las cosas, vale la pena señalar que sí afectan el rendimiento.

Por ejemplo, filter: drop-shadowalgunos navegadores lo aceleran por hardware . Se puede crear una nueva capa de compositor para ese elemento y descargarla a la GPU. No querrás tener demasiadas capas, ya que ocupan una memoria de GPU limitada y eventualmente degradarán el rendimiento. Puede evaluar esto en las DevTools de su navegador.

Desenfocar es una operación costosa, así que úsala con moderación. Cuando difuminas algo, se mezclan los colores de los píxeles alrededor del píxel de salida para generar un resultado borroso. Por ejemplo, si su blur-radiusparámetro es 2px, entonces el filtro debe mirar dos píxeles en cada dirección alrededor de cada píxel de salida para generar el color mezclado. Esto sucede para cada píxel de salida, lo que significa muchos cálculos que crecen exponencialmente. Por lo tanto, las sombras con un gran radio de desenfoque generalmente son más lentas de renderizar que otras sombras.

¿Sabías?

¿Sabías que las sombras no influyen en el diseño del documento?

Una sombra tiene el mismo tamaño que el elemento al que apunta. Puede modificar el tamaño de a box-shadow(a través del parámetro de radio de extensión), pero otras propiedades no pueden modificar el tamaño de la sombra.

¿Y sabías que una sombra tiene implícitamente z-indexelementos inferiores a? Por eso las sombras se encuentran debajo de otros elementos.

¿Y qué pasa con el recorte y el enmascaramiento? Si un elemento con a box-shadowestá recortado (con clip-path) o usa una máscara (con mask), la sombra no se muestra. Por el contrario, si se recorta un elemento con text-shadowo filter: drop-shadow(), se muestra una sombra, siempre que esté dentro de la región de recorte.

Aquí hay otro: no podemos crear sombras oblicuas (con líneas diagonales) con propiedades de sombra. Eso requiere crear un elemento de sombra y usar un transform:skew()sobre él.

Ah, y uno más: box-shadowsigue border-radius. Si un elemento tiene esquinas redondeadas, la sombra también se redondeará. En otras palabras, la sombra refleja la forma de la caja. Por otro lado, filter: drop-shadow()puede crear una forma irregular porque respeta la transparencia y sigue la forma del contenido.

Mejores casos de uso para diferentes tipos de sombras

Prácticamente cualquier cosa en la web puede tener una sombra y existen múltiples propiedades y funciones de CSS que crean sombras. Pero elegir el tipo correcto de sombra es lo que hace que una sombra sea efectiva.

Evaluamos las opciones:

• box-shadow: Esta propiedad CSS crea sombras que se ajustan al cuadro delimitador de los elementos. Es versátil y se puede usar en cualquier cosa, desde tarjetas hasta botones y casi cualquier cosa donde la sombra simplemente deba seguir el cuadro del elemento.
• text-shadow: Esta es una propiedad CSS que crea sombras específicamente para elementos de texto.
• filter: drop-shadow(): La propiedad CSS aquí es filter, pero lo que crea la sombra es la drop-shadowfunción que acepta. Lo que diferencia a este tipo de sombra de, digamos box-shadow, es que sigue la forma representada de cualquier elemento (incluidos los pseudos).
• feDropShadow: En realidad, este es un elemento SVG, mientras que el resto son propiedades CSS. Por lo tanto, usaría esto para crear sombras paralelas directamente en el marcado SVG.

Una vez que dominas los diferentes tipos de sombras y los poderes únicos de creación de sombras de cada una, las posibilidades de efectos de sombras parecen infinitas. Desde simples sombras paralelas hasta elementos flotantes e incluso sombras interiores, podemos crear imágenes interesantes que agreguen significado o valor adicional a la interfaz de usuario.

Lo mismo ocurre con las sombras de texto.

Sombras en la naturaleza

Las sombras son omnipresentes. Los vemos utilizados de maneras nuevas e interesantes todo el tiempo.

¿Has oído la palabra de moda “neumorfismo” últimamente? Se trata de sombras. Aquí hay una implementación de María Muñoz:

Yuan Chuan, que hace un arte generativo asombroso, llama a las sombras un "arma secreta" en el diseño de la interfaz de usuario:

CSS se basa en la estructura DOM existente en el navegador. No es posible generar nuevos elementos distintos de ::beforey ::after. A veces realmente desearía que CSS tuviera la capacidad de hacerlo de manera sencilla.

Sin embargo, podemos compensar esto parcialmente creando varias sombras y degradados completamente en CSS.

Por eso tener drop-shadowes tan emocionante. Juntos text-shadowy box-shadowpodemos hacer mucho más.

Solo mira cómo usa sombras paralelas para crear patrones intrincados.

Sí, eso es bastante loco. Y hablando de locura, vale la pena mencionar que volverse demasiado loco puede resultar en un rendimiento deficiente, así que tenga cuidado.

¿Qué pasa con los pseudoelementos?

Oh, sí, las propiedades de las sombras son compatibles con los pseudoelementos ::beforey .::after

¿Otros pseudos que respetan las sombras? El ::first-letterpseudoelemento acepta box-shadowy text-shadow. El ::first-linepseudoelemento acepta text-shadow.

Mire cómo Jhey Tompkins se volvió creativo utilizando box-shadowpseudoelementos para crear cargadores animados.

Animando sombras

¡Sí, podemos hacer que se muevan! Las propiedades y funciones que hemos cubierto aquí son totalmente compatibles con animaciones y transiciones CSS. Eso significa que podemos mover sombras, difuminar sombras, expandir/reducir sombras (con box-shadow) y alterar el color.

Animar una sombra puede proporcionarle al usuario una señal de que un elemento es interactivo o de que se ha llevado a cabo una acción. Vimos anteriormente con nuestro ejemplo del botón que una insetsombra mostraba que el botón había sido presionado. Otro patrón de animación común es elevar una tarjeta al pasar el mouse.

Si desea optimizar el rendimiento de la animación, ¡evite animar box-shadow! Es más eficaz animar drop-shadow(). Pero si quieres la animación más fluida, ¡un truco es la mejor opción! Agregue un ::afterpseudoelemento con un tamaño más grande box-shadowy anímelo en su opacitylugar.

Por supuesto, hay muchas más cosas que puedes animar. ¡Dejaré esa exploración en tus manos!

Terminando

¡Uf, quién diría que había tantas cosas en algo tan aparentemente "simple" como las sombras CSS! Está la fuente de luz y cómo se proyectan las sombras. Los diferentes tipos de sombras y su color. Se utilizan sombras para evocar profundidad, elevar elementos e insertarlos. Está el hecho de que podemos superponer sombras sobre otras sombras. Y que tenemos una selección de propiedades CSS que podemos usar para diferentes casos de uso. Luego, están las implicaciones de accesibilidad y rendimiento que conllevan. Y oye, ¡la animación es una cosa! ¡Eso es muchísimo!

De todos modos, esperamos que esta amplia descripción general le haya dado algo nuevo que analizar o, al menos, le haya ayudado a repasar algunos conceptos.