Decoraciones de imágenes de fantasía: contornos complejos y animaciones | consejos CSS

Decoraciones de imágenes de fantasía: contornos complejos y animaciones |  consejos CSS

 

Hemos dedicado los últimos dos artículos de esta serie de tres partes a jugar con los degradados para crear algunas decoraciones de imágenes realmente pulcras usando solo el <img> elemento. En este tercer y último artículo, exploraremos más técnicas usando CSS. outline propiedad. Puede parecer extraño porque solemos usar outline para dibujar una línea simple alrededor de un elemento, al igual que 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.

 

Serie de decoraciones de imágenes de lujo

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 extra en la imagen, pero eso es lo que nos desafiamos a nosotros mismos. no hacer en esta serie. En su lugar, podemos llegar al 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 un outline que 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 color y tenemos nuestra superposición!

Diagrama que muestra el tamaño del contorno alrededor de la imagen y cómo cubre la imagen al pasar el mouse sobre ella.

el resto es lo que pasa :hover. Actualizamos el outline y la transición entre los dos contornos crea el genial efecto de desplazamiento. La misma técnica también se puede utilizar para crear un efecto de fundido en el que no movemos el outline pero que sea transparente.

En lugar de usar la mitad del tamaño de la imagen en este, uso 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!

Diagrama que muestra cómo al agregar una máscara se recorta el contorno adicional alrededor de la imagen.

Puede encontrar problemas al usar 100vmax como un gran valor en Safari. Si es así, considere el consejo anterior donde reemplaza el 100vmax con la mitad del tamaño de la imagen.

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

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

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

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 redondo. ¡Una solución, infinitas posibilidades!

Y, sí, ciertamente podemos animar eso también. no olvidemos eso clip-path es animado y mask se basa en gradientes, algo que cubrimos en detalle en los primeros dos 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 Al lugar. Este es el que te provoqué al final del último artículo:

¿Sabías que el outline la propiedad era capaz de tantas grandes cosas? ¡Agrégalo a tu caja de herramientas para decoraciones de imágenes caprichosas!

¡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 no solo presentar las técnicas, sino también demostrar cuán flexibles y modulares son estos enfoques.

Si estaba viendo estas demostraciones por primera vez, podría suponer que hay un montón de envoltorios div adicionales y pseudoelementos que se utilizan para extraerlos. Pero todo sucede directamente en el <img> elemento. ¡Es el único selector que necesitamos para obtener esas formas y efectos avanzados!

Envolver

Bueno, maldita sea, gracias por estar conmigo en esta serie de tres partes durante las últimas semanas. Exploramos una multitud de técnicas diferentes que convierten imágenes simples en algo llamativo e interactivo. ¿Usarás todo lo que hemos cubierto? ¡Ciertamente no! Pero espero que este haya sido un buen ejercicio para profundizar en los usos avanzados de las funciones de CSS, como gradientes, mask, clip-pathy outline.

Y lo hicimos todo con uno <img> ¡elemento! Sin envoltorios div adicionales ni pseudoelementos. Claro, es una restricción autoimpuesta, 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 código HTML, pregúntese si CSS ya es capaz de manejar la tarea.

Si quieres conocer otros artículos parecidos a Decoraciones de imágenes de fantasía: contornos complejos y animaciones | consejos CSS puedes visitar la categoría Estilo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas