Monday, 27 January 2014

Stitched Look using CSS

In this Article, we are going to learn how to give Stitched effect using CSS. Firstly, we give Stitched effect to a simple box (i.e. any div), then we add some background-images and take this trick to the next level.
Let's Begin:
Example1:
HTML Structure: 
<div class="stitched">Stitched</div
 
CSS:
.stitched
{
background-color:darkred;
width:200px;
font-size:20px;
color:white;
padding:20px;
}
Here we set background-color, width, Font-size, etc. of div using .stitched class.
 
Preview:
.stitched
{
background-color:darkred;
width:200px;
font-size:20px;
color:white;
padding:20px;
border:2px dashed white;
border-radius:20px;
box-shadow:0px 0px 4px 4px darkred;
}
Now, we added border, border-radius and box-shadow to .stitched class. In box shadow, we only use blur and spread and set value to 4px (box-shadow syntax: box-shadow: h-shadow v-shadow blur spread color). 
 
Preview:
This one is the basic example of giving stitched effect. Now we are going to create another Stitched effect.
 
Example2: 
HTML Structure: 
 
<div class="pic">
   <div class="borderdiv">
   <div class="inner"><p class="text1">Stitched</p></div>
   </div>
</div>
Here, the outermost div (.pic) is used to set background-image, middle (.borderdiv) to set border and giving stitched look and innermost div (.inner) for text, etc.
 
CSS:
.pic
{
background-image:url("white_leather.png");
width:302px;
height:202px;
border-radius:5px;
}
Here, I set background-image, width, height and border-radius.
 
Preview:
.borderdiv
{
width:280px;
height:180px;
border: 2px dashed #aaa;
border-radius:10px;
position:relative;
top:9px;
left:10px;
box-shadow: 0 0 0 1px #f5f5f5;
}
Here, we set width and height less than the .pic so that it comes inside it. Then, we set Border, Border-radius and box-shadow to give effect of Stitched. Using Position, we adjust position inside the div (.pic).
 
Preview:
.text1
{
margin-top:60px;
text-align:center;
font-size:50px;
color:gray;
}
Here we adjust Font-size, color, align, etc.
 
 
Preview (Final):

I have created some other examples using the same technique. You can download it for viewing or using.
 
Preview:
You can also download the source code from the below link:
Hope you Like it. Thanks




0 comments:

Post a Comment

Subscribe Now

Popular Posts

Contact us

Name

Email *

Message *

Subscribe us on YouTube

Like us on Facebook

Follow us on Google+