Creating Cool Stitched Effects Using Only CSS

CSS is growing day by day due to the new improvements and enhanced introduced Cool-Stitched-Effect-CSSby the design and developer community to the CSS world. As we grow in the CSS arena, there has been tough competitions for CSS with Scripting languages like JavaScripts and jQuery. At least as of now, CSS3 is giving a head on competitions to JavaScript.

I’m very much thankful to the developer community for providing us wonderful attributes for CSS3. Though, the only problem in using CSS3 is the compatibility issue with Internet Explorer(the older versions).

There are already many tutorials on how to create a stitched effects using CSS3, this is just my part in redesigning and re-coding the CSS Stitched effects. I’ve listed 4 different styles of stitching a div element using CSS. You can find them all in the demo link provided below:

DEMO | DOWNLOAD

1. Code Without any Stitching

In the above code we just produce a dashed border around the div element and give the border 2px width. We don’t use any CSS3 attributes yet.

2. CSS Stitched Effect Style 1 – (Compatible with IE8)

The above code uses the box-shadow attribute from the CSS3 family to achieve the stitched effect. I found that this code is compatible with IE8. (I’ve tested it)

3. CSS Stitched Effect Style 2

4. CSS Stitched Effect Style 3

All the codes uses the box-shadow attribute to produce the stitched effect. Though, the styles are different. For example, the above style looks like a jeans stitched effect.

CSS Stitched Double Stitched Effect Style 4

The above code is my own production. The above code enables you to see a double stitched effect using CSS3.

See all the demos again from the below link. You can download all the effects with just a single click from below:

DEMO | DOWNLOAD

CSS3 is really an enchanting stuff to test. We will see more such interesting CSS3 tutorials and codes in our future experiments. Let us know your favorite style and also your findings on CSS Stitched effects.

Vinod

Vinod Suthersan is a enthusiastic web designer still learning new things on web designing. He loves designing, hunting new designs, blogging, and crazy about Internet. Know more

You may also like...