Create Cool Stitched Effect With CSS3

There are many visual effect possibilities we can achieve with CSS - the limit only depends on our creativity and imagination. A simple effect on a site or site content can make a huge difference in terms of site engagement level. So, stuffing your site with too much design will only makes it look cluttered while a simple, sexy design is the frontrunner.

Just like the title advertised. We will be creating a stitched effect with CSS3 that looks like an element is been sewed to your page.

The HTML Markup

<div class="stitched">
<p>Stitched</p></div>

The CSS Markup

.stitched {
    height:100px;
    width:400px;
    margin: 15px;
    background: #e2e2e2;
    border: 2px dashed rgba(255,255,255,0.4);
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -moz-box-shadow: 0 0 0 4px #e2e2e2, 2px 1px 4px 4px rgba(10,10,0,.5);
    -webkit-box-shadow: 0 0 0 4px #e2e2e2, 2px 1px 4px 4px rgba(10,10,0,.5);
    box-shadow: 0 0 0 4px #e2e2e2, 2px 1px 6px 4px rgba(10,10,0,.5);
        }

.stitched p {
font-family: ar christy;
font-size: 60px;
color: #b4b4b4;
text-align: center;
margin: 9px 0px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #5d5d5d;
}

That's all the code we need to create a stitch effect. The final result will look like the above screenshot.

Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

Follow @realcombiz