Friday, July 20, 2012

Visual Depth: CSS Box Shadow Property

CSS Box Shadow Property
I added a thin line of shadow to two divs in my footer using the CSS box-shadow property which takes 6 parameters, h-shadow, v-shadow, blur, spread, color of shadow and inset. First two parameters are required, the rest are optional. Since I want the shadow to appear as a horizontal line, I'm going to be moving the v-shadow 2 pixels and doing nothing in the x-axis which is the h-shadow. So far, box-shadow: 0 2px. My blur is 2 pixels for the first div, color is self-explanatory, I chose inset to have the shadow fall inside the div. [box-shadow: 0 2px 2px #397896 inset;] To see the effect, scroll down to the footer below or click here.

Post a Comment