Decoraciones de imágenes elegantes: contornos y animaciones complejas | trucos CSS

Pasamos los dos últimos artículos de esta serie de tres partes jugando con degradados para hacer decoraciones de imágenes realmente limpias usando solo <img> En esta tercera y última parte, exploraremos más técnicas usando CSS outline Esto puede sonar extraño porque generalmente usamos outline para dibujar una línea simple alrededor de un elemento - una especie de 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 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 en la parte superior de la imagen, pero eso es con lo que nos estamos desafiando. no en esta serie En su lugar, podemos buscar 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 es crear outline esto es tan grueso como la mitad del tamaño de la imagen, luego compénselo por la mitad del tamaño de la imagen con un valor negativo. ¡Agregue un poco de translucidez con el color y tenemos nuestra superposición!

El resto sucede en :hoverestamos actualizando outline y la transición entre los dos contornos crea el fresco efecto de contención. La misma técnica también se puede usar para crear un efecto de desvanecimiento donde no nos movemos outline pero que sea transparente.

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

Puede encontrar problemas para usarlo 100vmax como un gran valor en Safari. Si este es el caso, considere el truco anterior donde sustituye 100vmax a la mitad del tamaño de la imagen.

¡Podemos llevar las cosas aún más lejos! Por ejemplo, en lugar de simplemente eliminar el exceso outlinepodemos crear formas y aplicar animaciones de revelación de fantasía.

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

Oh, ¿quieres corazones en su lugar? ¡Seguro que podemos hacerlo!

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

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

Sé que la animación es un poco tonta. Esto es más una demostración para ilustrar la idea, no el "producto final" que se usará 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 bromeé contigo al final del último artículo:

Sabía usted que outline la propiedad es capaz de cosas tan grandes? ¡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 cuán flexibles y modulares son estos enfoques.

Si está viendo estas demostraciones por primera vez, puede suponer que hay un montón de divs de envoltura adicionales y pseudoelementos que se usan para lograrlos. Pero todo sucede directamente en <img> elemento. ¡Este es el único selector que necesitamos para obtener estas formas y efectos avanzados!

resumiendo

Bueno, caramba, gracias por estar conmigo en esta serie de tres partes durante las últimas semanas. Hemos analizado varias técnicas diferentes que convierten imágenes simples en algo atractivo e interactivo. ¿Utilizará todo lo que hemos cubierto? ¡Ciertamente no! Pero espero 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 lo hicimos todo con solo uno <img> ¡elemento! Sin envoltorios div adicionales ni pseudoelementos. Por supuesto, esta es una limitación autoimpuesta, pero también nos empujó a explorar CSS e intentar encontrar soluciones innovadoras para casos de uso común. Entonces, antes de agregar más marcado a su HTML, considere si CSS ya puede manejar la tarea.