Creating Bubble Speeches with CSS

In the world of web design, adding visually appealing elements to a site can significantly enhance user experience and engagement. One such element is the bubble speech, often used to highlight quotes, comments, or interactive chat interfaces. Let’s get started creating stylish bubble speeches using CSS.

Getting Started

Before diving into the code, here is a basic structure of a bubble speech.

Basically, it consists of a container with a triangular tail pointing towards the speaker or the subject.

This effect can be achieved using CSS properties like border-radius for rounded corners and ::after pseudo-elements to create the tail.

In the end, it should look like this.

HTML Markup

First, let’s set up the HTML structure:

1
2
3

<div class="bubble-speech">
    <p>Hello there! This is a bubble speech.</p>
</div>

CSS Styling

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

.bubble-speech {
    position: relative;
    margin: 50px auto;
    background-color: #f0f0f0;
    border-radius: 15px;
    padding: 15px;
    max-width: 300px;
}

.bubble-speech::after {
    position: absolute;
    content: '';
    height: 0;
    width: 0;
    border-top: 15px solid #f0f0f0;
    border-right: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 15px solid transparent;
    bottom: -28px;
    right: 20px;
}

Understanding the CSS

• .bubble-speech: This class styles the container of the bubble speech. I set its position to relative to ensure the positioning of the tail pseudo-element is relative to this container. I also apply background color, border radius, padding, and max-width to control the appearance of the bubble.

• .bubble-speech::after: a pseudo-element is used to create the triangular tail of the bubble. To make a desired triangular shape, it can be achieved by positioning it absolutely and manipulating their border properties. If you don’t know how to create a triangle using CSS yet, I wrote about it in the previous blog post.

Customisation

Feel free to customise the bubble speech according to your design preferences. You can adjust properties like colors, sizes, and border-radius to match your website’s theme. For the triangular shape, you can adjust its size by the width of the border, and its positioning to where you want it to be relevant to the bubble square.

Conclusion

Creating bubble speeches with CSS adds a touch of creativity and interactivity to your website. You can easily implement stylish bubble speeches that enhance the visual appeal of your content.