2004.06.29
How To: CSS Shadow Box
Shadow box with me! Yesterday I posted an article on how to create shadows specifically for your text. My goal had always been to create dropshadows for text boxes. The examples odd left in the comments were for items that required image files, which I don’t want to deal with.
Oddly enough I had been close to a solution quite a while back… Oh well, live and learn. Here is the example.
Here is the HTML:
<div class="back">
<div class="front">
text and such.
</div>
</div>
And here is the CSS:
.back {
background: #F0F0F0;
float: right;
clear: right;
width: 200px;
margin: 2px;
}
.front {
border: solid 1px #CCCCCC;
background: white;
position: relative;
top: -4px;
right: 4px;
padding: 9px;
color: #666666;
}
Note that I used a grey color scheme for this; I think it helps the shadow look a bit softer. I’ve also made this thing sit on the right side of a page, like a navigation section.
For interesting variations try putting border: solid 1px #E3E3E3; in the .back class for a harder edge, or if you can find a lighter grey than #F0F0F0 you could have a softer edge.
Categorized: geek technology
You can follow any responses to this entry with a RSS 2.0 feed. You can leave a response, or trackback from your own site.
