Use box-shadow CSS style to draw shadows around boxes

In this post I will discuss use of box-shadow, a very cool feature of CSS3. As web designers and developers we all spend lot of time trying to create some pleasing effects with boxes and shadows around them. In the older browsers we were limited to creating shadow effects around boxes by using images. For that matter lot of time we end up using images to draw boxes as well. With CSS3, lot of these tedious tasks are handled by latest browsers.

box-shaodw is a very powerful CSS style that can be used to generate some very interesting effects. First lets see general sytanx of this property.

.myStyle{
[box-shadow: xoffset, yoffset, blur radius, spread distance, color, inset | none]
}

In nutshell, box-shadow property allows you to draw a box or shape around a box based on the parameters you specify. You can control rendering of shadow by specifying six parameters. Here is the fun part. You are not limited to only one shadow box. You can specify multiple shadow boxes around your main box. You just need to separat each set by a comma (,). The parameters for this CSS style are very self explanatory. But at times it may require some explanation and I will try to provide you with that. Instead of providing some boring details, lets look at some examples of this CSS style and how it affects rendering of shadow'

.myBoxShadows
{
   height:120px; width:120px;
   background-color: #0000f1;
   box-shadow:0 0 15px #ff00f1;
 }

This translates to ... Draw a shadow box at an offset of 0px from upper left corner of box. The shadow box will have a blur radius of 15px and draw the shadow in color #ff00f1. Value of blur radius contols how blurred the shadow is going to be. If you set the value of blur radius to 0, the shadow box will be drawn with sharp edges.

.myBoxShadows
 {
     height:120px; width:120px;
     background-color: #0000f1;
     box-shadow:0 0 15px 15px #ff00f1;
  }
 

This translates to ... Draw a shadow box at an offset of 0px from upper left corner of box. The shadow box will have a blur radius of 15px and draw the shadow in color #ff00f1. Also when shadow box is drawn spread it by a distance of 15px. You can see that shadow box has more width as compared to first case where we did not specify spread distance at all.

.myBoxShadows
 {
     height:120px; width:120px;
     background-color: #0000f1;
     box-shadow:0 0 15px 15px #ff00f1 inset;
 }		
 

This translates to ... Draw a shadow box at an offset of 0px from upper left corner of box. The shadow box will have a blur radius of 15px and draw the shadow in color #ff00f1. Also when shadow box is drawn spread it by a distance of 15px. In this case since inset value has been set, this means that shadow box is going to drawn inwards and not outwards. Browser will first render the main box and then render shadow box on top of it.

.myBoxShadows
 {
     height:120px; width:120px;
     background-color: #0000f1;
     box-shadow:15px 15px 0 0 #ff00f1;
 }
 

This translates to ... Draw a shadow box at an offset of 15px from upper left corner of box. Since I did not specify any blur radius, you can see that shadow box has very sharp edges. It is like drawing a second box under main box but at a specified x and y offet.

.myBoxShadows
 {
    height:120px; width:120px;
    background-color: #0000f1;
    box-shadow:15px 15px 0 0 #ff00f1 inset;
 }
        

This translates to ... Draw a shadow box at an offset of 15px from upper left corner of box. Since I did not specify any blur radius, you can see that shadow box has very sharp edges. It is like drawing a second box under main box but at a specified x and y offet. In this case inset value has been set, so the shadow box is drawn inside.

.myBoxShadows
 {
    height:120px; width:120px;
    background-color: #0000f1;
    box-shadow:15px 15px 15px 0 #ff00f1;
 }
        

This translates to ... Draw a shadow box at an offset of 15px from upper left corner of box. Also use a blur radius of 15px. You can see from the image that shadow box is blurred this time.

.myBoxShadows
 {
      height:120px; width:120px;
      background-color: #0000f1;
      box-shadow:15px 15px 0 0 #ff00f1, 8px 8px 0 0 #0fff10;
 }
        

This translates to ... Draw a shadow box at an offset of 15px from upper left corner of box with color #ff00f1. Draw a second shadow box at an offset of 8px from upper left corner but with color #0fff10. Here you can see use of two sets of values for specifying shadow box.

As you can see that box-shadow CSS style provides you with enough parameters to create some intresting effects on your web pages. You can see all these styles in action on home page of this site as well.

comments powered by Disqus

Search

Social

Weather

9.2 °C / 48.6 °F

weather conditions Clouds

Monthly Posts

Blog Tags