CSS Speech Bubbles

I'd like to take a moment to talk about my CSS speech bubbles. My comic uses CSS rules for making <p> tags render as speech bubbles for the frogs. If you view the page source, you'll see that there are no tables or images involved - just pure CSS.

There are many examples out there on the Internet about how to achieve this effect. I based mine on this one: Bubbler - CSS Speech Bubble Generator. Of all the examples I saw, I just like this one the best.

There was one minor issue I came across though. The frogs are in different places in each cell, but because the bubble stems are positioned using the CSS psuedo-elements ::before and ::after, the values that determine the stem location cannot be set via JavaScript.

I decided to solve this issue by removing the stem position from the .bubble::before and .bubble::after classes in the CSS, and creating another set of classes just for the stem positions.

I called these new classes bubble25, bubble50, and bubble75. You can probably guess that the number represents the percentage used for the left attribute in the stem position.

So now, if I want to create a speech bubble with the stem on the right side (75% of the bubble width) I create a tag like this:

<p class="bubble bubble75">here is some content for the bubble</p>

While I can't position the stems at every possible position this way, having the 3 different options has proven sufficient so far. This is a good example of a design trade-off. I could create a hundred different classes and never use 90% of them, or I could create just 3 and get a good-enough position 99% of the time.

Here's a snippet of my CSS that shows more clearly what I'm talking about.

.bubble {
 position: absolute;
 width: 44%;
 padding: 2%;
 text-align: center;
 background: #FFFFFF;
 border: #000000 solid 3px;
 font-family: 'Sniglet', sans-serif;
 line-height: initial;
 color: #000000;
 box-sizing: content-box;
 -moz-box-sizing: content-box;
 -webkit-box-sizing: content-box;
 -webkit-border-radius: 20px;
 -moz-border-radius: 20px;
 border-radius: 20px;
}

.bubble:after {
 content: '';
 position: absolute;
 border-style: solid;
 border-color: #FFFFFF transparent;
 display: none;
 width: 0;
 z-index: 1;
 box-sizing: initial;
 -moz-box-sizing: initial;
 -webkit-box-sizing: initial;
 border-width: 21px 7px 0;
 bottom: -21px;
 margin-left: -12px;
}

.bubble:before {
 content: '';
 position: absolute;
 border-style: solid;
 border-color: #000000 transparent;
 display: none;
 width: 0;
 z-index: 0;
 box-sizing: initial;
 -moz-box-sizing: initial;
 -webkit-box-sizing: initial;
 border-width: 25px 9px 0;
 bottom: -27px;
 margin-left: -14px;
}


.bubble25:after {
 left: 25%;
 display: block;
}

.bubble25:before {
 left: 25%;
 display: block;
}

.bubble50:after {
 display: block;
 left: 50%;
}

.bubble50:before {
 display: block;
 left: 50%;
}

.bubble75:after {
 display: block;
 left: 75%;
}

.bubble75:before {
 display: block;
 left: 75%;
}

Make sure you check out John Clifford's Bubbler to make your own bubble CSS. Speech bubbles can be a welcome addition to any web site.

Amphibian.com comic for August 18, 2014