Comment créer des queues d'info-bulles élégantes avec Pure CSS ?

Création d'info-bulles avec CSS

Le code HTML et CSS donné démontre une technique pour générer un effet de « queue d'info-bulle » en utilisant du CSS pur. Cet effet crée une petite forme en forme de flèche ou de triangle qui pointe vers l'info-bulle.

Comprendre l'astuce CSS

Le code CSS comprend trois éléments distincts :

1. Boîte d'info-bulle : Une boîte rectangulaire avec des coins arrondis et un solide border.
2. Tail Shadow : Une boîte invisible positionnée légèrement en dessous et décalée par rapport à la boîte d'info-bulle. On lui donne une ombre de boîte pour créer une apparence de profondeur.
3. Triangles de queue : Deux triangles invisibles, l'un rempli de la couleur de la boîte d'info-bulle et l'autre d'une couleur transparente. Ils sont positionnés légèrement en dessous de la zone d'info-bulle et se chevauchent pour créer le bout de la queue.

Obtenir l'effet de queue

En ajustant précisément la la position et la largeur de la bordure de ces éléments, l'illusion d'une queue d'info-bulle est créée. L'ombre de la queue ajoute de la profondeur à l'effet, tandis que les triangles forment la forme de la flèche.

Élargissement de la technique

Pour étendre cette technique pour créer une info-bulle avec un compatibilité shadow et multi-navigateurs, les modifications suivantes peuvent être apportées :

1. Modification Box-Shadow : Remplacer la propriété box-shadow avec -webkit-box-shadow pour une meilleure prise en charge entre navigateurs.
2. Préfixes du fournisseur : Ajoutez des préfixes tels que -moz- et -o- au border-radius propriété pour assurer la compatibilité avec les anciens navigateurs.

Conclusion

La technique CSS présentée dans cette réponse permet la création de queues d'info-bulles élégantes sans avoir besoin d'images ou de graphiques supplémentaires. Il fournit une méthode simple et efficace pour améliorer l'expérience utilisateur en offrant des repères visuels pour des informations supplémentaires.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!