How to create a stitched effect using css3

CSS3 allows you to create awesome web effect without using any image. So, it not only gives the developer to design attractive web layout but also helps to increase the website speed. So, today we are going to learn about a technique to create a stitched effect using css3.

Before releasing CSS3 support by the browsers, If we want to create a stitched effect then we need to create the PSD of required layout, cut those images using photoshop and then set them to the background and obviously it is a time consuming process to achieve the required design. However, in  CSS3 we do not need to use those images anymore and we are going to use only the CSS3 properties. Here goes the step by step tutorial.

– Write a Class For Stitched Effect:

.stitched-effect {
   padding: 5px 10px;
   margin: 10px;
   background: white;
   color: #fff;
   font-size: 21px;
   font-weight: bold;
   line-height: 1.3em;
   border: 2px dashed lightgray;
   border-top-left-radius: 3px;
   -moz-border-radius-topleft: 3px;
   -webkit-border-top-left-radius: 3px;
   border-bottom-right-radius: 3px;
   -moz-border-radius-bottomright: 3px;
   -webkit-border-bottom-right-radius: 3px;
   border-top-right-radius: 3px;
   -moz-border-radius-topright: 3px;
   -webkit-border-top-right-radius: 3px;
   -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 white, 2px 1px 6px 4px rgba(10,10,0,.5);
   text-shadow: -1px -1px #aa3030;
   font-weight: normal;
   width: 300px;
   height: 300px;
}

All codes looks like the same as regular css. We need to some property of css3. For stitched effect we have added the border properties. Additionally, included the shadow effect to make it live and natural.

By using box-shadow and text-shadow property of css3, we can easily do that. You can change border, background and shadow color according to your requirement.

– Write few lines of HTML code:

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

Next, it’s time to integrate your CSS code into HTML page. For demo purpose we have used stitched class into a div tag. However, you can apply the class in any HTML tags. Now, the stitched effect ready to use. Here goes the demo and download URL.

– Where We can use CSS3 Stitched Effect:

We can use this stitched effect in the top navigator menu, post title or advertisement containers. If we use this Adsense advertisement, then it can help you to attract more visitor towards your advertisement.

Very simple and clean stitched effect. To create this, first of all you need to define a CSS class and then you need to add this class in your HTML scripts, where you want to use.

Was this information useful? What other tips would you like to read about in the future? Share your comments, feedback and experiences with us by commenting below!