CSS3 Box-Shadow

It seems like more and more website want to have the newest look and the newest techniques involved with them. A really cool technique that I use quite often is the CSS3 Box Shadow. This is kind of like doing a drop shadow in Photoshop except it is done with CSS. Why should you do a drop shadow this way? Well there are a couple reasons. One really simple because you can. A drop shadow is something that has been used in Photoshop for some time now but there has really never been a way to create a drop shadow in web. Two and the most important because it is created in CSS you do not have to save a gigantic image that has the drop shadow.

What are the down falls to using Box Shadows

Well unfortunately like most of the new techniques that are created everyday some browsers don’t support this. Well what browser do support this. Pretty much all of the popular browsers new versions. The Box Shadow is supported with IE9+, Firefox 4, Chrome, Opera, and Safari 5.1.1. As most people know Safari uses a little bit different coding style you will have to create this with the -webkit. You can also use the -moz setting for Mozilla but you don’t have to.

How to implement Box Shadows

Like all other CSS you first have to determine the container that you want to place this on. Whether it is a div, class, id, or any other element. This property has 6 parts. The first part is the h-shadow or horizontal shadow. The next part is the v-shadow or vertical shadow. The third part is the blur, which is optional. The fourth is the spread and this is also optional. The fifth is the color and this can handle all the types whether it is hex or rgb. Now the sixth part I am going to save for a little later.

What Box Shadow should look like.

So as stated above you have 6 parts to this that you can fill out. There are 3 that are optional. So lets see what this looks like.

OK so now you can see what it looks like. As you can see the first value is the h-shadow, the second is the v-shadow, the third is the blur (optional), the fourth is the spread (optional), and the fifth is the color. Now what about this fifth part.

The sixth part

The sixth part is one that you may never use and it is one that you could find yourself using a lot. The sixth element is a inset. What this does is exactly as it sounds it puts the shadow inwards. Now below is how you add this to the property.

If you would like to see examples and learn more about this I would recommend going over to CSS Tricks.