Info bulles et bulles CSS modernes (partie 2) —

J’espère que vous avez pu prendre le temps de vous familiariser avec les techniques que nous avons utilisées pour créer des info-bulles dans la partie 1 de ce rapide deux parties. Ensemble, nous avons pu créer un modèle d’info-bulle flexible qui prend en charge différentes directions, positionnements et colorations sans ajouter la moindre complexité au HTML.

Nous avons exploité le CSS border-image propriété basé sur un autre article que j’ai écrit tout en appliquant intelligemment clip-path astuces pour contrôler la queue de l’info-bulle. Si vous n’avez pas consulté cet article ou la première partie de cette série, faites-le car nous allons directement dans le vif du sujet aujourd’hui et le contexte vous sera utile.

Jusqu’à présent, nous avons examiné les formes d’info-bulles avec des queues triangulaires avec la possibilité d’avoir des coins arrondis et une coloration dégradée. Bien sûr, nous avons pu faire beaucoup de choses, mais il existe de nombreuses autres formes – et plus intéressantes – que nous pouvons réaliser. C’est ce que nous faisons dans cet article. Nous traiterons les cas où une info-bulle peut avoir une bordure et différentes formes de queue, toujours avec le moins de balisage et le plus de flexibilité.

Avant de commencer, je tiens à vous rappeler que j’ai créé une grande collection de 100 formes d’info-bulles. J’ai dit dans la première partie que nous les réaliserions tous dans ces deux articles. Nous en avons couvert environ la moitié dans la première partie, alors terminons ici dans la deuxième partie.

Le HTML

Pareil qu’avant!

<div class="tooltip">Your text content goes here</div>

C’est la beauté de ce que nous créons : nous pouvons créer de très nombreuses info-bulles différentes à partir du même élément HTML sans rien changer.

Ajouter une bordure aux info-bulles que nous avons créées dans la première partie est délicat. Nous avons besoin que la bordure entoure à la fois l’élément principal et la queue de manière continue afin que la forme combinée soit transparente. Commençons par la première forme simple que nous avons créée dans la première partie en utilisant uniquement deux propriétés CSS :

.tooltip {
  /* tail dimensions */
  --b: 2em; /* base */
  --h: 1em; /* height*/
    
  /* tail position */
  --p: 50%;
    
  border-image: fill 0 // var(--h)
    conic-gradient(#CC333F 0 0);
  clip-path: 
    polygon(0 100%, 0 0,100% 0, 100% 100%,
      min(100%, var(--p) + var(--b) / 2) 100%,
      var(--p) calc(100% + var(--h)),
      max(0%, var(--p) - var(--b) / 2) 100%);
}

Voici la démo. Vous pouvez utiliser le curseur de plage pour voir à quel point il est flexible de modifier la position de la queue en mettant à jour la --p variable.

Le border la propriété n’est pas une option ici en ce qui concerne l’ajout de bordures à notre info-bulle. Cela ne fonctionnera pas. Au lieu de cela, nous devons utiliser un pseudo-élément qui trace efficacement la forme de l’élément principal, puis le réduit.

Commençons par le code suivant :

.tooltip {
  /* tail dimensions */
  --b: 2em; /* base */
  --h: 1em; /* height*/
      
  /* tail position  */
  --p: 50%;
    
  border-image: fill 0 // var(--h)
    conic-gradient(#5e412f 0 0); /* the border color */
  clip-path: 
    polygon(0 100%, 0 0, 100% 0, 100% 100%,
      min(100%, var(--p) + var(--b) / 2) 100%,
      var(--p) calc(100% + var(--h)),
      max(0%, var(--p) - var(--b) / 2) 100%);
  position: relative;
  z-index: 0;
}
.tooltip:before {
  content: "";
  position: absolute;
  inset: 8px; /* border thickness */
  border-image: fill 0 // var(--h)
    conic-gradient(#CC333F 0 0); /* background color  */
  clip-path: inherit;
}

Le pseudo-élément utilise le même border-image et clip-path les valeurs des propriétés comme élément principal. Le inset la propriété diminue sa taille à partir de là.

Je dirais que cela a l’air génial à première vue. Mais les choses deviennent géniales une fois que nous commençons à ajuster la position de la queue. C’est parce que les deux clip-path les formes ne sont pas alignées puisque le pseudo-élément couvre une zone plus petite que l’élément principal. Nous devons garder les valeurs de gauche et de droite égales à 0 afin de résoudre ce problème :

inset: 8px 0; 

Et ajustons le border-image pour diminuer la taille de la zone colorée sur les côtés :

border-image: fill 0 / 0 8px / var(--h) 0
  conic-gradient(#CC333F 0 0); /* background color  */

Oui, c’est le border-image une supercherie d’avant ! Alors, si vous ne l’avez pas déjà fait, lisez mon article sur border-image pour voir comment nous sommes arrivés ici.

Maintenant, les choses s’annoncent très bien :

Les deux clip-path les formes sont bien alignées. L’info-bulle est presque parfait. Je dis « presque » parce qu’il y a un petit problème avec l’épaisseur de la bordure. L’épaisseur autour de la forme de la queue est un peu plus petite que celle autour de l’élément. Si vous jouez avec les dimensions de la queue, vous verrez l’incohérence.

Ce n’est probablement pas grave dans la plupart des cas. Quelques pixels ne constituent pas un problème visuel flagrant, mais vous pouvez décider si cela répond ou non à vos besoins. Moi? Je suis perfectionniste, alors essayons de corriger ce petit détail même si le code va devenir un peu plus complexe.

Nous devons faire des calculs qui nécessitent des fonctions trigonométriques. Plus précisément, nous devons modifier certaines variables car nous ne pouvons pas obtenir ce que nous voulons avec la configuration actuelle. Au lieu d’utiliser le base variable pour les dimensions de la queue, je considérerai un angle. La deuxième variable qui contrôle le hauteur restera inchangé.

La relation entre la base (--b) et l’angle (--a) est égal à B = 2*H*tan(A/2). Nous pouvons l’utiliser pour mettre à jour notre code existant :

.tooltip {
  /* tail dimensions */
  --a: 90deg; /* angle */
  --h: 1em; /* height */
    
  --p: 50%; /* position */
  --t: 5px; /* border thickness */
    
  border-image: fill 0 // var(--h)
    conic-gradient(#5e412f 0 0); /* the border color */
  clip-path: 
    polygon(0 100%, 0 0, 100% 0, 100% 100%,
      min(100%, var(--p) + var(--h) * tan(var(--a) / 2)) 100%,
      var(--p) calc(100% + var(--h)),
      max(0%, var(--p) - var(--h) * tan(var(--a) / 2)) 100%);
  position: relative;
  z-index: 0;
}
.tooltip:before {
  content: "";
  position: absolute;
  inset: var(--t) 0;
  border-image: fill 0 / 0 var(--t) / var(--h) 0
    conic-gradient(#CC333F 0 0); /* the background color */
  clip-path: inherit;
}

Rien de radical n’a changé. Nous avons introduit une nouvelle variable pour contrôler l’épaisseur de la bordure (--t) et mis à jour le clip-path propriété avec les nouvelles variables qui définissent les dimensions de la queue.

Désormais, tout le travail va se faire sur le pseudo-élément clip-path propriété. Ce ne sera plus inherit la valeur de l’élément principal, mais il a besoin d’une nouvelle valeur pour obtenir l’épaisseur de bordure correcte autour de la queue. Je veux éviter d’entrer dans les détails mathématiques complexes derrière tout cela, alors voici la mise en œuvre :

clip-path: 
  polygon(0 100%, 0 0, 100% 0, 100% 100%,
    min(100% - var(--t), var(--p) + var(--h)*tan(var(--a)/2) - var(--t)*tan(45deg - var(--a) / 4)) 100%,
    var(--p) calc(100% + var(--h) + var(--t)*(1 - 1/sin(var(--a)/2))),
    max(var(--t), var(--p) - var(--h)*tan(var(--a)/2) + var(--t)*tan(45deg - var(--a)/4)) 100%);

Cela a l’air complexe parce que ça l’est ! Vous n’avez pas vraiment besoin de comprendre les formules puisqu’il vous suffit d’ajuster quelques variables pour tout contrôler.

Maintenant, enfin, notre info-bulle est parfaite. Voici une démo interactive où vous pouvez ajuster la position et l’épaisseur. N’oubliez pas de jouer également avec la dimension de la queue.

Dégradés et coins arrondis

Nous avons appris dans la première partie que travailler avec des dégradés en utilisant cette approche est plutôt génial car nous fournissons déjà un dégradé sur le border-image propriété. Tout ce que nous avons à faire est de remplir l’élément principal et la queue avec un véritable dégradé au lieu d’une couleur unie.

Passons aux coins arrondis. Nous pouvons simplement utiliser le code que nous avons créé dans l’article précédent. Nous dupliquons la forme à l’aide d’un pseudo-élément et effectuons quelques ajustements pour un alignement parfait et une épaisseur de bordure correcte.

La raison pour laquelle je n’entre pas dans les détails de celui-ci est de souligner que vous n’avez pas besoin de vous souvenir par cœur de tous les différents cas d’utilisation et extraits de code. L’objectif est de comprendre les concepts réels que nous utilisons pour créer les info-bulles, comme travailler avec border-image, clip-path()dégradés et fonctions mathématiques.

Je ne me souviens même pas de la plupart du code que j’écris une fois terminé, mais ce n’est pas un problème puisque tout ce que j’ai à faire est de copier et coller puis d’ajuster quelques variables pour obtenir la forme souhaitée. C’est l’avantage de tirer parti des fonctionnalités CSS modernes : elles gèrent une grande partie du travail à notre place.

J’aimerais faire un autre exercice avec vous, cette fois en créant une info-bulle sans remplissage mais toujours avec une bordure complète autour de la forme entière. Jusqu’à présent, nous avons pu réutiliser une grande partie du code que nous avons rassemblé dans la première partie, mais nous aurons besoin de nouvelles astuces pour y parvenir.

L’objectif est d’établir un fond transparent tout en conservant la frontière. Nous allons commencer sans coins arrondis pour le moment.

Vous voyez comment nous allons à nouveau travailler avec les dégradés ? J’aurais pu utiliser une seule couleur pour produire une bordure unie d’une seule couleur, mais j’ai mis un terme à cette démarche pour démontrer l’idée. Nous pourrons créer encore plus de variations, grâce à ce petit détail, comme utiliser plusieurs couleurs, différents arrêts de couleurs et même différents types de dégradés.

Vous verrez que le code semble assez simple :

.tooltip {
  /* tail dimension */
  --a: 90deg; /* angle */
  --h: 1em; /* height */
    
  --p: 50%; /* tail position */
  --b: 7px; /* border thickness */
    
  position: relative;
}
.tooltip:before {
  content: "";
  position: absolute;
  inset: 0 0 calc(-1*var(--h));
  clip-path: polygon( ... ); /* etc. */
  background: linear-gradient(45deg, #cc333f 50%, #79bd9a 0); /* colors */
}

Nous utilisons à nouveau un pseudo-élément, cette fois avec un clip-path pour établir la forme. A partir de là, nous établissons un linear-gradient() sur le background.

J’ai dit que le code « semble » très simple. Structurellement, oui. Mais j’ai volontairement mis un espace réservé clip-path valeur parce que c’est la partie compliquée. Nous devions utiliser un polygone de 16 points et des formules mathématiques, ce qui, honnêtement, m’a donné de gros maux de tête.

C’est pourquoi je me tourne vers mon générateur en ligne dans la plupart des cas. Après tout, à quoi bon que tout le monde passe des heures à essayer de déterminer quelles formules utiliser si les mathématiques ne sont pas votre truc ? Autant utiliser les outils qui sont à votre disposition ! Mais notez à quel point il est préférable d’utiliser ces outils lorsque vous comprenez les concepts qui fonctionnent sous le capot.

OK, abordons les coins arrondis :

Pour celui-ci, nous allons nous appuyer non pas sur un, mais sur deux des pseudo-éléments, :before et :after. L’un créera la forme arrondie et l’autre servira de queue.

La figure ci-dessus illustre le processus de création de la partie arrondie avec le :before pseudo-élément. Nous commençons par une simple forme rectangulaire remplie d’un dégradé conique contenant trois couleurs. Ensuite, nous masquons la forme pour que la zone intérieure soit transparente. Après cela, nous utilisons un clip-path découper une petite partie du bord inférieur pour réserver de l’espace pour la queue que nous réaliserons avec le :after pseudo-élément.

/* the main element */
.tooltip {
  /* tail dimension */
  --a: 90deg; /* angle */
  --h: 1em; /* height */
    
  --p: 50%; /* tail position  */
  --b: 7px; /* border thickness */
  --r: 1.2em; /* the radius */
    
  position: relative;
  z-index: 0;
}
    
/* both pseudo-elements */
.tooltip:before,
.tooltip:after {
  content: "";
  background: conic-gradient(#4ECDC4 33%, #FA2A00 0 66%, #cf9d38 0);  /* the coloration */
  inset: 0;
  position: absolute;
  z-index: -1;
}
    
/* the rounded rectangle */
.tooltip:before {
  background-size: 100% calc(100% + var(--h));
  clip-path: polygon( ... );
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  padding: var(--b);
}
    
/* the tail */
.tooltip:after {
  content: "";
  position: absolute;
  bottom: calc(-1 * var(--h));
  clip-path: polygon( ... );
}

Encore une fois, la structure n’est pas si complexe et le clip-path la valeur est la partie la plus difficile. Comme je l’ai dit plus tôt, il n’est vraiment pas nécessaire d’approfondir les explications lorsque nous pouvons utiliser les points d’un générateur en ligne pour obtenir la forme exacte que nous souhaitons.

La nouvelle pièce introduite dans ce code est le mask propriété. Il utilise la même technique que celle que nous avons déjà abordée un autre article fracassant J’ai écrit. Veuillez lire cela pour le contexte complet de la façon dont mask et mask-composite Travaillez ensemble pour couper la zone transparente. C’est la première partie de vos devoirs après avoir terminé cet article.

Formes de queue amusantes

Nous avons couvert à peu près toutes les info-bulles disponibles dans ma collection. Les seuls que nous n’avons pas spécifiquement touchés utilisent une variété de formes différentes pour la queue de l’info-bulle.

Toutes les info-bulles que nous avons créées dans cette série utilisaient une simple queue en forme de triangle, qui est un modèle d’info-bulle standard. Bien sûr, nous avons appris à modifier ses dimensions et sa position, mais que se passe-t-il si nous souhaitons un autre type d’info-bulle ? Peut-être voulons-nous quelque chose de plus sophistiqué ou quelque chose qui ressemble davantage à un discours ou à une bulle de pensée.

Si les coins arrondis de la dernière section constituent la première partie de vos devoirs, la partie suivante consiste à essayer de réaliser vous-même ces variations de queue en utilisant ce que nous avons appris ensemble dans ces deux articles. Vous pouvez toujours trouver le code sur ma collection pour référence et conseils. Et laissez un commentaire ici si vous avez des questions supplémentaires – je serai ravi de vous aider !

Conclusion

J’espère que vous avez apprécié cette petite série car j’ai vraiment eu beaucoup de plaisir à l’écrire. Je veux dire, regardez tout ce que nous avons accompli dans un espace relativement court : de simples info-bulles rectangulaires, des coins arrondis, différentes positions de queue, des arrière-plans unis et dégradés, un tas d’options de bordure et enfin, des formes personnalisées pour la queue.

Je suis probablement allé trop loin avec le nombre de types d’info-bulles que nous pouvions créer – il y en a 100 au total quand on les compte ! Mais cela montre à quel point il existe de nombreuses possibilités, même lorsque nous utilisons toujours le même élément dans le code HTML.

Et c’est une bonne pratique de considérer tous les différents cas d’utilisation et situations que vous pouvez rencontrer lorsque vous avez besoin d’un composant d’info-bulle. Gardez-les dans votre poche arrière lorsque vous en avez besoin et utilisez ma collection comme référence, comme source d’inspiration ou comme point de départ pour votre propre travail !

Lectures complémentaires sur SmashingMag

(gg, ouais)