Comment obtenir un simple effet de bulle en CSS

Les bulles sont un élément courant de conception d'interface utilisateur. Elles peuvent être utilisées pour mettre en valeur des informations ou inviter les utilisateurs, augmentant ainsi l'interactivité et l'esthétique de la page. Dans cet article, nous présenterons comment utiliser HTML et CSS pour implémenter un simple effet de bulle.

Étape 1 : Structure HTML

Tout d'abord, nous devons donner à la bulle un div conteneur, puis placer un élément de contenu texte à l'intérieur du conteneur. Voici le code HTML :

<div>
  <p>这是气泡内容</p>
</div>

Étape 2 : Style CSS

Ensuite, nous devons styliser le conteneur à bulles. Dans ce processus, nous devons généralement prendre en compte les aspects suivants :

1. Couleur de fond et couleur de bordure
   La couleur de la bulle doit être distinguée de la couleur de fond de la page. Généralement, des couleurs plus vives sont choisies pour augmenter l'effet visuel. . Dans le même temps, la couleur de la bordure doit également être définie pour la distinguer de l'arrière-plan.
2. La taille et la position de la bulle
   La taille de la bulle peut être ajustée selon les besoins et est généralement légèrement plus grande que le contenu du texte. De plus, la position de la bulle doit tenir compte de la relation d'alignement avec le contenu du texte et est généralement placée au-dessus ou en dessous du contenu.
3. Forme des bulles
   La forme des bulles peut être ajustée selon les besoins. Les formes les plus courantes sont le rectangle arrondi et le triangle.

Voici le code CSS, nous expliquerons les détails étape par étape :

.bubble-container {
  position: relative;
  display: inline-block;
  padding: 8px 12px;
  border-radius: 5px;
  background-color: #00BFFF;
  color: #fff;
  font-size: 14px;
  line-height: 1.4;
}

.bubble-container:before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -10px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent #00BFFF transparent;
}

Tout d'abord, nous définissons le style de .bubble-container, y compris la couleur d'arrière-plan, la couleur de la police, la taille de la police, etc. De plus, nous utilisons l'attribut padding pour déterminer la taille de la bulle et la distance entre le contenu du texte.

Ensuite, on utilise la pseudo classe :before pour créer la partie triangulaire de la bulle. Plus précisément, nous positionnons le triangle en définissant les attributs bottom et left, puis ajustons la position via l'attribut margin-left. Enfin, nous utilisons les propriétés border-width, border-style et border-color pour définir la taille et la couleur du triangle.

Étape 3 : Code complet

Enfin, nous combinons HTML et CSS pour obtenir le code complet de l'effet bulle :

Code HTML :

<div>
  <p>这是气泡内容</p>
</div>

Code CSS :

.bubble-container {
  position: relative;
  display: inline-block;
  padding: 8px 12px;
  border-radius: 5px;
  background-color: #00BFFF;
  color: #fff;
  font-size: 14px;
  line-height: 1.4;
}

.bubble-container:before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -10px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent #00BFFF transparent;
}

Grâce au code ci-dessus, nous pouvons implémenter un simple La bulle L'effet est comme le montre l'image ci-dessous :

Conclusion

Grâce à l'introduction de cet article, je pense que vous avez compris comment utiliser HTML et CSS pour obtenir un simple effet de bulle. Bien sûr, en plus des formes de base de rectangles et de triangles arrondis, vous pouvez également utiliser davantage de techniques CSS pour créer des effets de bulles plus colorés afin de rendre la page plus vivante et intéressante.

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!