Sombras internas en CSS: imágenes, texto y más allá

Las sombras en CSS son rápidas y fáciles, ya sea que esté colocando una sombra de cuadro o una sombra de texto. Pero, ¿qué tan cómodo te sientes con las sombras internas? ¿Puedes eliminar un cuadro de sombra incrustado? ¿Cómo se hace lo mismo en un texto?

Hoy vamos a aprender algunas técnicas de sombra paralela realmente simples que puede hacer con solo unas pocas líneas de código. Lo guiaré a través de la sintaxis de box-shadow y text-shadow y cómo cambiarlas para eliminar las sombras paralelas.

Sintaxis de sombra

Antes de saltar a las sombras paralelas, veamos la sintaxis básica para construir los dos tipos diferentes de sombras CSS. Incluso si los ha codificado antes, vale la pena revisarlos rápidamente, solo para que todos estemos en la misma página.

Caja de sombra

Las sombras de cuadro son probablemente el tipo más común de sombras CSS. Los usos potenciales aquí son increíblemente diversos, y los desarrolladores han creado todo tipo de aplicaciones asombrosas y locas. La sintaxis box-shadow es bastante compleja e incluye seis valores separados. Comenzaremos echando un vistazo a cinco de los más comunes.

Como puede ver, enumerados arriba en orden, el orden de los valores es desplazamiento horizontal, desplazamiento vertical, radio de desvanecimiento, radio de dispersión y color. Los dos primeros valores, desplazamiento horizontal y vertical, son bastante sencillos. Los valores positivos empujarán la sombra hacia la derecha y hacia abajo, respectivamente, y los valores negativos empujarán la sombra hacia la izquierda y hacia arriba. Aquí hay un ejemplo de ambos:

Los dos últimos valores, el radio de desvanecimiento y el radio de dispersión son un poco más complicados. La mayor pregunta que puede tener es, ¿cuál es la diferencia? Para responder a esto, veamos primero el que probablemente le resulte más familiar: el radio de desvanecimiento.

Como puede ver, ningún radio de desvanecimiento produce una sombra con bordes definidos, y un radio de desvanecimiento grande produce un borde borroso. Bastante simple, ¿verdad? Entonces, ¿qué pasa con el radio de propagación? ¿Cómo es esto diferente? Una imagen vale más que mil palabras, así que aquí hay un ejemplo:

Como puede ver, sin afectar cuán borrosa es la sombra, la extensión de la sombra esencialmente aumenta y disminuye el área ocupada por la sombra. Si pensaras en ello como el tamaño de la sombra, no estarías también lejos.

Si omite el desenfoque o el radio de dispersión, sus valores predeterminados serán cero. Mirando alrededor de la web, puede ver que la mayoría de las demostraciones que encuentra, incluidas las de Design Shack, no tienen un radio definido.

Texto de sombra

Ahora que tenemos una sólida comprensión de cómo funciona la sintaxis box-shadow, podemos echar un vistazo a la sintaxis del otro tipo de sombra CSS: text-shadow. Afortunadamente, esta sintaxis es aún más simple que la de box-shadow.

Como puedes ver, la mayoría de los valores son los mismos aquí, así que si entiendes uno, entiendes el otro. Curiosamente, sin embargo, no tienes acceso para extender una sombra con text-shadow. Sería genial si lo hicieras, pero desafortunadamente la característica simplemente no existe.

Caja de sombras insertadas

Muy bien, ahora que hemos establecido los conceptos básicos y comprende completamente la sintaxis de las sombras CSS, es hora de pasar a crear sombras «internas» o «paralelas». Para mover una sombra a una sombra insertada, todo lo que tenemos que hacer es agregar una sola palabra, «recuadro».

Es por eso que comencé con la sintaxis básica. En general, la parte del código sombra puede parecer bastante intimidante, pero si la desglosas como lo hicimos nosotros, en realidad es muy simple.

Todos los valores aquí funcionan esencialmente de la misma manera, solo la sombra se coloca dentro del cuadro. Aquí podemos ver cómo extender una sombra puede tener un gran impacto en cómo se ve la sombra:

Tenga en cuenta que esta vez usé el color RGBa en lugar de un valor hexadecimal. Esto es excelente para las sombras porque el valor alfa proporciona una forma rápida y fácil de aclarar u oscurecer la sombra.

Con imagenes

Es bastante fácil arrojar una sombra de cuadro en un div vacío, pero ¿qué sucede si desea colocar una en una imagen? Suena simple, pero la realidad es un poco complicada. Veamos un poco de código y su efecto final. Comenzaremos con una etiqueta de imagen simple.

Ahora apuntaremos esto en nuestro CSS y agregaremos una sombra de cuadro. Uno pensaría que algo como esto funcionaría:

Desafortunadamente, esto nos da el siguiente resultado. ¡La imagen funciona bien, pero la sombra no es visible!

Entonces, ¿cómo proyectamos una sombra interior sobre una imagen? Hay bastantes maneras diferentes de hacer esto, todas con sus ventajas y desventajas. Echemos un vistazo a dos soluciones populares.

La primera solución es envolver la imagen en un div que está restringido al mismo tamaño que la imagen, luego establecer la sombra en ese div mientras usa un posicionamiento relativo y un índice z vudú en la imagen misma. Esto es lo que parece en el código:

Esta solución es viable, pero implica un poco de marcado adicional y un poco de CSS adicional. Alternativamente, puede simplemente soltar la imagen HTML e insertar una imagen de fondo a través de CSS. Con este método, la imagen no cubre la sombra, sino que se coloca debajo de ella de forma predeterminada.

Si combinamos estas técnicas con una fuerte extensión, podemos lograr un efecto de viñeta de imagen bastante dramático usando solo CSS.

Insertar sombras de texto

Incluso en las más complejas, las sombras de caja son bastante fáciles de envolver. Escriba la palabra «insertar» y su sombra se convierte en una sombra interior. Súper simple.

Desafortunadamente, text-shadow nos da muchos más problemas aquí. El valor «insertado» no es compatible con text-shadow, por lo que algo como esto simplemente no funcionará:

En cambio, debemos romperlo juntos. Su funcionamiento es bastante extraño, por lo que lo desarrollaremos en dos pasos para que pueda ver lo que sucede. Primero, insertaremos un h1 y aplicaremos los siguientes estilos:

Ya estamos en territorio extraño. Configuré un color de fondo oscuro, una sombra de texto blanca y un color de relleno transparente. Si te resulta extraño, mira el resultado:

¡Esto no es lo que queremos en absoluto! Curiosamente, tuve un comienzo perfecto. El ingrediente secreto para que todo funcione es la propiedad «background-clip» con el valor establecido en «texto».

Al establecer la propiedad background-clip en text, podemos recortar de manera efectiva todo lo que sucede en el fondo (imágenes, degradados, colores, etc.) hasta los límites del texto. Cuando hacemos esto con el código que ya hemos configurado, este es el resultado:

Como puede ver, logramos un efecto de tipografía muy agradable. Ese borde borroso está recortado y ahora crea la ilusión de una sombra paralela. Mientras tanto, la sombra de texto blanca nos da la luminosidad para el relleno de fondo y un pequeño efecto de bisel fuera del texto. Si aumentamos esa sombra de 0,5 a 03, el texto se vuelve más oscuro.

Conclusión

Ahí lo tienes, prácticamente todo lo que quieras saber sobre cómo aplicar sombras paralelas con CSS. Es un área interesante para explorar. Las técnicas no son muy intuitivas y requieren un poco de esfuerzo para dominarlas, pero si comienzas con el código anterior, serás un profesional en muy poco tiempo.