Surprisingly Simple CSS ‘Talk Bubble’

I’m all about some simple CSS flair, used right it’s fun and an easy way to add in some design in an otherwise minimal template. The example I’ll be showing you here is from {Minimalist Posters} and it’s really a personal favorite (along with the fun circle image CSS, which I’ll be showing soon).

First, the code:


.comment{ 
position:relative; 
padding:15px; 
margin:50px 0 3em; 
text-align:center; 
color:#fff; 
color: #222; 
text-shadow:0px 2px 3px #555; 
background:#333; 
-webkit-border-radius:10px; 
-moz-border-radius:10px; 
border-radius:10px; 
} 

This first bit gives us a slight letterpress look for the div. On the blog itself, it’s a very slight look, I’ve tweaked it a bit more for this post however. The above code also adds in the main background and defines the style itself.

Here’s an example!


.comment:before { 
content:""; 
position:absolute; 
top:-20px; 
left:50%; 
width:100px; 
height:20px; 
margin:0 0 0 -50px; 
background:#333; } 

This bit of code creates the rectangle of color for the pointy area underneath.


.comment:after {
content:"";
position:absolute;
top:-20px;
left:0;
width:50%;
height:20px;
background:#fff;
/* css3 */
-webkit-border-bottom-right-radius:15px;
-moz-border-radius-bottomright:15px;
border-bottom-right-radius:15px;
}

The bit above covers part of the rectangle above for the ’rounded’ look to either side of the point. Simply by putting the three bits together, you now have a fabulous comment box using only CSS. You could also use the above code to create something with a lot more style to it as well, by changing the values of the colors, shapes, or roundness.