Hand drawn speech bubble using CSS3 border-image

Why create a hand-drawn speech bubble?

I’ve noticed more and more hand drawn elements and rough edges being incorporated into site designs. Andy Clarke’s fabulous Stuff and Nonsense and Erskine design both use rough edged dividing lines which I really like. I even borrowed the idea for our gardening website, Grows on You, to get an ‘organic’ feel in the design – particularly in the soil footer. Greg Wood (of Erskine) has also introduced hand drawn elements (including a super cool ginger bread man) into his recent redesign.

Basically, I like the natural look, and a recent post on the new border-image CSS3 property got me thinking about hand drawn speech bubbles – the sort of thing that might be used for comments in a design with a   hand-drawn theme.

Caveat – Does not work in all browsers

CSS3 is not finalised yet and this method will only work in certain browsers. The only one I have tested, and the one I used to get my screen shots, is Safari. I also believe the nightly build of Firefox support border-image.

How I created the Speech bubble using CSS3

First I created a speech bubble image; it’s 100 x 100 pixels and I tried a few different ways of getting lines that had a hand drawn feel – you can see it zoomed in below, together with guiding lines. I used the guidelines so I new which parts of the image would get stretched and where the corners (which aren’t stretched) should go. Starting at the top, they’re 15px 15px 15px and 30px in from the sides – numbers you’ll see again later in the CSS.

Speech bubble

Speech bubble

Next for the html – nothing special there, just a div with a class of “comment”.

The HTML

<div class="comment">
<p>Hey. great idea!</p>
<p>Well, it would be if you could draw.</p>
<p>These hand drawn style designs are all well and good, but wouldn't the speech bubble look better if it wasn't drawn by a two year old?</p>
</div>
<div class="comment">
<p>And what about tiny comments?</p>
</div>

Then for the CSS; this is taken almost straight from the example I mentioned earlier with a few tweaks to the border sizes.

The CSS

.comment{
border-width: 15px 15px 15px 30px;
-o-border-image: url(bubble.gif) 15 15 15 30 stretch stretch;
-icab-border-image: url(bubble.gif) 15 15 15 30 stretch stretch;
-khtml-border-image: url(bubble.gif) 15 15 15 30 stretch stretch;
-moz-border-image: url(bubble.gif) 15 15 15 30 stretch stretch;
-web-kit-border-image: url(bubble.gif) 15 15 15 30 stretch stretch;
border-image: url(bubble.gif) 15 15 15 30 stretch stretch;
}

All the browser vendors have their own syntax for the border image property, but one day (hopefully) you’ll only need the first and last line of all that CSS.

The end results

After a few versions of the speech bubble image, here’s what I ended up with:

The speech bubbles

The speech bubbles

There’s definitely room for improvement but I like that I have a hand drawn container that will stretch to hold whatever you put in it. Now all I need to do is use web fonts to get some pretty handwriting inside the bubble.

Advertisements

About this entry