I myself have thought of these three methods:
background-color
methodThis method is pretty simple, by just defining three over-lapping boxes, with different background colors. The elements refered from the blur
and shadow
classes will be appplied with greyish background colors to act as shadows.
HTML codes:
<div class="blur">
<div class="shadow">
<div class="content">bla bla</div>
</div>
</div>
CSS codes:
.blur{
background-color: #ccc; /*shadow color*/
color: inherit;
margin-left: 4px;
margin-top: 4px;
}
.shadow,
.content{
position: relative;
bottom: 2px;
right: 2px;
}
.shadow{
background-color: #666; /*shadow color*/
color: inherit;
}
.content{
background-color: #fff; /*background color of content*/
color: #000; /*text color of content*/
border: 1px solid #000; /*border color*/
padding: .5em 2ex;
}
The only disadvantage of this method is that it uses definite colors for its shadows, as it cannot blend well with other elements.
This method is quite similar to the above one, but fixes the blending problem by using alpha transparent PNG background images, instead of definite background colors. The HTML codes are still the same and you'll only need to modify some CSS codes, specifically the blur
and shadow
class selector.
.blur{
background: transparent url(shadow1.png);
/*path to the 80%-transparent 1x1pixel black-colored background image*/
color: inherit;
margin-left: 4px;
margin-top: 4px;
}
...
.shadow{
background: transparent url(shadow2.png);
/*path to the 60%-transparent 1x1pixel black-colored background image*/
color: inherit;
}
...
In my opinion, the above two methods are not so good because the shadow doesn't look natural. In other words, it's not realistic enough. So, I open up my graphic editor, create a rectangular box with drop shadow, and export the shadow into an image file. Maybe I can use this image file as the shadow for the block elements, replacing the artificial shadow used by the two methods just now?
Here are the experimental HTML codes:
<div class="shade">
<img src="shadow.png" width="0" height="0" alt="" class="shade" />
bla bla</div>
The experimental CSS codes:
img.shade{
width: 37ex;
height: 9em;
/* specify the dimension of the image */
display: block;
position: absolute;
z-index: -1;
/* force the image to show below the content */
right: -3ex;
bottom: -1em;
}
div.shade{
width: 30ex;
height: 6em;
/* specify the dimension of the content, slightly smaller than the image */
position: relative;
z-index: 1;
/* force the content to show above the image */
background-color: #fff;
border: 1px solid #000;
padding: 1em 2ex;
margin-right: 6ex;
margin-bottom: 3em;
}
There are three disadvantages in this method:
float
ed.So, there you go. All three methods for you to choose.
Okay, okay, if you notice the text shadow of the heading on top of this page (maybe using Gecko-based browsers), you should be surprised that it's not a graphic. Even better, it's resizable, by increasing/decreasing the font/text sizes of your browser. Below is an example:
text shadow
Wondering how it's done? Here are the HTML codes:
<span id="text">text shadow</span>
CSS codes:
#text{
font-size: 3em; /* optional. just to increase the font size. */
display: block;
line-height: 1em;
color: #666; /* shadow color */
background-color: transparent;
white-space: nowrap; /* wrapping breaks the effect */
}
#text:before,
#text:after{
content: "text shadow"; /* generated text */
display: block;
}
#text:before{
margin-bottom: -1.05em;
margin-left: 0.1ex;
color: #ccc; /* shadow color */
background-color: transparent;
}
#text:after{
margin-top: -1.05em;
margin-left: -0.1ex;
color: #fff; /* text color */
background-color: transparent;
}
This may be useful, for now. If I'm not mistaken, in the CSS3 drafts, the Actually, in the CSS2 specification, there is the text-shadow
property will/might be introduced to create shadows out of text. Cool.text-shadow
CSS property which applies shadow effects to the text. However, there is lack of browsers support for this property.
Relevant resources: