How to make Box Shadow without images

Hi Every one on Free TUTS . Today we've a css3 Tutorials which is how to make a Box shadow without using images. First let's take a ...

Hi Every one on Free TUTS.

Today we've a css3 Tutorials which is how to make a Box shadow without using images.
First let's take a look at the filanle Resul :

Check out this Pen!

So Let's Begin:

First Step:

Take this simple html code:

<div class="drop-shadow">
  Box Shadow <a href="http://www.free-premiumhtml.tk">Free Premium HTML</a>
</div>Check out this Pen!

As you can see it's a simple div with a simple paragraph inside of it there's and anchor tag, pretty simple, hein.

Step Two:

Here we'll begin with css coding.

As what I've writen above, this box shadow will be with no images, in this effect I've used the "After" & "Before pseudo-class, and the css3 element "Transform"

Lets begin with the div styling:

.drop-shadow {
   position:relative;
 width:500px;
  height: 150px;
  background :#e3e3e3;
  color : rgba(0,0,0,.4);
  text-align : center;
  line-height : 150px;
  margin : 0 auto;
  color : rgba(0,0,0,.5);
  font-family : Tahoma;
  text-shadow : 0 1px 0 #fff;
}

.drop-shadow a{
  text-decoration : none;
  color : #999999;
  font-family : Tahoma;
} 

Everything is a simple styling, the only thing that can confuse you is "Position:Relative", this will help you to move the elements of the pseudo-classes as you want.

Step Three:

Now we'll move to the pseudo-classes styling:

.drop-shadow:before,
.drop-shadow:after {
   content:"";
   position:absolute;
   z-index:-1;
   bottom:15px;
   left:10px;
   width:50%;
   height:20%;
   max-width:300px;
   -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   -webkit-transform:rotate(-3deg);
   -moz-transform:rotate(-3deg);
   -o-transform:rotate(-3deg);
   transform:rotate(-3deg);
}

Code Explaining: 

"Position: Asbolute": this will reset the positioning of the element and will be relative to its parent which is in our example the "drop-shadow" div.
"z-index : -1": this is most likely the layers in the photoshop, this means that this element will be behinde the parent element which is in our example the "drop-shadow" div.
"Box-shadow": you can read about this on W3School, and I've used this element on : Stack images with cool effect just with pure css3.
Now let's go to the Transform element:
"transform:rotate(-3deg);" : this means to rotate thie div with (-3deg), so that it give that effect, also you can read about this element from W3School.
The other styling is a simple styling to the element, like the width, height, and the margins...

Step Four:

And now let's complete the effect width the other element:

.drop-shadow:after{
   right:10px;
   left:auto;
   -webkit-transform:rotate(3deg);
   -moz-transform:rotate(3deg);
   -o-transform:rotate(3deg);
   transform:rotate(3deg);
 }

This  coding is generaly like the previous styling except the "left:auto", and this is to make the div position to the left.

Finally:

Here is the final result:

Check out this Pen!

Hope you enjoy it.
See you in the next Post, baybay ^_^