CSS3 Box Shadow Property

In some of the websites you may have noticed that they have divided the main area and sidebar through the borders properties. The border property is very easy and you can sketch a border around any div. Like we can do it in CSS

. Img

       {width:300px; border:1 px solid #333}

Now a days web designers use advance coding in order to make some div in a prominent way. This gives a stylish look to the box. After the release of CSS3, the friendly coding enhanced the CSS and defined the box shadow property in a unique form. An example of the box shadow is shown below

You can see the box has shadow around its four corners and gives it a good look. Likewise you can apply box shadow to the left and right side as well

Example of CSS3 Box shadow

-webkit-box-shadow: 3px 0px 30px rgba(50, 50, 50, 1);
-moz-box-shadow:    3px 0px 30px rgba(50, 50, 50, 1);
box-shadow:         3px 0px 30px rgba(50, 50, 50, 1);

        Horizontal Length
        Vertical Length
        Blur
        Opacity to RGBA

And the result will be

Shadow On the Right Side of the Box

For applying shadow on the right side of the box. We will decrease the value of Vertical Length to zero and the rest of the code will be same.

-webkit-box-shadow: 3px 0px 2px 2px rgba(50, 50, 50, 1);
 box-shadow: 3px 0px 2px 2px rgba(50, 50, 50, 1);

 You can change the value of Blur and Spread as per your requirement.

Shadow on the Left side of the Box

The code will be same but we will decrease the value of Horizontal Length to -3.

-webkit-box-shadow: -3px 0px 2px 2px rgba(50, 50, 50, 1);
 box-shadow: -3px 0px 2px 2px rgba(50, 50, 50, 1);

Shadow on the Top and Bottom of the Box

Here in this case you will apply the Horizontal Length zero and the Vertical Length to some value.

Bottom

-webkit-box-shadow: 0px 3px 2px 2px rgba(50, 50, 50, 1);
 box-shadow: 0px 3px 2px 2px rgba(50, 50, 50, 1);

Top

-webkit-box-shadow: 0px -3px 2px 2px rgba(50, 50, 50, 1);
 box-shadow: 0px -3px 2px 2px rgba(50, 50, 50, 1);

You can apply these shadows to your blogger/ website to give a look to it. If you are facing any problem in applying these properties, let us know, we will try our best to answer your queries.