Geniales efectos CSS Hover que usan recorte de fondo, máscaras y 3D

Hemos revisado una serie de publicaciones ahora sobre enfoques interesantes para los efectos de desplazamiento de CSS. Empezamos con un montón de ejemplos que usan CSS background propiedades, luego pasó a la text-shadow propiedad donde técnicamente no usamos ninguna sombra. También los combinamos con variables CSS y calc() para optimizar el código y hacerlo fácil de administrar.

En este artículo, construiremos a partir de esos dos artículos para crear animaciones de desplazamiento CSS aún más complejas. Estamos hablando de recorte de fondo, máscaras CSS e incluso mojarnos los pies con perspectivas 3D. En otras palabras, ¡esta vez vamos a explorar técnicas avanzadas y superar los límites de lo que CSS puede hacer con los efectos de desplazamiento!

---

Esto es solo una muestra de lo que estamos haciendo:

Efectos de desplazamiento usando background-clip

Vamos a hablar de background-clip. Esta propiedad CSS acepta una text valor de la palabra clave que nos permite aplicar gradientes a la texto de un elemento en lugar del real fondo.

Entonces, por ejemplo, podemos cambiar el color del texto al pasar el mouse como lo haríamos usando el color propiedad, pero de esta manera animamos el cambio de color:

Todo lo que hice fue agregar background-clip: text al elemento y transition las background-position. ¡No tiene que ser más complicado que eso!

Pero podemos hacerlo mejor si combinamos múltiples degradados con diferentes valores de recorte de fondo.

En ese ejemplo, uso dos gradientes diferentes y dos valores con background-clip. El primer degradado de fondo se recorta en el texto (gracias a la text valor) para establecer el color al pasar el mouse, mientras que el segundo degradado de fondo crea el subrayado inferior (gracias al padding-box valor). Todo lo demás está directamente copiado de el trabajo que hicimos en el primer artículo de esta serie

¿Qué tal un efecto de desplazamiento donde la barra se desliza de arriba a abajo de una manera que parece que el texto se escanea y luego se colorea?

Esta vez cambié el tamaño del primer degradado para crear la línea. ¡Luego lo deslizo 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 hemos arañado la superficie de lo que podemos hacer con nuestro background-clippoderes de ping! Sin embargo, es probable que desee evitar usar esta técnica en producción, ya que se sabe que Firefox tiene un muchos errores reportados relacionado con background-clip. Safari también tiene problemas de soporte. Eso deja solo a Chrome con un soporte sólido para estas cosas, así que tal vez lo tenga abierto mientras continuamos.

Pasemos a otro efecto de desplazamiento usando background-clip:

Probablemente estés pensando que este parece súper fácil en comparación con lo que acabamos de cubrir, y tienes razón, no hay nada lujoso aquí. Todo lo que estoy haciendo es deslizar un degradado mientras aumento el tamaño de otro.

Pero estamos aquí para ver los efectos de desplazamiento avanzados, ¿verdad? Cambiémoslo un poco para que la animación sea diferente cuando el cursor del mouse abandona el elemento. Mismo efecto de desplazamiento, pero un final diferente para la animación:

¿Guay, verdad? vamos a diseccionar 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 el background-color definido usando --_c variable que inicialmente se establece en transparente (#0000). Al pasar el mouse, cambiamos el color a blanco y el --_c variable al color principal (--c).

Esto es lo que está sucediendo en eso transition: Primero, aplicamos una transición a todo pero retrasamos la color y background-color by 0.5s para crear el efecto deslizante. Inmediatamente después de eso, cambiamos el color y del background-color. Es posible que no note cambios visuales porque el texto ya es blanco (gracias al primer degradado) y el fondo ya está configurado en el color principal (gracias al segundo degradado).

Luego, al sacar el mouse, aplicamos un cambio instantáneo a todo (observe el 0s demora), a excepción de la color y background-color que tienen una transición. Esto significa que volvemos a poner todos los gradientes en sus estados iniciales. Nuevamente, probablemente no verá cambios visuales porque el texto color y background-color ya ha cambiado al pasar el mouse por encima.

Por último, aplicamos el difuminado al color y un background-color para crear la parte de la animación con el ratón fuera. Lo sé, puede ser difícil de entender, pero puedes visualizar mejor el truco usando diferentes colores:

Pase el cursor sobre lo anterior muchas veces y verá las propiedades que se animan al pasar el mouse y las que se animan al alejar el mouse. Entonces puede comprender cómo llegamos a dos animaciones diferentes para el mismo efecto de desplazamiento.

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

.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 principal, es porque necesitaba jugar con la transparencia alfa. También estoy usando la variable --_t para reducir un cálculo redundante utilizado en el transition propiedad.

Antes de pasar a la siguiente parte, aquí hay más ejemplos de efectos de desplazamiento que hice hace un tiempo que se basan en background-clip. Sería demasiado largo detallar cada uno, pero con lo que hemos aprendido hasta ahora puedes entender fácilmente el código. Puede ser una buena inspiración probar algunos de ellos solos sin mirar el código.

Sé que sé. Estos son efectos de desplazamiento locos y poco comunes y me doy cuenta de que son demasiado en la mayoría de las situaciones. Pero así es como practicar y aprender CSS. Recuerda, nosotros empujando los limites de efectos de desplazamiento de CSS. El efecto de desplazamiento puede ser una novedad, pero estamos aprendiendo nuevas técnicas en el camino que sin duda se pueden usar para otras cosas.

Efectos de desplazamiento usando CSS mask

¿Adivina qué? el css mask propiedad usa gradientes de la misma manera que background property sí lo hace, por lo que verá que lo que haremos a continuación es bastante sencillo.

Comencemos por construir un subrayado elegante.

Estoy usando background para crear un borde inferior en zig-zag en esa demostración. Si quisiera aplicar una animación a ese subrayado, sería tedioso hacerlo usando solo 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. los mask se compone de dos gradientes. El primer degradado se define con un color opaco que cubre el área de contenido (gracias a la content-box valor). Ese primer degradado hace que el texto sea visible y oculta el borde inferior en zig-zag. content-box son los mask-clip valor que se comporta igual que background-clip

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

El segundo gradiente cubrirá toda el área (gracias a padding-box). Este tiene un ancho que se define usando el --_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 al pasar el mouse para crear un efecto de deslizamiento para el segundo degradado y revelar el subrayado.

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

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

Con este truco, podemos crear fácilmente mucha variación simplemente usando una configuración de degradado diferente con el mask propiedad:

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

Cambiemos la configuración de fondo reemplazando el subrayado en zig-zag con un subrayado ondulado en su lugar:

¡Otra colección de efectos flotantes! Mantuve todas las configuraciones de la máscara y cambié el fondo para crear una forma diferente. Ahora, puedes entender cómo pude para llegar a 400 efectos de desplazamiento sin pseudoelementos, ¡y aún podemos tener más!

Como, por qué no algo como esto:

Aquí hay un desafío para ti: El borde en esa última demostración es un degradado usando el mask propiedad para revelarlo. ¿Puedes descifrar la lógica detrás de la animación? Puede parecer complejo a primera vista, pero es muy similar a la lógica que hemos visto para la mayoría de los otros efectos de desplazamiento que se basan en gradientes. ¡Publica tu explicación en los comentarios!

Efectos de desplazamiento en 3D

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

Lo que ves allí no es un efecto 3D real, sino una ilusión perfecta de 3D en el espacio 2D que combina el 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 al --b mientras que los lados inferior e izquierdo deben ser iguales a la suma de --b y --d (Cuál es el --_s variable).

Para la segunda parte del truco, necesitamos definir un degradado que cubra todas las áreas de borde que definimos previamente. A conic-gradient funcionará para eso:

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 color blanco semitransparentes que se superponen al primer degradado anterior para crear diferentes tonos del color principal, 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 un CO clip-path para cortar las esquinas para esa 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!

Observe las coordenadas de la figura anterior (indicadas en rojo). Actualicémoslos 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 las partes inferior e izquierda del elemento para que todo lo que quede sea un elemento rectangular sin profundidad alguna.

Esta pluma aísla el clip-path parte de la animación para ver lo que está haciendo:

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 desplazamiento sigue la misma estructura. Todo lo que hice fue actualizar algunos valores para crear un movimiento superior izquierdo en lugar de uno superior derecho.

¡Combinando efectos!

Lo increíble de todo lo que hemos cubierto es que todos se complementan entre sí. Aquí hay un ejemplo donde estoy agregando las text-shadow efectos del artículo segundo en la serie a la background técnica de animación del primer artículo mientras usamos el truco 3D que acabamos de cubrir:

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

Permítanme terminar este artículo con un último efecto de desplazamiento en el que combino fondo, clip-path y una pizca de 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 solo elemento:

¿Quiere ver más de cerca cómo funciona la última demostración? Escribí algo sobre eso.

Terminando

¡Uf, hemos terminado! Lo sé, es mucho CSS complicado, pero (1) estamos en el sitio web adecuado para ese tipo de cosas, y (2) el objetivo es impulsar nuestra comprensión de las diferentes propiedades de CSS a nuevos niveles permitiéndoles interactuar con unos y otros.

Es posible que se pregunte cuál es el siguiente paso a partir de aquí ahora que estamos cerrando esta pequeña serie de efectos de desplazamiento CSS avanzados. Diría que el siguiente paso es tomar todo lo que aprendimos y aplicarlo a otros elementos, como botones, elementos de menú, enlaces, etc. Mantuvimos las cosas bastante simples en cuanto a limitar nuestros trucos a un elemento de encabezado por esa misma razón. ; el elemento real no importa. ¡Toma los conceptos y ejecútalos para crear, experimentar y aprender cosas nuevas!

---

Geniales efectos CSS Hover que usan recorte de fondo, máscaras y 3D publicado originalmente el Trucos CSS. Debieras obtener el boletín.

• Coinsmart. El mejor intercambio de Bitcoin y criptografía de Europa.
• Platoblockchain. Inteligencia del Metaverso Web3. Conocimiento amplificado. ACCESO LIBRE.
• CriptoHawk. Radar de altcoins. Prueba gratis.
• Fuente: https://css-tricks.com/css-hover-effects-background-masks-3d/