CSS3 Tip: Removing Box Shadows
Adding box shadows is a great way to bring depth and focus to your design. You have probably seen this trick before:
.selector {
-webkit-box-shadow: 0 3px 5px #333;
-moz-box-shadow: 0 3px 5px #333;
box-shadow: 0 3px 5px #333;
}
That CSS snippet will add a nice drop shadow to any matching selector
. But what if you want to remove the box shadow from one or more of the matched elements? Easy, just declare none
for any box-shadow property values:
.selector.noshadow {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
Depending on the cascade, you may need to strengthen the .selector
with greater specificity. Here we disable the box-shadow from all elements classed with .noshadow
. So something like this:
<div class="selector">This box has a shadow</div>
<div class="selector noshadow">This box has no shadow</div>
<div class="selector">This box has a shadow</div>

About the Author
Jeff Starr = Designer. Developer. Producer. Writer. Editor. Etc.