CSS3 Complete Box Shadow Property - Brief Guide ~ Blogging Crave

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.

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

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);

Final Words

So friends now 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. So if you like our article then must share with your friends. Thanks in advance.

About Admin

Syed Zaver Abbas is SEO expert in pakistan. he is web designer, web developer, software developer and graphics designer that means he is multi talented. he is also learning more about computer science.