How to Create a Stitched Effect Using CSS3

AD

I came across this very cool little snippet to create inside dotted or stitched effect in css3 without using any images or background images here. There were many unnecessary lines of codes in the original snippet so I took the liberty of cleaning it up and providing you with this simple tutorial.

So what we are going to make is a 400 x 400px square with this effect.

Live Preview

CSS Part

.stitch-effect {
padding: 5px 10px;
margin: 10px;
background: #ff0030;
border: 2px dashed #fff;

/* rounded borders of 5px in firefox */
-moz-border-radius:5px;   

/* rounded borders of 5px in chrome and other browsers */
-webkit-border-radius:5px;  

/* rounded borders of 5px in browsers that support css3 */
border-radius:5px; 

/* shadows for different browsers */
-moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
-webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5);
height:400px;
width:400px;
}

HTML Part

<div class="stitch-effect">
</div>

The Concept behind it is very simple, what we did is made a simple box with 2px dashed border of white color with rounded edges of 5px.

The Trick

The trick was of adding box shadow like this :

-moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);

By keeping the : 0 0 0 4px #ff0030 it gave the box a solid shadow around it of same color which makes it look like part of the box and the border moved inside though its just a solid color shadow.

That’s All!

Let me know in comments what you think about it 🙂

create free website wix below post

Further Related Readings

Comments
  1. Julian October 16, 2011 at 8:54 pm

    Thank you so much for this… great!!

Comments are closed.

Copyrights © 2016 - Designzzz. All Rights Reserved