Drop-Shadow Box:
Internet Explorer doesn't like "display: table" in the
style sheet, so we need a hack:
<style type="text/css">
.DS-container {
padding: 0px 6px 6px 0px;
line-height: 0.1;
display: table-cell;
}
.DS-container { /* IE hack */
display: inline-block;
width: 1px;
}
.DS-back {
position: relative;
bottom: -6px; right: -6px; /* double the bottom/right below */
}
.DS-front, .DS-middle, .DS-image {
position: relative;
bottom: 3px; right: 3px; /* how much shows */
}
.DS-back {
background-color: #cccccc; /* second shadow color */
color: #000000;
}
.DS-middle {
background-color: #666666; /* first shadow color */
color: #000000;
}
.DS-front {
background-color: #f8e7c7; /* background color of content */
color: #000000; /* text color of content */
border: 1px solid #000000; /* border color */
padding: 0px 10px 0px 10px;
line-height: normal;
}
.DS-image {
border: 1px solid #000000; /* border color */
}
</style>
-------------------------------------------------------
<div style="margin-left: 20px;">
<div class="DS-container">
<div class="DS-back">
<div class="DS-middle">
<div class="DS-front" align="left">
<pre style="padding: 0;">
...contents of the box...
</pre>
</div></div></div></div>
</div>
Inline Shadow Box:
I use the code below to show an
inline shadow box
to my viewers:
<style type="text/css">
.DSI-back {
border-bottom: 3px solid #cccccc;
border-right: 1px solid #cccccc;
margin: 0px 3px 0px 0px;
}
.DSI-middle {
border-bottom: 2px solid #666666;
border-right: 1px solid #666666;
}
.DSI-front {
border: 1px solid black;
background-color: #f8e7c7;
}
</style>
-------------------------------------------------------
<span class="DSI-back">
<span class="DSI-middle">
<span class="DSI-front">
content of shadow box
</span>
</span>
</span>
.
