Thursday, October 24, 2013

Create stitched effect with CSS3

Create 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.

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

.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;
}

Create stitched effect with CSS3

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