Decoraciones de imágenes de lujo: contornos y animaciones complejas

Pasamos los dos últimos artículos de esta serie de tres partes jugando con degradados para hacer decoraciones de imágenes realmente ordenadas usando nada más que el elemento. En esta tercera y última pieza, vamos a explorar más técnicas usando el CSS outline propiedad. Eso puede sonar extraño porque generalmente usamos outline para dibujar una línea simple alrededor de un elemento, algo así como border pero solo puede dibujar los cuatro lados a la vez y no es parte del modelo de caja.

Sin embargo, podemos hacer más con él, y eso es con lo que quiero experimentar en este artículo.

Comencemos con nuestro primer ejemplo: una superposición que desaparece al pasar el mouse con una animación genial:

Podríamos lograr esto agregando un elemento adicional sobre la imagen, pero eso es lo que nos estamos desafiando a nosotros mismos. no hacer en esta serie. En su lugar, podemos buscar el CSS outline propiedad y aprovechamiento de que puede tener un desplazamiento negativo y puede superponerse a su elemento.

img {
  --s: 250px; /* the size of the image */
  --b: 8px;   /* the border thickness*/
  --g: 14px;  /* the gap */
  --c: #4ECDC4;

  width: var(--s);
  aspect-ratio: 1;
  outline: calc(var(--s) / 2) solid #0009;
  outline-offset: calc(var(--s) / -2);
  cursor: pointer;
  transition: 0.3s;
}
img:hover {
  outline: var(--b) solid var(--c);
  outline-offset: var(--g);
}

El truco consiste en crear un outline eso es tan grueso como la mitad del tamaño de la imagen, luego compárelo con la mitad del tamaño de la imagen con un valor negativo. ¡Agregue un poco de semitransparencia con el color y tenemos nuestra superposición!

El resto es lo que sucede en :hover. Actualizamos el outline y la transición entre ambos contornos crea el genial efecto de desplazamiento. La misma técnica también se puede usar para crear un efecto de desvanecimiento donde no movemos el outline pero que sea transparente.

En lugar de usar la mitad del tamaño de la imagen en este, estoy usando una muy grande outline valor de espesor (100vmax) mientras aplica una máscara CSS. Con esto, ya no es necesario saber el tamaño de la imagen: ¡este truco funciona en todos los tamaños!

Es posible que tenga problemas al usar 100vmax como un gran valor en Safari. Si es el caso, considere el truco anterior donde reemplaza el 100vmax con la mitad del tamaño de la imagen.

¡Podemos llevar las cosas aún más lejos! Por ejemplo, en lugar de simplemente recortar el extra outline, podemos crear formas y aplicar una animación de revelación elegante.

¿Guay, verdad? los outline es lo que crea la superposición amarilla. los clip-path recorta el extra outline para obtener la forma de estrella. Luego, al pasar el mouse, hacemos que el color sea transparente.

Oh, ¿quieres corazones en su lugar? ¡Ciertamente podemos hacer eso!

Imagina todas las combinaciones posibles que podemos crear. Todo lo que tenemos que hacer es dibujar una forma con una máscara CSS y/o clip-path y combínalo con el outline truco. ¡Una solución, infinitas posibilidades!

Y, sí, definitivamente podemos animar esto también. no olvidemos eso clip-path es animable y mask se basa en gradientes, algo que cubrimos con gran detalle en los dos primeros artículos de esta serie.

Lo sé, la animación es un poco defectuosa. Esto es más una demostración para ilustrar la idea que el "producto final" que se utilizará en un sitio de producción. Nos gustaría optimizar las cosas para una transición más natural.

Aquí hay una demostración que usa mask en cambio. Es con el que me burlé de ti al final de el ultimo articulo:

¿Sabía usted que el outline propiedad era capaz de tanta genialidad? ¡Agréguelo a su caja de herramientas para decoraciones de imágenes elegantes!

¡Combina todas las cosas!

Ahora que hemos aprendido muchos trucos usando degradados, máscaras, recortes y contornos, es hora del gran final. Terminemos esta serie combinando todo lo que hemos aprendido en las últimas semanas para mostrar no solo las técnicas, sino también demostrar cuán flexibles y modulares son estos enfoques.

Si estabas viendo estas demostraciones por primera vez, podrías suponer que hay un montón de envoltorios de divs adicionales y pseudoelementos que se utilizan para llevarlos a cabo. Pero todo está sucediendo directamente en el elemento. ¡Es el único selector que necesitamos para obtener estas formas y efectos avanzados!

Terminando

Bueno, caramba, gracias por estar conmigo en esta serie de tres partes en las últimas semanas. Exploramos una gran cantidad de técnicas diferentes que convierten imágenes simples en algo llamativo e interactivo. ¿Usarás todo lo que cubrimos? ¡Ciertamente no! Pero mi esperanza es que este haya sido un buen ejercicio para profundizar en los usos avanzados de las características de CSS, como gradientes, mask, clip-pathy outline.

Y todo lo hicimos con una sola ¡elemento! Sin envoltorios div adicionales ni pseudoelementos. Claro, es una restricción que nos imponemos a nosotros mismos, pero también nos empujó a explorar CSS e intentar encontrar soluciones innovadoras para casos de uso comunes. Entonces, antes de agregar marcas adicionales a su HTML, piense si CSS ya es capaz de manejar la tarea.