CSS3 leather stitching

Yesterday, I came across this little post by Todd Dunham over at Developer Drive and thought to myself “well, that’s not a very convincing effect”. Sure, Todd was very clean about his markup and used just one element in his attempt to recreate a stitched effect, but are we to trade quality over purism? Sometimes the answer to that question is yes, but, to me, this time it was a resounding no.

So, I set out to pull off my own take on the whole CSS3 Stitched Effect. Take a look at the demo and below I’ll explain some of the code.
Demo

The HTML

I used this image from SXC as a leather texture. The brown texture is the same picture, just scaled down and slightly edited in good ol’ Photoshop. The markup is really quite simple, just two divs.

1
2
3

<div id="stitch">
<div id="inner-stitch">Just a CSS leather stitch</div>
</div>

The CSS

There’s a fair bit of stuff in the demo but it all boils down to two properties: border and outline. Use these two properties with the same width and alternate colors and you have yourself a stitching effect.

1
2
3

#inner-stitch{
border: 1px dashed #000;
outline: 1px dashed #fff; }

Certainly, achieving this effect requires more than just the use of two properties, it's got a lot to do with getting the right colors, maybe doing some rounding off at the corners, subtle stuff like that. It's not a groundbreaking technique, of course, but it does prove one very important point: even a simple technique such as this one takes a bit of elbow grease to get right if quality work is what you're after. Just slapping code in a project and hoping it'll be brilliant right off the bat is a pipe dream.

Cheers, all!