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:
.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:
<div class="shadowbox">
<div>And there you have your result!</div>
</div>
And there you have your result!
Of course, you can change the background colours and borders as you wish and by adding a width to the shadowbox class you can control the width of the whole thing. Have fun shadow boxing.
Replies to Daniel Burka’s post:
Shadow Boxing
I am curious if there is a way to include in the DIV attributes a top border. After changing the background to a lighter color I saw that the border for the top is absent. I have played around with the code but have not been able to figure it out. Any suggestions? Thanks!
Even better: the modification works on one part of the site, but not another. Now I am really confused!
Well done fella :o)
I did the same thing, but using an image:
http://www.1976design.com/blog/archive/2003/11/14/shadows/
A few other people came up with the same idea around the same time.
Hey thanks, this is great. I used a semi-transparent .png as the background for extra seemingly suspended in space action: backgroud:url("/images/shadow.png");
Sadly, the transparency _doesn't_ work in IE (it uses the correct base color of the image, however) so you'll need Mozilla (http://www.mozilla.org/) or Safari (Mac only) to see the full effect.
If you change the second div in the style-sheet to
.shadowbox > div {
you can have additional div's inside the shadow box...
(This is written of the top of my head, I may be wrong.)
A minor tweak, this:
To make it look more as if the shadow has a blurred edge, just add a slightly lighter border to the .shadowbox class.
This way, you get a content box with a two-colour shadow.
Enjoy.
My code:
.shadowbox {
background: #dfdfdf;
border: 1px solid #f5f5f5;
position: relative;
top: 3px;
left: 3px;
}
.shadowbox div {
background: #fff;
border: 1px solid #000;
color: #ff0000;
padding: 5px 10px;
position: relative;
top: -3px;
left: -3px;
}
it's appplicable for making image shadow?
To David July: We ran into the same problem on a recent project. Wrapping the contents of the inner DIV element inside paragraph tags seemed to restore the top border. Hope this helps.
hmm is not working with FireFox.
Amelia - it works fine for me in Firefox (0.9, and it worked in 0.8 too)
Totally awesome! Adds dimension to a page, and saved me a ton of work. I love the HTML/CSS code used ... simple is A Good Thing(tm).
Looks great. But when I try to select text starting from the paragraph above the box and then down to the paragraph below the box, as soon as my mouse hits the div, it launches me down the page, making me select WAY more than intended. I'm using FF 1.0 for my browser.
Dylan Bennett: I'm able to replicate your issue in Firefox 1.0. Very weird. I even experimented quickly with it in a seperate html file with nothing else that could cause that effect and it happens. Hmm, have to file a Bug report on Bugzilla I suppose... unless someone's got an idea why the simple html/css in this example would cause it.
I was looking at a site that showed how to do the sidebar div's with gradient shading. Have not been able to find it since. Would it be possible to show me how it's done using CSS?
Thanks, any help is appreciated.
Arun.
is it aplicable with anchor tag only without div?
Nice and simple. Cool! I wish CSS3 was supported. It makes me cry when I think about how easy my life would be with CSS3.
