Creating a Bubble Coda Style with CSS3
May 12th, 2010 by Tweet
As I have previously mentioned, CSS3 allows for web techniques such as: text shadows, rounded borders, animations, custom web fonts, and much more. CSS3 has a great future in web development and I have being reading and learning as much as I can about it! The downside currently to CSS3 is that some properties of CSS3 are only being supported by Safari and Chrome; however, Opera started supporting some, but the implementation is still buggy. I have prepared a few other tutorials about how to use CSS3 to make an image gallery with animation and an animated horizontal menu. Continuing with the CSS3 tutorials, today we are going to create a tooltip using the famous coda style, which allows for an animated pop-up window that makes for a great effect. I hope you find the tutorial useful! Enjoy!
HTML
First, we create our HTML file and inside the body tag we add the following code. It is an unordered list which is going to have inside a text and next to it a “div” tag that is going to be the tooltip or bubble to display with the hover action to the “li” tag.
<ul id="bubblemenu"> <li> Penn Jillett <div> My favorite thing about the Internet is that you get to go into the private world of real creeps without having to smell them. </div> </li> <li> Thomas Watson <div> I think there is a world market for maybe five computers. </div> </li> <li> Bill Gates <div> 640K ought to be enough for anybody. </div> </li> <li> Sam Ewing <div> Computers are like bikinis. They save people a lot of guesswork. </div> </li> </ul>
CSS
We declare the unordered list as inline and adding the cursor pointer for usability reasons.
#bubblemenu li { display: inline; margin-left: 15px; cursor:pointer; }
At the second part, we select the “div” that is inside the “li” to style it. Notice that the visibility is hidden and the opacity is zero. Additionally, we add some fancy stuff like rounded bordes and shadows to make it look more like the coda menu. Also, it has the transition effects which set the return state in 0.5s after the mouse out the “li” tag.
#bubblemenu li > div { width: 150px; min-height: 100px; position: absolute; display: inline; margin-left: -120px; padding: 5px; visibility:hidden; opacity: 0; margin-top: -125px; background: #ffffff; font-size:1em; /* Setting the border-radius property for all Browsers */ -moz-border-radius: 5px; /* Firefox */ -webkit-border-radius: 5px; /* Safari and Chrome */ border-radius: 5px; /* Browsers that Support it like Opera */ /* Setting the box-shadow property for all Browsers */ -moz-box-shadow: 0 0 8px gray; /* Firefox */ -webkit-box-shadow: 0 0 8px gray; /* Safari and Chrome */ filter: progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=3); /* IE */ box-shadow: 0 0 8px gray; /* Browsers that Support it like Opera */ /* Setting the transition property for all Browsers */ -moz-transition: all 0.5s ease-in-out; /* Firefox */ -webkit-transition: all 0.5s ease-in-out; /* Safari and Chrome */ -o-transition: all 0.5s ease-in-out; /* Opera */ transition: all 0.5s ease-in-out; /* Browsers that Support it */ }
With the hover effect we create a transition putting the “div” tag visible and and the opacity to 1. Additionally, we move the “div” to the top by 30px.
#bubblemenu li:hover > div { visibility:visible; opacity: 1; margin-top: -150px; /* Setting the transition property for all Browsers */ -moz-transition: all 0.5s ease-in-out; /* Firefox */ -webkit-transition: all 0.5s ease-in-out; /* Safari and Chrome */ -o-transition: all 0.5s ease-in-out; /* Opera */ transition: all 0.5s ease-in-out; /* Browsers that Support it */ }
We are done!
Teylor Feliz is a well-known XHTML/CSS/JavaScript enthusiast from Santo Domingo, Dominican Republic. He has more than 10 years experience in the computer programming and development world, including 2 years teaching computer science. He is currently living in Louisiana, where he plans to complete his degree in Computer Science, and begin a Masters in the field.
Subscribe to our RSS
Please help us to promote this article.
Sponsors
A Leading B2B platform with 10 years history. Compare & Inquire with Trusted China Suppliers (SGS certified). Log on & Order now!
I love the bubble coda style, and it´s awesome to be able to do it only with css3. Thanks for the tut Teylor!
I am glad you liked it! Thanks for the comment!
Wow.. this is cool stuff.. I had seen this effect somewhere before, i think in some Apple related site…. but this is superbly executed.
Good work
As you can see, it is not too difficult! I am glad you liked the tutorial! Thanks for the comment!
Nice tuto! thx for sharing!
Thanks Bro! Glad you liked it!
nice effects ! i really liked them when i saw them in other site, but dont know how to make this ! thanks for sharing , i ll give a try!!
Try implementing it! I am glad you liked it! I think it gives a great effect too
Great tutorial as always man! Keep up the great work!
Thanks! Glad you enjoyed it!
Useful Post Teylor, Rtedd and bumped , Cheers
Thanks man for always supporting us! I really appreciate it! Thanks for the comment
Great technique mate…Keep it up…very good explained.
Thanks for the comment, and come back soon!
really useful technique. thanks
I am glad you found it useful; it is why I do these tutorials! When people can put them to use, it makes it so worth it! Thanks for commenting and come back soon!
Hi,
Thanks for a interesting tutorial! I created a menu example with your technique in combination with CSS3-styled bubbles at http://css3.se/bubblor.html . The code could probably be more tidy and organized, but it works really good.
Very nice, thanks for sharing!
I tried to do this the other day and ended up with a very similar code structure. In the end, I used .png again.
The only reason for it is that the tooltips NEEDED the little arrow. I couldn’t neglect it. I was able to add the arrow and add a border to the arrow itself (all with just CSS), but it was impossible to add a box-shadow to it.
Still, it’d be good to show how to add the arrow to the tooltip, for people that might like it.
I haven’t try but maybe with a small div with rotation we can get that effect.
Thanks for your comment!
What I tried was actually an :after selector with content to get it done. From there, some trickery with borders and positioning and you get the arrow. Problem was the shadow. ): And it looked pretty weird having a shadow on the whole bubble box but not on the small “tip” (go to youtube and hover over any video title on the video list page, you’ll get a taste of what I mean).
I worked fast on this and I came up with this demo.
http://www.admixweb.com/demos/arrowdemo/
Thanks for your comment.
BTW: Me gusto muchisimo el tutorial que hiciste para SMag, me gusta ver como los latinos cuando se destacan. Suerte!!!!
Not trying to be, though I certainly am being picky, but there are three things I dislike from that approach (which I thought of too, believe me).
1) It uses moz-transform (I like border trickeries a lot more, but this really is a matter of choice).
2) The shadow of the tip overlaps with the one of the box and looks darker at some point (yes, it is a matter of 1 or 2 px… sorry, told ya I was being slightly picky :/ ).
3) The extra div element. I’m all for simple code first, aesthetics after.
It is one of many solutions, indeed.
And a nice addition to the article. 
Props for that. Will post my own approach soon.
P.D. Muchas gracias.
Tiene mucho que lo escribí y no toda la información es acertada ya (por ejemplo, legend ya no se usa como el caption de figure. Ahora es figcaption 
). Saludos desde México. 
I agree with your comment, but this is just a quick approach that it took me only like 3 minutes. However, in relation with the shadow you have to use lens to see the different.
In my opinion, you should use images in real life that avoid browser issues.
Thanks for you comment again and I wait for your approach
Youre kidding me right? IE does actually support the transition attribute in a cleaner way than anybody else?
Thats probably the first time i have to give them kudos for anything.
More than Transitions, I would prefer to say that they are filters and animations from DHTML era and there is no property similar to the CSS3 one.
Thats one fine example of what CSS3 can do ! I am so impressed. But its too bad IE is yet to catch up on the CSS3 and half of the world is still grabbing on to IE. I am adding this tutorial to my CSS aggregator site. Hope you dont mind.
Thanks for the comment and feel free to add a link to my tutorial on your site! Thanks!