Décorations d'images fantaisie : contours et animations complexes

Nous avons passé les deux derniers articles de cette série en trois parties à jouer avec les dégradés pour créer des décorations d'images vraiment soignées en utilisant uniquement le élément. Dans ce troisième et dernier article, nous allons explorer davantage de techniques utilisant le CSS outline propriété. Cela peut paraître étrange car nous utilisons généralement outline tracer une ligne simple autour d'un élément - un peu comme border mais il ne peut dessiner que les quatre côtés à la fois et ne fait pas partie du modèle de boîte.

Cependant, nous pouvons faire plus avec cela, et c’est ce que je souhaite expérimenter dans cet article.

Commençons par notre premier exemple : une superposition qui disparaît au survol avec une animation sympa :

Nous pourrions y parvenir en ajoutant un élément supplémentaire sur l’image, mais c’est ce que nous nous mettons au défi. ne sauraient faire dans cette série. Au lieu de cela, nous pouvons utiliser le CSS outline propriété et effet de levier selon lesquels il peut avoir un décalage négatif et est capable de chevaucher son élément.

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);
}

L'astuce consiste à créer un outline c'est aussi épais que la moitié de la taille de l'image, puis décalez-la de la moitié de la taille de l'image avec une valeur négative. Ajoutez un peu de semi-transparence avec la couleur et nous avons notre superposition !

Le reste, c'est ce qui se passe :hover. Nous mettons à jour le outline et la transition entre les deux contours crée un effet de survol cool. La même technique peut également être utilisée pour créer un effet de fondu sans déplacer le curseur. outline mais rendez-le transparent.

Au lieu d'utiliser la moitié de la taille de l'image dans celle-ci, j'utilise un très grand outline valeur d'épaisseur (100vmax) tout en appliquant un masque CSS. Avec cela, il n’est plus nécessaire de connaître la taille de l’image : cette astuce fonctionne dans toutes les tailles !

Vous pouvez rencontrer des problèmes en utilisant 100vmax comme une grande valeur dans Safari. Si c’est le cas, pensez à l’astuce précédente où vous remplacez le 100vmax avec la moitié de la taille de l'image.

On peut aller encore plus loin ! Par exemple, au lieu de simplement couper le surplus outline, nous pouvons créer des formes et appliquer une animation de révélation sophistiquée.

Cool, non ? Le outline est ce qui crée la superposition jaune. Le clip-path clipse le surplus outline pour obtenir la forme d'une étoile. Ensuite, au survol, nous rendons la couleur transparente.

Oh, tu veux plutôt des cœurs ? Nous pouvons certainement le faire !

Imaginez toutes les combinaisons possibles que nous pouvons créer. Il suffit de dessiner une forme avec un masque CSS et/ou clip-path et combinez-le avec le outline astuce. Une solution, des possibilités infinies !

Et oui, nous pouvons certainement animer cela aussi. N'oublions pas ça clip-path est animable et mask repose sur les dégradés – quelque chose que nous avons abordé de manière très détaillée dans les deux premiers articles de cette série.

Je sais, l'animation est un peu problématique. Il s'agit davantage d'une démo pour illustrer l'idée que du « produit final » à utiliser dans un site de production. Nous voudrions optimiser les choses pour une transition plus naturelle.

Voici une démo qui utilise mask plutôt. C'est celui avec lequel je t'ai taquiné à la fin de le dernier article:

Saviez-vous que le outline la propriété était-elle capable de tant de merveilles ? Ajoutez-le à votre boîte à outils pour des décorations d'images fantaisistes !

Combinez tout !

Maintenant que nous avons appris de nombreuses astuces utilisant les dégradés, les masques, le découpage et le contour, il est temps de passer à la grande finale. Terminons cette série en combinant tout ce que nous avons appris au cours des dernières semaines pour présenter non seulement les techniques, mais aussi démontrer à quel point ces approches sont flexibles et modulaires.

Si vous voyez ces démos pour la première fois, vous pourriez supposer qu'un tas de wrappers divs et de pseudo-éléments supplémentaires sont utilisés pour les réaliser. Mais tout se passe directement sur le élément. C'est le seul sélecteur dont nous avons besoin pour obtenir ces formes et effets avancés !

Emballage en place

Eh bien, bon sang, merci d'avoir passé du temps avec moi dans cette série en trois parties ces dernières semaines. Nous avons exploré une multitude de techniques différentes qui transforment des images simples en quelque chose d’accrocheur et interactif. Utiliserez-vous tout ce que nous avons couvert ? Certainement pas! Mais j'espère que cela a été un bon exercice pour vous permettre d'approfondir les utilisations avancées des fonctionnalités CSS, comme les dégradés, mask, clip-pathet outline.

Et nous avons tout fait avec un seul élément! Pas de wrappers div ni de pseudo-éléments supplémentaires. Bien sûr, c’est une contrainte que nous nous imposons, mais cela nous a également poussé à explorer CSS et à essayer de trouver des solutions innovantes aux cas d’utilisation courants. Ainsi, avant d’incorporer du balisage supplémentaire dans votre HTML, demandez-vous si CSS est déjà capable de gérer la tâche.