CSS Stitched Look for elements

Hello,

While I am still on subject of CSS and pseudo elements I thought I should share another CSS snippet with my readers. This snippet will transform your elements to a stamp look or you can call it a stretched look. Here is quick result of what we are going to create

Now you can make adjustments to your likings when you edit the source

Ok let check our the CSS first


Advertisement

 

The CSS

[geshi lang=”css” nums=”1″ target=”_self” ]

To create gradients for the backgrounds I always use this awesome tool that you can browse to later after reading this whole post.

http://www.colorzilla.com/gradient-editor/

Lets now check the Markup required

The Markup

Pretty easy right.

This is my last post dedicated to :before and :after pseudo elements. If I come up with something interesting in future I will definitely share again.

Lets check the demo with few variations

Demo

http://jaspreetchahal.org/examples/css-examples/css-stitched-look.html

In the above demo page I’ve made few basic variations so that you get the taste what else you could do.

I hope that you have enjoyed the last three posts covering few tricks that you can use to do some interesting stuff with CSS pseudo elements.

Cheers,

 

Advertisement

 

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.