Click here to Skip to main content
Click here to Skip to main content
Go to top

Create Stitched Look using CSS

, 11 Aug 2013
Rate this:
Please Sign up or sign in to vote.
Learn how to give Stitched effect using CSS

Introduction

In this trick, 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 Start

HTML Structure

<div class="stitched">Stitched</div> 

CSS Style sheet

.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

CSS

.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 add 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

image2

This one is the basic example of giving stitched effect. Now we are going to create another Stitched effect.

HTML Document

<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

image3

CSS

.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

CSS

.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

That's all. Hope you like it.

Thanks.

My Other Posts (Tips/Tricks)

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Anoop Kr Sharma
Student
India India
No Biography provided
Follow on   Twitter

Comments and Discussions

 
GeneralMy vote of 5 PinprofessionalManfred R. Bihy11-Aug-13 9:29 
GeneralRe: My vote of 5 [modified] PinmemberAnoop Kr Sharma11-Aug-13 18:47 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140926.1 | Last Updated 11 Aug 2013
Article Copyright 2013 by Anoop Kr Sharma
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid