box-shadow property of CSS3, we can add shadows to the different elements on web page, such as div, span or images.
Following is the syntax for
box-shadow: <horizontal> <vertical> <blur> <color> <inset>
Horizontal offset: A positive value places the shadow on the right of the box, while the negative value will place the shadow on the left of the box.
Vertical offset: A positive value places the shadow below the element, while the negative value will place the shadow above the element.
Blur(Optional): A positive value of blur increases the blur and make the box shadow softer. The negatives are not allowed for the blur. If value of blur is not specified, it uses the default value 0, which mean no blur.
Color(Optional): The color value for the shadow. We can either use RGB colors or Hexadecimal colors.
Inset(Optional): The inset property creates an inner shadow effect which means that the gradient effect will be inside of the div.
Examples of box-shadow:
The general properties of our box are as following:
background-color:#F1F1F1; width: 300px; padding:10px; margin:20px;
Box shadow without blur:
We can add the basic shadow without blur as following:
-moz-box-shadow: 8px 8px #989898; -webkit-box-shadow: 8px 8px #989898; box-shadow:8px 8px #989898;
The output of the above code will be
Box shadow with blur
In the following code, we have added the option attribute of blur:
-moz-box-shadow: 8px 8px 8px #989898; -webkit-box-shadow:8px 8px 8px #989898; box-shadow:8px 8px #989898;
The output is as following
Box shadow with inset
The inset can be used as following:
-moz-box-shadow:inset 8px 8px #989898; -webkit-box-shadow:inset 8px 8px #989898; box-shadow:8px 8px #989898;
The output is
Box shadow with blur and inset
In following example, we use blur and inset together:
-moz-box-shadow:inset 8px 8px 8px #989898; -webkit-box-shadow:inset 8px 8px 8px #989898; box-shadow:8px 8px #989898;
The output is
Please note that
box-shadow will not work on any version of Internet Explorer older than IE 9.
I hope this article was any helpful. If you have any question or suggestions, please let me know =)
Also, if you liked this article, please share this page. Thanks.