Grandes efectos de cursor CSS que usan recorte de fondo, máscaras y 3D trucos CSS

Revisamos una serie de publicaciones sobre enfoques interesantes de los efectos CSS cuando se mantiene presionado el cursor. Comenzamos con un montón de ejemplos que usan CSS background propiedades, luego vaya a text-shadow una propiedad donde técnicamente no usamos sombras. También los combinamos con variables CSS y calc() para optimizar el código y hacerlo más fácil de administrar.

En este artículo, actualizaremos estos dos artículos para crear animaciones CSS aún más complejas al mantener presionado el cursor. Hablamos de recorte de fondo, máscaras CSS e incluso mojarse los pies con perspectivas 3D. En otras palabras, esta vez exploraremos técnicas avanzadas y empujaremos los límites de lo que CSS puede hacer con los efectos de retención del cursor.

---

Esto es solo una muestra de lo que hacemos:

Usar efectos de retención del cursor background-clip

Vamos a hablar acerca de background-clipEsta propiedad CSS acepta una text valor de palabra clave que nos permite aplicar gradientes a texto de un elemento en lugar del real antecedentes.

Por ejemplo, podemos cambiar el color del texto manteniendo presionado el mouse, como lo haríamos color propiedad, pero de esta manera animamos el cambio de color:

Todo lo que hice fue agregar background-clip: text al elemento y transition en background-position¡No debería ser más complicado que eso!

Pero podemos hacerlo mejor si combinamos varios degradados con diferentes valores para recortar el fondo.

En este ejemplo utilizo dos gradientes diferentes y dos valores con background-clipEl primer degradado del fondo se corta al texto (gracias a text valor) para establecer el color mientras mantiene presionado el mouse mientras el segundo degradado de fondo crea el guión bajo (gracias a padding-box valor). Todo lo demás se copia directamente del trabajo que hicimos en el primer artículo de esta serie.

¿Qué tal un efecto de retención del cursor, en el que la barra se desliza de arriba hacia abajo de una manera que parece como si el texto hubiera sido escaneado y luego coloreado?

Esta vez cambié el tamaño del primer degradado para crear la línea. Luego lo arrastro con el otro degradado, que actualiza el color del texto para crear la ilusión. Puedes visualizar lo que está pasando en este bolígrafo:

Solo rascamos la superficie de lo que podemos hacer con los nuestros. background-clippoderes de ping! Esta técnica es probablemente algo que le gustaría evitar usar en producción, ya que se sabe que Firefox tiene muchos errores reportados asociado con background-clip. Safari también tiene problemas de mantenimiento. Esto deja solo a Chrome con soporte sólido para estas cosas, así que tal vez lo abramos mientras continuamos.

Pasemos a otro efecto de sostener el mouse usando background-clip:

Probablemente pienses que este parece súper fácil en comparación con lo que acabamos de ver, y tienes razón, no tiene nada de fantástico. Todo lo que hago es deslizar un degradado mientras aumento el tamaño de otro.

Pero estamos aquí para ver los efectos de retención del cursor extendido, ¿no es así? Cambiémoslo un poco para que la animación sea diferente cuando el cursor del mouse abandona el elemento. El mismo efecto de retención, pero un final diferente para la animación:

Genial, ¿no? Analicemos el código:

.hover {
  --c: #1095c1; /* the color */

  color: #0000;
  background: 
    linear-gradient(90deg, #fff 50%, var(--c) 0) calc(100% - var(--_p, 0%)) / 200%, 
    linear-gradient(var(--c) 0 0) 0% 100% / var(--_p, 0%) no-repeat,
    var(--_c, #0000);
  -webkit-background-clip: text, padding-box, padding-box;
          background-clip: text, padding-box, padding-box;
  transition: 0s, color .5s, background-color .5s;
}
.hover:hover {
  color: #fff;
  --_c: var(--c);
  --_p: 100%;
  transition: 0.5s, color 0s .5s, background-color 0s .5s;
}

Tenemos tres capas de fondo: dos degradados y background-color definido por la ayuda --_c variable que inicialmente se establece en transparente (#0000). Sosteniendo el mouse cambia el color a blanco y --_c variable relativa al color base (--c).

Esto es lo que está pasando transition: Primero aplicamos una transición a todo, pero posponemos color y background-color de 0.5s para crear un efecto deslizante. Inmediatamente después cambiamos color y en background-colorEs posible que no note ningún cambio visual porque el texto ya es blanco (gracias al primer degradado) y el fondo ya está configurado en el color base (gracias al segundo degradado).

Luego, cuando descargas el mouse, aplicamos un cambio inmediato a todo (nota 0s demora), con la excepción de color y background-color que tienen una transición. Esto significa que devolvemos todos los gradientes a su estado original. Nuevamente, probablemente no verá ningún cambio visual debido al texto. color y background-color ya ha cambiado al sostener el mouse.

Finalmente, aplicamos el difuminado al color y un background-color para crear la parte de animación mostrando el ratón. Sé que puede ser difícil de entender, pero puedes visualizar mejor el truco usando diferentes colores:

Mantenga presionado el cursor del mouse muchas veces y verá las propiedades que se animan al sostener el mouse y las que se animan cuando se muestra el mouse. Después puede descubrir cómo se nos ocurrieron dos animaciones diferentes para el mismo efecto de retención del mouse.

No olvidemos la técnica de cambio DRY que usamos en artículos anteriores de esta serie para ayudar a reducir la cantidad de código usando solo una variable para el cambio:

.hover {
  --c: 16 149 193; /* the color using the RGB format */

  color: rgb(255 255 255 / var(--_i, 0));
  background:
    /* Gradient #1 */
    linear-gradient(90deg, #fff 50%, rgb(var(--c)) 0) calc(100% - var(--_i, 0) * 100%) / 200%,
    /* Gradient #2 */
    linear-gradient(rgb(var(--c)) 0 0) 0% 100% / calc(var(--_i, 0) * 100%) no-repeat,
    /* Background Color */
    rgb(var(--c)/ var(--_i, 0));
  -webkit-background-clip: text, padding-box, padding-box;
          background-clip: text, padding-box, padding-box;
  --_t: calc(var(--_i,0)*.5s);
  transition: 
    var(--_t),
    color calc(.5s - var(--_t)) var(--_t),
    background-color calc(.5s - var(--_t)) var(--_t);
}
.hover:hover {
  --_i: 1;
}

Si se pregunta por qué busqué la sintaxis RGB para el color base, es porque tenía que jugar con la transparencia alfa. También uso la variable --_t para reducir el cálculo redundante utilizado en transition Propiedad.

Antes de pasar a la siguiente parte, aquí hay algunos ejemplos más de los efectos de retención del mouse que hice hace algún tiempo que se basan en background-clip. Sería demasiado largo describir cada uno de ellos, pero con lo que hemos aprendido hasta ahora, puedes entender fácilmente el código. Puede ser una buena inspiración para probar algunos de ellos por su cuenta sin mirar el código.

Sé que sé. Estos son efectos de retención de cursor locos e inusuales, y me doy cuenta de que son demasiados en la mayoría de las situaciones. Pero así es como practicar y aprender CSS. Recuerda que nosotros empujando los límites de los efectos de retención del cursor CSS. El efecto de retención del cursor puede ser nuevo, pero estamos aprendiendo nuevas técnicas en el camino que ciertamente se pueden usar para otras cosas.

Efectos de retención del cursor usando CSS mask

¿Adivina qué? CSS mask la propiedad usa gradientes de la misma manera que background property sí, así que verá que lo que haremos a continuación es bastante simple.

Comencemos por construir un punto culminante fantástico.

yo suelo background para crear un límite inferior en zigzag en esta demostración. Si quisiera aplicar animación a este resaltado, sería molesto hacerlo solo con la ayuda de las propiedades del fondo.

Ingrese CSS mask.

El código puede parecer extraño, pero la lógica sigue siendo la misma que hicimos con todas las animaciones de fondo anteriores. mask consta de dos gradientes. El primer degradado está definido por un color opaco que cubre el área de contenido (gracias a content-box valor). Este primer degradado hace visible el texto y oculta el borde inferior en zigzag. content-box es mask-clip un valor que se comporta de la misma manera que background-clip

linear-gradient(#000 0 0) content-box

El segundo gradiente cubrirá toda el área (gracias a padding-box). Esto tiene un ancho que se define usando --_p variable y se colocará en el lado izquierdo del elemento.

linear-gradient(#000 0 0) 0 / var(--_p, 0%) padding-box

Ahora todo lo que tenemos que hacer es cambiar el valor de --_p mientras mantiene presionado el cursor para crear un efecto de deslizamiento para el segundo degradado y revelar el resaltado.

.hover:hover {
  --_p: 100%;
  color: var(--c);
}

La siguiente demostración utiliza capas de máscara como fondos para ver mejor el truco que se está realizando. Imagina que las partes verde y roja son las partes visibles del elemento, mientras que todo lo demás es transparente. Esto hará la máscara si usamos los mismos gradientes con ella.

Con este truco, podemos crear fácilmente muchas variaciones simplemente usando una configuración de degradado diferente con mask Propiedad:

Cada ejemplo en esta demostración usa una configuración de gradiente ligeramente diferente para maskTenga en cuenta también la separación en el código entre la configuración de fondo y la configuración de la máscara.Se pueden administrar y mantener de forma independiente.

Cambiemos la configuración de fondo, reemplazando el subrayado en zigzag con un subrayado ondulado en su lugar:

¡Otra colección de efectos de retención del cursor! Guardé todas las configuraciones de la máscara y cambié el fondo para crear una forma diferente. Ahora puedes descubrir cómo lo logré. para llegar a 400 efectos de retención sin pseudoelementos, ¡y aún podemos tener más!

Como, por qué no algo como esto:

Aquí hay un desafío para ti: El límite en la última demostración es un gradiente usando mask propiedad para revelarlo. ¿Puedes entender la lógica detrás de la animación? Puede parecer complicado a primera vista, pero es muy similar a la lógica que observamos para la mayoría de los otros efectos que dependen de gradientes. ¡Publica tu explicación en los comentarios!

Efectos al sostener el cursor en 3D

Puedes pensar que es imposible crear un efecto 3D con un solo elemento (¡y sin recurrir a pseudo-elementos!), pero CSS tiene una manera de hacerlo.

Lo que ves no es un efecto 3D real, sino una ilusión perfecta de 3D en un espacio 2D que combina CSS background, clip-pathy transform Propiedades.

Lo primero que hacemos es definir nuestras variables:

--c: #1095c1; /* color */
--b: .1em; /* border length */
--d: 20px; /* cube depth */

Luego creamos un borde transparente con anchos que usan las variables anteriores:

--_s: calc(var(--d) + var(--b));
color: var(--c);
border: solid #0000; /* fourth value sets the color's alpha */
border-width: var(--b) var(--b) var(--_s) var(--_s);

Los lados superior y derecho del elemento deben ser iguales a --b valor, mientras que los lados inferior e izquierdo deben ser iguales a la suma de --b y --d (Quién es --_s variable).

Para la segunda parte del truco, necesitamos definir un degradado que cubra todas las áreas límite que definimos antes. conic-gradient funcionará para esto:

background: conic-gradient(
  at left var(--_s) bottom var(--_s),
  #0000 90deg,var(--c) 0
 ) 
 0 100% / calc(100% - var(--b)) calc(100% - var(--b)) border-box;

Agregamos otro degradado para la tercera parte del truco. Este usará dos valores de colores blancos translúcidos que se superponen con el primer degradado anterior para crear diferentes tonos del color base, dándonos la ilusión de sombreado y profundidad.

conic-gradient(
  at left var(--d) bottom var(--d),
  #0000 90deg,
  rgb(255 255 255 / 0.3) 0 225deg,
  rgb(255 255 255 / 0.6) 0
) border-box

El último paso es aplicar CSS clip-path para recortar las esquinas para esta sensación de sombra larga:

clip-path: polygon(
  0% var(--d), 
  var(--d) 0%, 
  100% 0%, 
  100% calc(100% - var(--d)), 
  calc(100% - var(--d)) 100%, 
  0% 100%
)

¡Eso es todo! Acabamos de hacer un rectángulo 3D con nada más que dos degradados y un clip-path que podemos ajustar fácilmente usando variables CSS. ¡Ahora todo lo que tenemos que hacer es animarlo!

Tenga en cuenta las coordenadas de la figura anterior (que se muestran en rojo). Vamos a actualizarlos para crear la animación:

clip-path: polygon(
  0% var(--d), /* reverses var(--d) 0% */
  var(--d) 0%, 
  100% 0%, 
  100% calc(100% - var(--d)), 
  calc(100% - var(--d)) 100%, /* reverses 100% calc(100% - var(--d)) */ 
  0% 100% /* reverses var(--d) calc(100% - var(--d)) */
)

El truco consiste en ocultar la parte inferior e izquierda del elemento para que todo lo que quede sea un elemento rectangular sin profundidad.

Este bolígrafo aísla clip-path parte de la animación para ver lo que hace:

El toque final es mover el elemento en la dirección opuesta usando translate - ¡y la ilusión es perfecta! Aquí está el efecto usando diferentes valores de propiedades personalizadas para diferentes profundidades:

El segundo efecto de retención del cursor sigue la misma estructura. Todo lo que hice fue actualizar algunos valores para crear un movimiento de arriba a la izquierda en lugar de uno de arriba a la derecha.

¡Combinando efectos!

Lo mejor de todo lo que hemos cubierto es que todos se complementan entre sí. Aquí hay un ejemplo donde agrego text-shadow efecto del segundo artículo de la serie para background técnica de animación del primer artículo mientras usamos el truco 3D que acabamos de revisar:

El código real puede ser confuso al principio, pero continúe y analícelo un poco más: notará que es solo una combinación de estos tres efectos diferentes, en gran parte mezclados.

Permítanme terminar este artículo con el último efecto de retención del mouse, donde combino el fondo, la ruta del clip y el guión desde perspective para simular otro efecto 3D:

Apliqué el mismo efecto a las imágenes y el resultado fue bastante bueno para simular 3D con un elemento:

¿Quiere echar un vistazo más de cerca a cómo funciona la última demostración? Escribí algo sobre él.

resumiendo

¡Uf, hemos terminado! Sé que CSS es muy complejo, pero (1) estamos en el sitio web adecuado para tales cosas y (2) el objetivo es aumentar nuestra comprensión de las diferentes propiedades de CSS a nuevos niveles al permitirles interactuar entre sí.

Es posible que se pregunte cuál es el próximo paso cuando finalicemos esta pequeña serie de efectos de retención de CSS avanzados. Diría que el siguiente paso es tomar todo lo que hemos aprendido y aplicarlo a otros elementos, como botones, elementos de menú, enlaces, etc. Mantuvimos las cosas bastante simples, siempre y cuando limitáramos nuestros trucos a un elemento de título por esa misma razón; el elemento real no importa. ¡Obtenga los conceptos y comience con ellos para crear, experimentar y aprender cosas nuevas!