As usual I was going through some tutorials from our web experts. I came across something new to my readers which is not available on the net to my best of knowledge. I came across stitched effect using CSS alone. No JavaScript or any other images involved in this tutorial.

I’m going to teach you guys, how to create double stitched effect using CSS or jeans clothing stitch effect using CSS. Sounds cool?

Double Stitched Effect Using CSS

This tutorial uses webkit transitions in the CSS or you can call them as CSS3.To get the best effect of this tutorial, I recommend you to use a webkit browser like Chrome, Firefox, Safari.

The objective of the tutorial:
Using CSS:
1. create a box container, filled the background with a color.
2. Created the first Stitch using “border” and “border-radius” attributes.
3. Second Stitch using “outline” and “outline-offset” attributes.
4. Added a shadow to the box using CSS3 attributes.
5. Final product will be made of a box with a double stitch inside.

Here is the code to create a double stitched effect using CSS: font-size: 40px; line-height: 190px; font-family: Helvetica, sans-serif; font-weight: bold; text-align: center; text-shadow: -1px -1px 1px #000;} #boxcontainer {width:500px;height:220px;background-color: #47403a;/*First Stitch*/ border: 2px dashed #ffff9c; border-radius: 1px;/*Second Stitch*/ outline: 2px dashed #ffff9c; outline-offset: -8px; -moz-border-radius 1px; -webkit-border-radius: 1px; -moz-box-shadow: 0 0 0 4px #282247, 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 #47403a, 2px 1px 6px 4px rgba(10,10,0,.5);}

<h2>Double Stitched Effect</h2> </div>

How to use it in Blogger?
Place the CSS code before </head> section in the HTML template.
HTML can be placed anywhere on the blog as you desire it to appear.

Hope you will liked this double stitched effect using CSS. Enjoy decorating your website using this effect and do let us know if you have got something new using the effect. It will be real useful for our readers. Thanks for stopping by… Your comments are valued..

~iTechColumn

Leave a Reply

Your email address will not be published.