4 grandes efectos de retención que utilizan la sombra de texto CSS trucos CSS

En mi último artículo vimos cómo CSS background las propiedades nos permiten crear grandes efectos de retención. Esta vez nos centraremos en CSS text-shadow propiedad para explorar cursos aún más interesantes. Probablemente se esté preguntando cómo agregar una sombra al texto puede darnos un gran efecto, pero aquí está el problema: en realidad no proyectaremos ninguna sombra en estos efectos mientras mantenemos presionado el cursor de texto.

text-shadow pero no hay sombras de texto?

Permítanme aclarar la confusión mostrando los efectos de retención que construiremos en la siguiente demostración:

Sin mirar el código, muchos de ustedes pensarán intuitivamente que para cada efecto de retención del cursor, duplicamos el texto y luego lo animamos de forma independiente. Ahora, si revisa el código, verá que nada del texto está realmente duplicado en HTML. ¿Y notó que no sirve de nada? content: "text" en CSS?

Las capas de texto están hechas enteramente con text-shadow!!

Efecto de retención del cursor №1

Dividimos CSS:

.hover-1 {
  line-height: 1.2em;
  color: #0000;
  text-shadow: 
    0 0 #000, 
    0 1.2em #1095c1;
  overflow: hidden;
  transition: .3s;
}
.hover-1:hover {
  text-shadow: 
    0 -1.2em #000, 
    0 0 #1095c1;
}

Lo primero que debe notar es que hago transparente el color del texto real (usando #0000) para ocultarlo. entonces uso text-shadow para crear dos sombras donde defino solo dos valores de longitud para cada una. Esto significa que no hay un radio de desenfoque, lo que crea una sombra nítida y clara que crea efectivamente una copia del texto con el color especificado.

Por eso pude afirmar en la introducción que aquí no hay sombras. Lo que hacemos es menos un tono "clásico" que una forma simple de duplicar texto.

Tenemos dos capas de texto que movemos cuando mantenemos el cursor. Si ocultamos el desbordamiento, entonces el texto duplicado está fuera de la vista y el movimiento hace que parezca que el texto real está siendo reemplazado por otro texto. Este es el truco principal que hace que todos los ejemplos de este artículo funcionen.

Optimicemos nuestro código. yo uso el valor 1.2em mucho para definir la altura y el desplazamiento de las sombras, lo que lo convierte en un candidato ideal para una propiedad CSS personalizada (que llamamos --h):

.hover-1 {
  --h: 1.2em;

  line-height: var(--h);
  color: #0000;
  text-shadow: 
    0 0 #000, 
    0 var(--h) #1095c1;
  overflow: hidden;
  transition: .3s;
}
.hover-1:hover {
  text-shadow: 
    0 calc(-1 * var(--h)) #000, 
    0 0 #1095c1;
}

Todavía podemos ir más allá e implementar más calc()-Ulación para racionalizar las cosas al lugar donde usamos solo text-shadow una vez. (Hicimos lo mismo en el artículo anterior).

.hover-1 {
  --h: 1.2em;   

  line-height: var(--h);
  color: #0000;
  text-shadow: 
    0 calc(-1*var(--_t, 0em)) #000, 
    0 calc(var(--h) - var(--_t, 0em)) #1095c1;
  overflow: hidden;
  transition: .3s;
}
.hover-1:hover {
  --_t: var(--h);
}

En caso de que se esté preguntando por qué estoy agregando un guión bajo a --_t variable, es solo una convención de nomenclatura que uso para diferenciar las variables que usamos para controlar el efecto que el usuario puede actualizar (como --h) y variables internas que se utilizan solo con fines de optimización y que no es necesario modificar (p. --_t En otras palabras, el guión bajo es parte del nombre de la variable y no tiene un significado especial.

También podemos actualizar el código para obtener el efecto contrario, con el texto duplicado deslizándose desde la parte superior:

Todo lo que hicimos fue una pequeña actualización de text-shadow propiedad - ¡no hemos tocado nada más!

Efecto de retención del cursor №2

Para ello animaremos dos propiedades: text-shadow y backgroundEn lo que respecta a text-shadowTodavía tenemos dos capas como el ejemplo anterior, pero esta vez moveremos solo una de ellas, haciendo que el color de la otra sea transparente durante el intercambio.

.hover-2 {
  /* the height */
  --h: 1.2em;

  line-height: var(--h);
  color: #0000;
  text-shadow: 
    0 var(--_t, var(--h)) #fff,
    0 0 var(--_c, #000);
  transition: 0.3s;
}
.hover-2:hover {
  --_t: 0;
  --_c: #0000;
}

Cuando mantenga presionado el cursor, mueva la capa de texto blanco hacia la parte superior, cambiando el color del otro a transparente. A esto le sumamos background-size animación adjunta a un degradado:

Finalmente, agregamos overflow: hidden para mantener la animación visible solo dentro del elemento:

.hover-2 {
  /* the height */
  --h: 1.2em;

  line-height: var(--h);
  color: #0000;
  text-shadow: 
    0 var(--_t,var(--h)) #fff,
    0 0 var(--_c, #000);
  background: 
    linear-gradient(#1095c1 0 0) 
    bottom/100% var(--_d, 0) no-repeat;
  overflow: hidden;
  transition: 0.3s;
}
.hover-2:hover {
  --_d: 100%;
  --_t: 0;
  --_c: #0000;
}

Lo que hemos hecho aquí es combinar CSS text-shadow y background Propiedades para crear un gran efecto de retención de ratón. También logramos usar variables CSS para optimizar el código.

Si background su sintaxis se ve rara, recomiendo leer mi artículo anterior. El siguiente efecto de retención del cursor también se basa en la animación que describí en detalle en este artículo. A menos que esté satisfecho con CSS background fraude, le sugiero que lea este artículo antes de continuar para obtener más contexto.

En el artículo anterior, nos mostró cómo usar solo una variable para crear un efecto de retención del cursor. ¿Es posible hacer esto aquí?

¡Si, absolutamente! De hecho, podemos usar la misma técnica de cambio DRY para que solo trabajemos con una propiedad CSS personalizada que simplemente cambia los valores de retención del cursor:

.hover-2 {
  /* the height */
  --h: 1.2em;

  line-height: var(--h);
  color: #0000;
  text-shadow: 
    0 var(--_i, var(--h)) #fff,
    0 0 rgb(0 0 0 / calc(var(--_i, 1) * 100%) );
  background: 
    linear-gradient(#1095c1 0 0) 
    bottom/100% calc(100% - var(--_i, 1) * 100%) no-repeat;
  overflow: hidden;
  transition: 0.3s;
}
.hover-2:hover {
  --_i: 0;
}

Efecto de retención del cursor №3

Este efecto de retención del mouse no es más que una combinación de dos efectos que ya hemos hecho: el segundo efecto de retención el mouse del artículo anterior y el primer cursor tienen efecto en este artículo.

.hover-3 {
  /* the color  */
  --c: #1095c1;
  /* the height */
  --h: 1.2em;

  /* The first hover effect in this article */
  line-height: var(--h);  
  color: #0000;
  overflow: hidden;
  text-shadow: 
    0 calc(-1 * var(--_t, 0em)) var(--c), 
    0 calc(var(--h) - var(--_t, 0em)) #fff;
  /* The second hover effect from the previous article */
  background: 
    linear-gradient(var(--c) 0 0) no-repeat 
    calc(200% - var(--_p, 0%)) 100% / 200% var(--_p, .08em);
  transition: .3s var(--_s, 0s), background-position .3s calc(.3s - var(--_s, 0s));
}
.hover-3:hover {
  --_t: var(--h);
  --_p: 100%;
  --_s: .3s
}

Todo lo que hice fue copiar y pegar los efectos de estos otros ejemplos y hacer ajustes menores a los nombres de las variables. ¡Crean un efecto de retención de cursor limpio cuando se combinan! A primera vista, tal efecto puede parecer complicado y difícil, pero al final, estos son solo dos efectos relativamente fáciles convertidos en uno.

La optimización del código con la técnica de cambio de variable DRY también debería ser una tarea fácil, dadas las optimizaciones anteriores que ya hemos realizado:

.hover-3 {
  /* the color  */
  --c: #1095c1;
  /* the height */
  --h: 1.2em;

  line-height: var(--h);  
  color: #0000;
  overflow: hidden;
  text-shadow: 
    0 calc(-1 * var(--h) * var(--_i, 0)) var(--c), 
    0 calc(var(--h) * (1 - var(--_i, 0))) #fff;
  background: 
    linear-gradient(var(--c) 0 0) no-repeat
    calc(200% - var(--_i, 0) * 100%) 100% / 200% calc(100% * var(--_i, 0) + .08em);
  transition: .3s calc(var(--_i, 0) * .3s), background-position .3s calc(.3s - calc(var(--_i, 0) * .3s));
}
.hover-3:hover {
  --_i: 1;
}

Efecto de retención del cursor № 4

Este efecto de retención es una mejora sobre este último. Primero, introduzcamos un clip-path animación para revelar una de las capas de texto antes de mover:

Aquí hay otra ilustración para entender mejor lo que está pasando:

Inicialmente usamos inset(0 0 0 0) que es similar a overflow: hidden en que todo lo que vemos es el texto real. Mantener presionado el cursor del mouse actualiza el tercer valor (que representa el desplazamiento inferior), utilizando un valor negativo igual a la altura para revelar la capa de texto ubicada en la parte inferior.

A partir de ahí, podemos agregar esto al segundo efecto de retención que hicimos en este artículo, y esto es lo que obtenemos:

¡Nos acercamos! Tenga en cuenta que tenemos que empezar primero clip-path animación y luego todo lo demás. Por esta razón, podemos agregar un retraso a todo de las propiedades de retención del ratón, con la excepción de clip-path:

transition: 0.4s 0.4s, clip-path 0.4s;

Y cuando sales del mouse, hacemos lo contrario:

transition: 0.4s, clip-path 0.4s 0.4s;

El toque final es añadir un box-shadow para crear el efecto deslizante del rectángulo azul. Desafortunadamente, background no puede producir el efecto porque los fondos se recortan al área de contenido predeterminada. Mientras tanto, box-shadow puede ir más allá del área de contenido.

.hover-4 {
  /* the color  */
  --c: #1095c1;
  /* the height */
  --h: 1.2em;
  
  line-height: var(--h);
  color: #0000;
  text-shadow: 
    0 var(--_t, var(--h)) #fff,
    0 0 var(--_c, #000);
  box-shadow: 0 var(--_t, var(--h)) var(--c);
  clip-path: inset(0 0 0 0);
  background: linear-gradient(var(--c) 0 0) 0 var(--_t, var(--h)) no-repeat;
  transition: 0.4s, clip-path 0.4s 0.4s;
}
.hover-4:hover {
  --_t: 0;
  --_c: #0000;
  clip-path: inset(0 0 calc(-1 * var(--h)) 0);
  transition: 0.4s 0.4s, clip-path 0.4s;
}

Si miras de cerca box-shadowverás que tiene los mismos valores que la capa de texto blanco dentro text-shadow. Esto es lógico, ya que ambos deben moverse de la misma manera. Ambos se deslizarán hacia la parte superior. Entonces box-shadow va detrás del artículo mientras text-shadow se enrolla encima.

Aquí hay una demostración con algunos valores modificados para visualizar cómo se mueven las capas:

¡Espera, la sintaxis de fondo es un poco diferente de la utilizada en el segundo efecto de retención!

¡Buena atrapada! Sí, usamos una técnica diferente con background que produce el mismo efecto. En lugar de animar el tamaño de 0% para 100%nosotros animamos position.

Si no especificamos un tamaño en nuestro degradado, entonces ocupa todo el ancho y alto por defecto. Como conocemos la altura de nuestro elemento (--h) podemos crear un efecto de arrastre actualizando la posición desde 0 var(--h) para 0 0.

.hover-4 {
  /* ... */
  background: linear-gradient(var(--c) 0 0) 0 var(--_t, var(--h)) no-repeat;
}
.hover-4:hover {
  --_t: 0;
}

Podríamos usar background-size animación para obtener el mismo efecto, ¡pero acabamos de agregar otro truco a nuestra lista!

También lo usaste en las demostraciones. inset(0 0 1px 0)… ¿Por qué?

A veces agrego o elimino algunos píxeles o porcentajes aquí y allá para refinar cualquier cosa que se vea mal. En este caso, apareció una línea incorrecta en la parte inferior y agregó 1px lo eliminó

¿Qué hay de optimizar la variable de cambio SECO?

¡Te dejo esta tarea a ti! Después de estos cuatro efectos de retención del cursor y el artículo anterior, debería poder actualizar el código para usar solo una variable. ¡Estaré encantado de verlo en los comentarios!

¡Tu turno!

Permítanme compartir un último efecto de retención, que es otra versión del anterior. ¿Puedes averiguar cómo hacerlo sin mirar el código? Este es un buen ejercicio, ¡así que no hagas trampa!

resumiendo

Hemos visto un montón de ejemplos que muestran cómo un elemento y unas pocas líneas de CSS son suficientes para crear algunos efectos de cursor de mouse de aspecto bastante complicado en elementos de texto, ¡no se necesitan pseudoelementos! Incluso logramos combinar técnicas para lograr animaciones aún más complejas con poco esfuerzo.

Si estás interesado ve más allá de los cuatro text-shadow mantenga presionado el cursor del mouse en este artículo, vea mi colección de 500 efectos de retención donde exploro todo tipo de técnicas diferentes.