Tutorials Css How to create a stitched effect using css3

How to create a stitched effect using css3

June 15,2012 Read: 1209 Times

CSS3 is one of the most popular way to create nice and awesome web effect without using image. By using CSS3 we can easily develope attractive web layout in our website. In my last CSS tutorial, we learn about how to rotate background using css3. Hope you enjoyed that tutorial.

Today we are going to learn about "How to create a stitched effect using css3". In our old web layout design thinking, If we want to create a stitched effect then we have to use an rounded image in background. But if we use CSS3 we don't need to use images anymore. As a result, we also don't need to wait for loading image and in this way CSS3 can improve our website performance.

- Where We can use CSS3 Stitched Effect:

We can use this stitched effect in our top navigator menu, post title containers or advertisement containers. If we use it as a container of adsense advertisement then it cna help you to attract more visitor towards your advertisement. So, let's have a look what we are going to design using CSS3.

How to create a stitched effect using css3

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.

- 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 css code same like as normal css. We need to some property of css3. For stitched effect I've added some property of border. You need to add some shadow effect for making it more 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 color choice.

- Write few lines of HTML code:

Now, it's time to integrate your css script in to html page. After adding css file successfully,I've used stitched class in a div. If you want you can apply it p tag, ul tag and other tags as you want. It's very easy and simple.

That's all. Now your stitched effect ready to use. For you I've added a demo and download link in below. You can checkout stitched effect demo page.

Demos for CSS3 stitched effect:

Check Live Demo

Download CSS3 stitched effect:

Download

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!