Making It Your Web

Pure CSS Speech Bubbles

  • Posted 8th Mar 2010 @ 10:09:50
  • Last update 16th Jul 2013 @ 10:52:20
  • By Alex Hall

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>

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

Comments (1)

Hi,The right sidebar by Jatinder

on 6th Sep 2013 @ 14:18:52

Hi,The right sidebar is touhicng the middle column in the homepage as you can see. I want to change the size same like left sidebar, not touhicng the middle column.Thanks for reply.

0 0


Add A Comment

Please note: all comments are moderated before they are published on this page.

Cancel Reply