Sickdesigner.com

The work & fun of web designer Radu Chelariu.

Menu

Experiments, ideas & things done just for the fun of it

Contact me

Feel free to get in touch with me if you want to hire me (design work, speaking engagements, guest posting), interviews, if you have a problem with either Photoshop, HTML, CSS or Wordpress, or if you just want to talk about design. I'm also available on Twitter, Facebook or Google+, if that's more your game.

But, for the love of all that is Bauhaus, please do not contact me if you're selling something or about link exchanges and that kind of stuff. I will not reply to these requests.

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!

2 Comments so far

  1. Matija says:

    Wow, very nice dude, I like it :)

  2. Patrick says:

    This website has an awesome design :D and thank you for the leather idea :)

Speak your mind