<< Previous BlogNext Blog >>

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

10297tweet
10
Excellent
1
Very Good
0
Average
0
Below Average
3
Poor

Article Info

About the author

Alex is a web developer currently working for Worldview Limited in Morecambe, UK. Alex likes to write code and is proficient in HTML, CSS, PHP, JavaScript, Ajax, XML and XSLT. In his spare time Alex likes to write articles and scripts for various projects.

Share This Article

Who Likes This?

  • Author: Matthew Kellett

    #1 | 25th Jun 2010 @ 18:54

    CSS 3 is going to be an awesome addition to the internet standards once it is fully released.

    It's worth converting just for the page load speed increase :)

    reply

  • Author: tobias

    #2 | 10th Feb 2011 @ 15:02

    They are awesome. The problem I noted when publishing is that they dont work with IE. Sadly lots of people are still using that useless browser. So perfect for Chrome and FireF, but not IE. Here I have your first bubble published http://pokerdest.com/Poker%20Quotes.php

    reply

    • Author: Alex Hall

      #3 | 10th Feb 2011 @ 15:28

      Nice use of the speech bubbles!

      reply

  • Author: seo outsourcing

    #4 | 28th Apr 2011 @ 03:54

    The scheming is brilliant! Not only you optimize the artistic design of your titles via CSS Bubbles, the best part in terms of seo is the fact that words are still readable and crawlable as text despite being contained in a css container.

    reply

  • Author: poppva1

    #7 | 23rd Sep 2011 @ 12:26

    Thanks for the comment. I would be intrigued to know how you would make it easier? Feel free to leave a comment, or contact me with your ideas! Print Pocket Folders || Print Folder

    reply

  • Author: Xmas Quotes

    #8 | 06th Oct 2011 @ 11:48

    The first story i read and the first tape I listen. But for so far I think the best tape. Only great songs!

    reply

  • Author: Radiator Covers

    #9 | 07th Oct 2011 @ 14:05

    the best part in terms of seo is the fact that words are still readable and crawlable as text despite being contained in a css container.

    reply

  • Author: lkfsdjlk

    #10 | 10th Oct 2011 @ 10:36

    The post is written in very a good manner and it contains much useful information for me. I think it may be help all of you. Good luck to the author! all the best! cheap LED watches

    reply

  • Author: Car Auctions Essex

    #11 | 10th Oct 2011 @ 12:42

    The best part in terms of SEO is that words are still readable and searchable as text despite being contained in a css.

    reply

  • Author: jack

    #12 | 13th Oct 2011 @ 16:25

    Thanks for sharing. i really appreciate it that you shared with us such a informative post.. Online High School Diploma | Online GED | Homeschool Diploma

    reply

  • Author: jack

    #13 | 13th Oct 2011 @ 16:28

    The difference between the right word and the almost right word is really a large matter — it's the difference between a lightning bug and the lightning. Earn Diploma | Accredited High School Diploma

    reply

  • Author: The Folder Printing Guy

    #14 | 19th Oct 2011 @ 15:40

    CSS3 certainly makes life a lot easier, a very efficient way of working once you've put the time in initially. Love the Speech Bubbles post! Haven't come across that before.

    Presentation Pocket Folder Printing

    reply

  • Author: ATKIN

    #15 | 26th Oct 2011 @ 06:06

    Well that's amazing article ! I really enjoy to read articles that have good information and ideas to share to each reader. I hope to read more from you guys and continue that good work that is really inspiring to us. Keep up the good job. thanks for the sharing
    Logo Design Contests

    reply

  • Author: payday loans online

    #16 | 13th Nov 2011 @ 11:26

    I use the form, It ask me a review and nothing sent to the php script... Can you help me ?! Regards

    reply

  • Author: payday loans online

    #17 | 13th Nov 2011 @ 11:27

    I use the form, It ask me a review and nothing sent to the php script... Can you help me ?! Regards

    reply

  • Author: cheap car insurance

    #18 | 14th Nov 2011 @ 08:23

    In order for us to make this as easy as possible for you, as well as our commenting system

    reply

  • Author: jsmith

    #19 | 19th Nov 2011 @ 12:21

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

    arrest warrants

    warrants for arrest

    warrant search

    reply

  • Author: Jey

    #20 | 19th Nov 2011 @ 14:20

    If the Internet is completely open CSS 3 standards will be a great addition. Htc rhyme unlock

    reply

  • Author: missy

    #21 | 22nd Nov 2011 @ 03:13

    this is a pure CSS speech bubbles and i love doing this for sure. I would to get in touch with this ASAP and will ask if he can help me with mine. helpdesk support

    reply

  • Author: Suzettech

    #22 | 22nd Nov 2011 @ 12:08

    That's really great tips. Thanks, it's such a good resource. keep up your site. I admire and bookmarked. Vacation tips : vacation to Austria | vacation homes in Spain

    reply

  • Author: best workout routine

    #23 | 22nd Nov 2011 @ 12:42

    It ask me a review and nothing sent to the php script... Can you help me ?! Regards best workout routine

    reply

  • Author: best workout

    #24 | 23rd Nov 2011 @ 13:48

    just ordinary people maybe that do a big thing in their life and affected our life too.Thank you for the work you have put into this post best workout

    reply

  • Author: Find Dentist

    #25 | 24th Nov 2011 @ 12:32

    This is one blog that I’ll visit again. Do you plan to write any more about CSS? Find Dentist

    reply

  • Author: Funny ts

    #26 | 24th Nov 2011 @ 17:22

    Your information on CSS has helped me understand it much more clearly, thank you. Funny ts

    reply

  • Author: Building Inspections Gold Coast

    #27 | 25th Nov 2011 @ 08:38

    A friend of mine told me to read this post, and I am glad I did. Your expertise on CSS is outstanding. Building Inspections Gold Coast

    reply

  • Author: Pergolas Sydney

    #28 | 25th Nov 2011 @ 10:20

    Your writing style is unique. it has helped me understand this speech, but could you please explain CSS a little bit. Pergolas Sydney

    reply