20 Subscribers

I was browsing the inter-web, and came across a site that had a bubble-effect on some of their text. I looked around, but couldn’t find any tutorials or anything that demonstrated how to make this effect, so I just played around with some CSS until I got something that looked kind of like it, and I thought I would share it with the (very few) people who read my Blog.

First, here’s sort of a demo of the effect. You can change the text and color of the bubble to see what it will look like:

In order to make this effect work, you’ll need 3 image files, one for the left edge, one for the background, and one for the right edge. For now, we’ll just use the Red images. You can use your own if you want.

Save these three images to a directory on your server. For example, /images.
Next, create a new HTML file, and add this CSS (either on the page itself, or in a separate, linked file):

.bubble_title {
	background: url(/images/red_bubble_01.png) no-repeat top left;
	top: 3px;
	left: 5px;
	height: 50px;
	z-index: 21;
	position: relative;
	float: left;
	display: inline;
}
.bubble_title_content {
	background: url(/images/red_bubble_02.png) repeat-x top left;
	left: 37px;
	height: 50px;
	padding-top: 0px;
	position: relative;
	float: left;
	display: inline;
}
.bubble_title_content p {
	font-family:Arial, Helvetica, sans-serif;
	letter-spacing:-1px;
	font-weight:bold;
	position: relative;
	left: -20px;
	top: -17px;
	font-size: 22px;
	color: #333;
	z-index: 50;
}
.bubble_title_right {
	background: url(/images/red_bubble_04.png) no-repeat top left;
	width: 10px;
	height: 50px;
	left: 37px;
	position: relative;
	float: left;
	display: inline;
}
.clear {
	clear: both;
	height: 0;
}
.bubble {
	position: relative;
	float: left;
	display: inline;
}

The HTML Code for the bubble itself is:

This is some sample text...

Once you have the bubble’s HTML Code on your page, and the CSS Setup properly, you should see your bubble! You can play with the images, and the CSS to make bubbles that look/behave differently, and if you want to spice it up, try adding some Prototype and Script.aculo.us to your code, like I did.

I’m including the PSD for the bubble image, so you can modify it if you want – to make a new color, just change the color of the bottom layer shape, and export the images for web (PNG). Please let me know what you think, and if you use this code somewhere, let me know – I’d like to see it :D

Balloon Image

Share this Post: http://bit.ly/bUksW