Due to some circumstances, this blog is now up for sale, for more enquires contact: Plushista@gmail.com
Pin It

Create Cool Stitched Effect With CSS3

by Durodola Ridwan | Monday, October 21, 2013 | 3 Comments

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">

The CSS Markup

.stitched {
    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!".

3 comments : Post Yours! Read Comment Policy ▼
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

About Me

My Photo
Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

Recent Posts

Let's Connect

Site Links

Copyright © 2014 RealcomBiz. All Rights Reserved.
Powered by Blogger