How to use Box shadow in a website

Hello Guys, Sometimes we need tTo beautify our contents , block and images with box-shadow. Using different type box shadow we can beautify our website contents. Using box-shadow we can give shadow from different side. Today we will see how to give box shadow from different sides.

So , lets see what we do today:

Box-shadow from top
Box-shadow from bottom
Box-shadow from left
Box-shadow from right
Box-shadow from all side
Box-shadow inset

To use Box-Shadow just use these classes in style :

.all {box-shadow: 0 0 5px #333;}

.top { box-shadow: 0 -5px 5px -5px #333; }

.bottom { box-shadow: 0 5px 5px -5px #333;}

.right {box-shadow: 5px 0 5px -5px #333;}

.left {box-shadow: -5px 0 5px -5px #333;}

First of all Make a common div with the class of  box.

.box {
 height: 150px;
 width: 300px;
 margin: 20px;
 border: 1px solid #ccc;
 }

In html now make the div. 

 <div class="box all"></div>
 
 <div class="box top"></div>
 
 <div class="box right"></div>
 
 <div class="box bottom"></div>
 
 <div class="box left"></div>

Sharwar

Search This Blog

How to use Box shadow in a website

So , lets see what we do today:

Comments

Post a Comment