How to achieve a simple bubble effect in css

Bubbles are a common UI design element that can be used to emphasize information or prompt users, increasing the interactivity and aesthetics of the page. In this article, we will introduce how to use HTML and CSS to implement a simple bubble effect.

Step 1: HTML structure

First, we need to give the bubble a container div, and then place a text content element inside the container. The following is the HTML code:

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

Step 2: CSS style

Next, we need to style the bubble container. In this process, we generally need to consider the following aspects:

1. Background color and border color
   The color of the bubble needs to be distinguished from the background color of the page, and generally a brighter one will be chosen Color to add visual effect. At the same time, the border color also needs to be set to distinguish it from the background.
2. Bubble size and position
   The size of the bubble can be adjusted as needed, and is generally slightly larger than the text content. In addition, the position of the bubble needs to consider the alignment relationship with the text content, and is generally placed above or below the content.
3. Bubble shape
   The shape of the bubble can be adjusted as needed. The more common shapes are rounded rectangle and triangle.

The following is the CSS code, we will explain the details step by step:

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

First, we set the style of .bubble-container, including background color, font color, font Size etc. In addition, we use the padding attribute to determine the size of the bubble and the distance between the text content.

Then, we use the pseudo-class :before to create the triangular part of the bubble. Specifically, we position the triangle by setting the bottom and left attributes, and then adjust the position through the margin-left attribute. Finally, we use the border-width, border-style, and border-color properties to set the size and color of the triangle.

Step 3: Complete code

Finally, we combine HTML and CSS to get the complete bubble effect code:

HTML code:

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

CSS code:

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

Through the above code, we can achieve a simple bubble effect, as shown below:

Conclusion

Through the introduction of this article, I believe you have already understood how to use HTML and CSS to achieve a simple bubble effect. Of course, in addition to the basic rounded rectangle and triangle shapes, you can also use more CSS techniques to create more colorful bubble effects to make the page more vivid and interesting.

The above is the detailed content of How to achieve a simple bubble effect in css. For more information, please follow other related articles on the PHP Chinese website!