Pure CSS Speech Bubbles

I love CSS3. If you're viewing this in a decent modern browser (not Internet Explorer) then you can probably see that because of the amount I use. I do, however, always try to use progressive enhancement in my projects so that anything that looks great in the good browsers still looks presentable in other browsers.

What I love most about CSS3 is how easy it is to do some of the things that used to be an absolute chore for us web developers. Simple things such as creating rounded corners for expandable boxes used to require lots of extra markup and generally didn't work all that well in sub-par browsers. Now, with a couple of extra lines of CSS you can do these things no sweat! Here is an example for rounded corners:

Some HTML:

<div class="roundme">
<p>Here is some text to go inside my example<p>
</div>

And some CSS:

.roundme {
background: #050505;
border: 10px solid #050505;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
}

That's it. It really is that simple. And I've had no end of playing with it since I started reading everything I could about it.

And today I came across a brilliant article that delves even further into the capabilities of CSS3. Check out these Pure CSS Speech Bubbles. Remember, there are no images used, just CSS. And although the author states it does not work in Firefox 3.0 it does work in all later versions (such as Firefox 3.5 and 3.6). It also degrades quite gracefully and in the lesser Internet Explorer browsers you will see some nice boxes with that have square borders, but generally look okay.

And here follows my own example, just as a taster of what you'll see:

A Rectangular Speech Bubble

This is a blockquote that is styled to look like a speech bubble

A Thought Bubble

This is a blockquote that is styled to look like a thought bubble