CSS Stitched Look for elements

• Tweet

• Tweet

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

.stichit {
    position:relative;
    padding: 15px;
    margin: 15px;
    font-family: calibri;
    font-size: 20px;
    line-height: 120%;
    color: #fff;
    -webkit-box-shadow: 0 0 15px 3px rgba(100,100,100,.5);
    -moz-box-shadow:0 0 15px 3px rgba(100,100,100,.5);
    box-shadow:0 0 15px 3px rgba(100,100,100,.5);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width:250px;
    text-align: center;
    z-index:2;
    background: #4c4c4c;
    background: -moz-linear-gradient(top,  #4c4c4c 0%, #000000 32%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(32%,#000000), color-stop(60%,#111111), color-stop(76%,#2b2b2b),                 color-stop(91%,#1c1c1c), color-stop(100%,#131313));
    background: -webkit-linear-gradient(top,  #4c4c4c 0%,#000000 32%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);
    background: -o-linear-gradient(top,  #4c4c4c 0%,#000000 32%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);
    background: -ms-linear-gradient(top,  #4c4c4c 0%,#000000 32%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);
    background: linear-gradient(to bottom,  #4c4c4c 0%,#000000 32%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 );
}

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

<div class="stichit">
       This element has been transformed into a stitched looking element.<br>
       You can do this with any element. Only thing you will need to change is the element width and height
</div>

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