How to Make a Box shadow effect with simple CSS?

[emm]

That is the question. Is there a way to make box shadow effect with CSS alone? Without using any graphics or image? I was thinking this would make for a quick load time and also give the site a good 3d effect kind of look.
_________________
“You might say reality is the result of complex negotiations between the observer and the observed. But that is simply a point of view…”
Digital Bangladesh

[quantum]

Perhaps, you are looking for something like this in css?

This goes in the header style section of the html page or in the style sheet that you attached.

<style type="text/css">
<!--
.outershadowbox {
padding: 0;
background: #AAA;
}
.outershadowbox div.trpix,
.outershadowbox div.botpix {
margin: 0;
padding: 0;
font-size: 0;
line-height: 0; /* Necessary to remove one-pixel in IE, also could solve
* Eric Meyer's Slantastic in IE. */
width: 0;
height: 0;
border-width: 0 10px 10px 0;
border-style: solid;
}
.outershadowbox div.trpix { border-color: #AAA #F2F2F2; float: right; }
.outershadowbox div.botpix { border-color: #F2F2F2 #AAA; }

.innershadowbox {
border: 1px solid black;
background-color: #F8F8E0;
padding: 1em;
margin: 0 10px 0 0;
}

This goes to the html body:

<!-- Beginning of shadowbox -->

<div class="outershadowbox">
<div class="trpix" style="float: right;">&nbsp;</div><!-- w/o nbsp, IE gives it a height of 1px -->
<div class="innershadowbox">
The Shadowbox, with diagonal shadow, is created using no images and four div elements. The diagonal edges are created by having two DIVs with no width and a ten-pixel solid border on the bottom and right sides, of different colors. Example:
</p>

<p>Notice how the connection between the two borders is a diagonal edge. Now, here's the same DIV, without any text, with its width, height, font-size, line-height (for an IE behavior), and padding set to zero.</p>

<div class="botpix">&nbsp;</div>

</div>

<div class="botpix">&nbsp;</div><!-- w/o nbsp, IE gives it a height of 1px -->
</div>

<!-- End of shadowbox -->


Also look at this page for a cool shadow effect with css and transparent gif.
[http://nontroppo.org/test/shadow.html]
The idea is as follows:

Use a holder DIV - can be positioned absolute/relative/floating.
Set the background of this DIV with the semi-transparent gif. This becomes the shadow of the box.
Finally, use a relatively positioned 'content' DIV inside it with: {top:-10px; left:-10px} set in the CSS. Varying these values gets you a relative shadow 'offset'.
This effect gives the boxes an impression of floating above the background, because the shadow is semi-transparent so it picks up background colours etc. Therefore you never need to change them if you redesign your site colours, or change background images.
_________________

Dust fills my eyes / Clouds roll by / and I roll with them / Centuries cry / Orders fly / and I fall again
Afford best design, implement best solution. Outsource your web design.

[emm]

Kool the shadow effect with CSS is the bonus with the answer to my question! Extra Bonus Thanks to you too quantum. I may use the shadow effect instead of the box effect, depending on which one suits my taste.
_________________
“You might say reality is the result of complex negotiations between the observer and the observed. But that is simply a point of view…”
Digital Bangladesh

[quantum]

Thanks for the bonus thanks emm. It is always a pleasure to do something for you.
_________________

Dust fills my eyes / Clouds roll by / and I roll with them / Centuries cry / Orders fly / and I fall again
Afford best design, implement best solution. Outsource your web design.