How To Style a DIV to look like an iChat speech balloon using CSS
This technique works in standards compliant browsers, such as FireFox 3 and Safari 3. You can make it work in non-standards compliant browsers if you want to, but it requires some tweaking.
These instructions are simplified. When posting a chat transcript, you will want to have speech balloons originating from the left alternating with balloons alternating on the right. In this example, we will only discuss the case of the balloons originating from the right. We will generalize ‘CBmsgR’ and ‘CBmsgL’ as just ‘CBmsg’.
1. Start with a container div with its css display property set to ‘table’. We will set the css class of this div to be CBmsg.
2. Add two table-cells to the CBmsg div. The CBmsg will contain a CBtxt and a CBicon. This will create the following layout:
The CSS for this will look like this:
<style type="text/css"> div.CBmsg { display: table; margin-bottom: 0.5em; float: right; text-align: right; } div.CBtxt { display: table-cell; position: relative; margin: 0px auto; min-width: 8em; max-width: 760px; z-index: 1; margin-left: 12px; } div.CBicon { display: table-cell; vertical-align: bottom; padding-left: 10px; } </style>
And the HTML will look this this:
<div class="CBmsg"> <div class="CBtxt">txt</div> <div class="CBicon">icon</div> </div>
3. Add the user’s chat icon. It looks like this:
This is what the CSS looks like. The padding property is only necessary if your blog template sets padding for all images, like ours does.
div.CBicon > img { padding: 0px; width: 32px; height: 32px; }
And this is the HTML:
<div class="CBicon"><img src="IconRajbot.jpg"></div>
4. OK, now comes the complicated part. We use the Even More Rounded Corners technique to draw a bubble. We use a 800×1600 png that looks like an empty iChat bubble. Here is what it looks like:
We copy the ‘content’, ‘t’, and ‘b’ CSS classes from Even More Rounded Corners verbatim:
.CBtxt .CBcontent, .CBtxt .CBt, .CBtxt .CBb, .CBtxt .CBb div { background:transparent url(BubbleBlueR800x1600.png) no-repeat top right; } .CBtxt .CBcontent { position:relative; zoom:1; _overflow-y:hidden; padding:0px 12px 0px 0px; } .CBtxt .CBt { /* top+left vertical slice */ position:absolute; left:0px; top:0px; width:12px; /* top slice width */ margin-left:-12px; height:100%; _height:1600px; /* arbitrary long height, IE 6 */ background-position:top left; } .CBtxt .CBb { /* bottom */ position:relative; width:100%; } .CBtxt .CBb, .CBtxt .CBb div { height:10px; /* height of bottom cap/shade */ font-size:1px; } .CBtxt .CBb { background-position:bottom right; } .CBtxt .CBb div { position:relative; width:12px; /* bottom corner width */ margin-left:-12px; background-position:bottom left; } [/pre] And the HTML now looks like this: <pre lang="html"> <div class="CBmsg"> <div class="CBtxt"> <div class="CBcontent"> <div class="CBt"></div> txt </div> <div class="CBb"><div></div></div> </div> <div class="CBicon"><img src="IconRajbot.jpg"></div> </div>
cacaosteve, and 
cacaosteve are discussing. 
MPaulo, and 
shag are discussing. 
bobslobster, 
Pete are discussing. 
Matt and 5 others are discussing. 
Serge, 
You know how I’m 
If you like old video games, you might get a kick out of 
The WordPress team is doing some awesome work these days. They’ve just released 
killerdemouches is discussing. 
cacaosteve 1:09 am on January 1, 2008 Permalink |
Could you post the necessary images and show an example? :-)
cacaosteve 11:02 am on January 3, 2008 Permalink |
I found an example in another entry here. This is an excellent tutorial, thank you!