CSS Drop Shadows

By CRAIG KUNCE

Yes, guys and gals, you too can create mind-numbingly easy drop shadows on your web sites using the css text-shadow property. Over the last few years, browser support has increased for this css function, making it a increasingly popular choice with web designers.

Reference: w3.org

Text Drop Shadows

To get my drop shadow I created the following .class selector and styled it with css:

 

.gray_drop_shadow {
font-size: 2em;
color: #000025;
font-weight: bold;
text-shadow: -2px 2px 5px #999999;
}

 

Here's what the numbers mean:

text shadow

 

the result:

A Light Gray Drop Shadow on My Text

 

Box Drop Shadows

Reference: w3.org

You can also apply drop shadows to boxes using simple css.
Again, to demonstrate my box with a drop shadow I created the following .class selector, inserted a div, and styled it with css:

 

.drop_shadow_box {
height: 50px;
width: 200px;
box-shadow: 5px 5px 10px #666;
background-color: #069;
}

 

Here's what the numbers mean:
(notice you can also apply an inset drop shadow: box-shadow: inset 5px 5px 10px #666;)

box shadow

 

the result:

 

 

 

 

Here's the same box with rounded corners and an inset drop shadow.

 

.drop_shadow_box_rndcorners_inset {
height: 50px;
width: 200px;
box-shadow: inset 5px 5px 10px #000025;
background-color: #069;
border-radius: 15px;
}

 

and… here's an example of how this css property may be used as a design element:


 

.bullet_holes {
height: 50px;
width: 50px;
box-shadow: inset 5px 5px 10px #000025;
background-color: #006699;
border-radius: 25px;
margin: 10px; float: left;
}