Creando efectos divertidos con sombras de texto CSS

Echemos un vistazo a cómo podemos usar la propiedad text-shadow de CSS para crear texto con apariencia verdaderamente 3D. Podrías pensar que la sombra de texto es capaz de aplicar un color borroso y degradado detrás del texto, ¡y estarías en lo cierto! Pero al igual que el cuadro de sombra, puedes controlar qué tan borrosa está la sombra, incluso reducirla hasta que no quede borrosa en absoluto. Eso, combinar con separar sombras por comas y apilarlas, es el truco de CSS que haremos aquí.

Al final, tendremos algo parecido a esto:

Actualización rápida sobre la sombra de texto

La sintaxis es así:

.el {  text-shadow: [x-offset] [y-offset] [blur] [color];}

• x-offset: Posición en el eje x. Un valor positivo mueve la sombra hacia la derecha, un valor negativo mueve la sombra hacia la izquierda. (requerido)
• y-offset: Posición en el eje y. Un valor positivo mueve la sombra hacia abajo, un valor negativo mueve la sombra hacia arriba. (requerido)
• blur: Cuánto desenfoque debe tener la sombra. Cuanto mayor sea el valor, más suave será la sombra. El valor predeterminado es 0px (sin diseño). (opcional)
• color: El color de la sombra. (requerido)

la primera sombra

Comenzamos a crear nuestro efecto agregando solo una sombra. La sombra se empujará 6px hacia la derecha y 6px hacia abajo:

:root {  --text: #5362F6; /* Blue */  --shadow: #E485F8; /* Pink */}
.playful {  color: var(--text);  text-shadow: 6px 6px var(--shadow);} 

Creando profundidad con más sombras.

Todo lo que tenemos es una sombra plana en este punto; Todavía no tiene mucho 3D. Podemos crear la profundidad y conectar la sombra con el texto real agregando más text-shadowinstancias al mismo elemento. Todo lo que se necesita es separarlos por comas. Comenzamos a agregar uno más en el medio:

.playful {  color: var(--text);  text-shadow: 6px 6px var(--shadow),               3px 3px var(--shadow);} 

Esto ya está llegando a alguna parte, pero necesitaremos agregar algunas sombras más para que se vea bien. Cuantos más pasos agreguemos, más detallado será el resultado final. En este ejemplo, comenzaremos desde 6px 6px y aumentaremos gradualmente en incrementos de 0,25px hasta llegar a 0.

.playful {  color: var(--text);  text-shadow:     6px 6px        var(--shadow),     5.75px 5.75px  var(--shadow),     5.5px 5.5px    var(--shadow),     5.25px 5.25px  var(--shadow),    5px 5px        var(--shadow),     4.75px 4.75px  var(--shadow),     4.5px 4.5px    var(--shadow),     4.25px 4.25px  var(--shadow),    4px 4px        var(--shadow),    3.75px 3.75px  var(--shadow),    3.5px 3.5px    var(--shadow),    3.25px 3.25px  var(--shadow),    3px 3px        var(--shadow),    2.75px 2.75px  var(--shadow),    2.5px 2.5px    var(--shadow),    2.25px 2.25px  var(--shadow),    2px 2px        var(--shadow),    1.75px 1.75px  var(--shadow),    1.5px 1.5px    var(--shadow),    1.25px 1.25px  var(--shadow),    1px 1px        var(--shadow),    0.75px 0.75px  var(--shadow),    0.5px 0.5px    var(--shadow),    0.25px 0.25px  var(--shadow);}

Simplificando el código con Sass

El resultado puede parecer bueno, pero el código en este momento es bastante difícil de leer y editar. Si queremos agrandar la sombra, tendríamos que copiar y pegar mucho para lograrlo. Por ejemplo, aumentar el tamaño de la sombra a 10 píxeles significaría agregar 16 sombras más manualmente.

Y ahí es donde SCSS entra en escena. Podemos usar funciones para automatizar la generación de todas las sombras.

@function textShadow($precision, $size, $color){  $value: null;   $offset: 0;  $length: $size * (1 / $precision) - 1;
  @for $i from 0 through $length {    $offset: $offset + $precision;    $shadow: $offset + px $offset + px $color;    $value: append($value, $shadow, comma);  }
  @return $value;}
.playful {  color: #5362F6;  text-shadow: textShadow(0.25, 6, #E485F8);}

La función textShadowtoma tres argumentos diferentes: la precisión, el tamaño y el color de la sombra. Luego crea un bucle donde el desplazamiento aumenta $precision(en este caso, es 0,25 px) hasta que alcanza el tamaño total (en este caso 6 px) de la sombra.

De esta forma podremos aumentar fácilmente el tamaño o la precisión de la sombra. Por ejemplo, para crear una sombra de 10px de tamaño y que aumenta 0,1px, solo tendríamos que cambiar esto en nuestro código:

text-shadow: textShadow(0.1, 10, #E485F8);

Colores alternos

Queremos darle un poco de sabor a las cosas alternando colores. Dividiremos el texto en letras individuales envueltas en espacios (esto se puede hacer manualmente o automatizar con React o JavaScript). La salida se verá así:

p aria-label="Wash your hands!"  span aria-hidden="true"W/spanspan aria-hidden="true"a/spanspan aria-hidden="true"s/spanspan aria-hidden="true"h/span .../p

Luego podemos usar el :nth-child()selector en los tramos para cambiar el color de su texto y sombra.

.playful span:nth-child(2n) {  color: #ED625C;  text-shadow: textShadow(0.25, 6, #F2A063);}

Si hubiéramos hecho esto en CSS básico, esto es lo que obtendríamos:

.playful span {  color: var(--text);  text-shadow:     6px 6px var(--shadow),    5.75px 5.75px var(--shadow),    5.5px 5.5px var(--shadow),    5.25px 5.25px var(--shadow),    5px 5px var(--shadow),    4.75px 4.75px var(--shadow),    4.5px 4.5px var(--shadow),    4.25px 4.25px var(--shadow),    4px 4px var(--shadow),    3.75px 3.75px var(--shadow),    3.5px 3.5px var(--shadow),    3.25px 3.25px var(--shadow),    3px 3px var(--shadow),    2.75px 2.75px var(--shadow),    2.5px 2.5px var(--shadow),    2.25px 2.25px var(--shadow),    2px 2px var(--shadow),    1.75px 1.75px var(--shadow),    1.5px 1.5px var(--shadow),    1.25px 1.25px var(--shadow),    1px 1px var(--shadow),    0.75px 0.75px var(--shadow),    0.5px 0.5px var(--shadow),    0.25px 0.25px var(--shadow);}
.playful span:nth-child(2n) {  --text: #ED625C;  --shadow: #F2A063;}

Podemos repetir lo mismo un par de veces con otros colores e índices hasta conseguir un estampado que nos guste:

Puntos extra: agregar animación

Usando los mismos principios, podemos darle aún más vida al texto agregando animaciones. Primero, agregaremos una animación repetida que hace que cada tramo se mueva hacia arriba y hacia abajo:

.playful span {  color: #5362F6;  text-shadow: textShadow(0.25, 6, #E485F8);  position: relative;  animation: scatter 1.75s infinite;}

Podemos optimizar esto un poco más utilizando la prefers-reduced-motionconsulta de medios. De esa manera, las personas que no quieran la animación no la obtendrán.

.playful span {  color: #5362F6;  text-shadow: textShadow(0.25, 6, #E485F8);  position: relative;  animation: scatter 1.75s infinite;}@media screen and (prefers-reduced-motion: reduce) {  animation: none;}

Luego, en cada uno nth-child(n)agregaremos un retraso de animación diferente.

.playful span:nth-child(2n) {  color: #ED625C;  text-shadow: textShadow(0.25, 6, #F2A063);  animation-delay: 0.3s;}