Faire une info-bulle facilement en css

info-bulle

Petite astuce pour faire facilement une info-bulle en CSS en quelque ligne et donner pour ajouter de la précision a votre Webdesign et diriger le visiteur vers un une info.

Le design info-bulle

Un simple rectangle avec une flèche mais un design qui reste efficace.
Procédé graphique très souvent utilisé pour donner un effet de dialogue sms, en bulle de bande dessinée…
Pour en faire quelque chose de sympa, il faut l’utiliser cette astuce sur un :hover, ou avec a ajout de class en Javascript.

Les pseudo éléments

comme vu dans l’article sur les ombres avancées, les pseudo éléments (::after, ::before) sont très utile vous vous éviter d’ajouter des images de design général dans votre code HTML et pour ette petite astuce cela va nous servir à créer la petite fléché collée a votre bulle.

Passons à la pratique

cette petite astuces est tiré d’un tuto de grafikart

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *