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

Read More

Customize Scrollbars using CSS3

In this tip, we will learn How to Customize Scrollbars using CSS3. Today, more than 55% people use Chrome + Safari as their Web Browser. The common thing in these browser is that both are supported by Webkit platform. Customization of scrollbar is very easy using CSS3, but Custom Scrollbars are supported by Webkit Browsers. Don't worry, as we know that more than 55% of browser marketplace is covered by webkit platform based browser (i.e., Chrome and Safari) which is also a great thing.

Before going to start, we will see Structure of Scrollbar:

Let's Begin:

Create HTML Document:

<div class="scrollbar" id="ex3">

    <div class="content">Example 3</div>

</div>

CSS Stylesheet:

Firstly, we set the .scrollbar (class) width, height, background-color. We set overflow-y:scroll for getting vertical scrollbar. Then set .content div height more than .scrollbar so that scrollbar appears (because we used overflow-y property to scroll in .scrollbar class).

.scrollbar{

width:150px;

height:300px;

background-color:lightgray;

margin-top:40px;

margin-left:40px;

overflow-y:scroll;

float:left;

}

.content{

height:450px;

}

Preview:

After that, we use scrollbar pseudo-element for creating custom scrollbar. When we use scrollbar pseudo-element, it will turn off its default scrollbar and a scrollbar is appeared with 16px width and background-color:#cccccc.

#ex3::-webkit-scrollbar{

width:16px;

background-color:#cccccc;

}

Preview:

As we know that Scrollbar contains Track, Button and Thumb.

In the next step, we are going to give a stylish look to thumb. We use pseudo-element (i.e. scrollbar-thumb) with webkit prefix. Set scrollbar-thumb background- color,border-radius. We also change the color for mouse hovering and active(on clicking).

#ex3::-webkit-scrollbar-thumb{

background-color:#B03C3F;

border-radius:10px;

}

#ex3::-webkit-scrollbar-thumb:hover{

background-color:#BF4649;

border:1px solid #333333;

}

#ex3::-webkit-scrollbar-thumb:active{

background-color:#A6393D;

border:1px solid #333333;

}

After that, scrollbar looks like this:

Preview:

We set border and border-radius of scrollbar-track and use box-shadow to make it stylish.

#ex3::-webkit-scrollbar-track{

border:1px gray solid;

border-radius:10px;

-webkit-box-shadow:0 0 6px gray inset;

}

Final Preview:

Using the above procedure, I have created some other scrollbars. I am providing the source code of others for downloading.

Preview:

That's all. Hope you like it.

Thanks.

Download Source Code[4shared.com]

Read More