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
Article Info
- Posted By: Alex Hall
- On: 8th Mar 2010 @ 10:09:50
- Comments: 28
- Rating: 4 / 5
- Hits: 10297
- Listed In: tutorials, css, enhancements
- Short URL: http://bit.ly/ccyL1A
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.
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