CSS – Shadow Boxing
This isn’t revolutionary, but making simple boxes with shadows can be really easy with a little simple CSS. The other day I wanted to make a really simple box with a shadow. Adding gray borders kind of does the trick, but you lose the nice hatches out of the corners that indicate depth. Then it dawned on me that using relative positioning, you could easily make a nice shadow. Here’s how you can do it.
In your style sheet add the following two classes:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .shadowbox { background: #ccc; position: relative; top: 2px; left: 2px; } .shadowbox div { background: #333; border: 2px solid #000; color: #fff; padding: 10px; position: relative; top: -2px; left: -2px; } |
Then simply code your box:
1 2 3 | <div class="shadowbox"> <div>And there you have your result!</div> </div> |
See example below:
CSS Image Borders
Thought I would mention a quick and easy way to have all your photos ( aside from resizing them to a predefined thumbnail size ) have that polaroid look with a nice white space/border outlined with a nice thin black trim. Its really quite easy and a real simple line of css code. To make sure this does not conflict with other potential predefined image css items I have named the class differently than simply tagging this onto the default IMG tag
1 2 3 4 5 | .imgborder { background:white; padding:4px; border:1px solid black; } |
See below for working example:
