CSS3 Speech Bubble

Just to show the concept i decided to make a speech bubble with a little pointer out of only html and css3.

Bubble

Demo

HTML:

<div class="bubble">
	<div class="pointer">
		<div class="one"></div>
		<div class="two"></div>
	</div>
	<div class="content">
		<p>Hey do you like this bubble?</p>
	</div>
</div>

CSS:

.bubble {
	width:400px;
	color:#efefef;
}
.bubble .pointer {
	height:15px;
	background:#393939;
}
.bubble .pointer div {
	height:100%;
	background:#ffffff;
}
.bubble .pointer .one {
	width:50%;
	-moz-border-radius-bottomright: 15px;
	-webkit-border-bottom-right-radius:15px;
	float:left;
}
.bubble .pointer .two {
	width:50%;
	float:right;
	-moz-border-radius-bottomleft: 15px;
	-webkit-border-bottom-left-radius:15px;
}
.bubble .content {
	padding:10px;
	-moz-border-radius: 10px;
	-webkit-border-radius:10px;
	background:#393939;
	text-align:center;
}

Demo

Tags: , , ,

Comments

Thats one fine example of what CSS can do ! I am so impressed, I am adding this tutorial to my CSS aggregator site. Hope you dont mind.

This might be a nice thing to add in my site.

I’ve produced the same effect and several others without requiring empty elements – j.mp/bMGm6h

its nice and cool, but i cant help thinking of but-cheeks :)

this is really very nice
thanks for this post

Tutorial City & James im just polishing up the jQuery version and I should have it up early this week.

And Luminarious Thanks for the suggestion I’ve added it into the jQuery version.

Thanks for all you comments so far.

I agree with Tutorial City. The style of thinking that enabled you to create this is highly valuable though. Cheers to that!

Why not include the W3C draft version — border-bottom-right-radius — an the like as well? Just to future-proof, you know.

Yeah, I’m in the process of creating a jQuery plugin for this effect. Thanks for your comment.

The effect is pretty cool, but I don’t think its a good idea to create useless dom element just to create a visual effect like this. Maybe it would be better to inject this code with javascript and leave the html clean.

Drop A Comment