I stumbled onto this just a few minutes ago, and I figured I'd share it with you guys. This very well might have been used before, but it's new to me.
To make a nice top-banner for your website and add a very nice looking 3px drop shadow to it. First, put the following divs in your HTML page (the first thing after your body tag)
Then, the CSS for these banners will look like this:
#topbanner {
background-color: #003399;
margin: 0px;
padding: 0px;
height: 30px;
width: 100%;
}
#shadow {
background-color: #646b9d; //Middle stripe of shadow
margin: 0px;
padding: 0px;
height: 3px;
width: 100%;
border-top: 1px solid #393e5a; //Darkest stripe of shadow
border-bottom: 1px solid #818bcb; //Lightest stripe of shadow
/* The following code ensures that the middle stripe of the shadow will only be 1px tall in all browsers */
voice-family: "\"}\"";
voice-family: inherit;
height: 1px;
}
body>#shadow {
height: 1px;
}
#bottombanner {
background-color: #8f9ae1; //Color of bottom banner
margin: 0px;
padding: 0px;
height: 10px;
width: 100%;
}
Also, make sure your <body> tag has the 'margin: 0px' and 'padding: 0px' styles applied to it.
Here's what it'll look like once it's done: CSS Shadow
All I did was make two boxes of the color I wanted in Photoshop and add a drop shadow (distance: 1, size: 3) to the top box. then i used the dropper to get the three colors that made up the shadow and used them in my CSS. So this can be done with any two colors, as long as you have an image editing program so you can get the colors right.
If you don't want a bottom banner, and just want a drop shadow against a white bg, the three colors are:
dark > #666666
middle > #B2B2B2
light > #E6E6E6
Ok, I'm done now...It's just a nice subtle effect that can add a bit o' depth to your page without adding any weight.
Question
jackwanders
I stumbled onto this just a few minutes ago, and I figured I'd share it with you guys. This very well might have been used before, but it's new to me.
To make a nice top-banner for your website and add a very nice looking 3px drop shadow to it. First, put the following divs in your HTML page (the first thing after your body tag)
Then, the CSS for these banners will look like this:
#topbanner { background-color: #003399; margin: 0px; padding: 0px; height: 30px; width: 100%; } #shadow { background-color: #646b9d; //Middle stripe of shadow margin: 0px; padding: 0px; height: 3px; width: 100%; border-top: 1px solid #393e5a; //Darkest stripe of shadow border-bottom: 1px solid #818bcb; //Lightest stripe of shadow /* The following code ensures that the middle stripe of the shadow will only be 1px tall in all browsers */ voice-family: "\"}\""; voice-family: inherit; height: 1px; } body>#shadow { height: 1px; } #bottombanner { background-color: #8f9ae1; //Color of bottom banner margin: 0px; padding: 0px; height: 10px; width: 100%; }Also, make sure your <body> tag has the 'margin: 0px' and 'padding: 0px' styles applied to it.
Here's what it'll look like once it's done: CSS Shadow
All I did was make two boxes of the color I wanted in Photoshop and add a drop shadow (distance: 1, size: 3) to the top box. then i used the dropper to get the three colors that made up the shadow and used them in my CSS. So this can be done with any two colors, as long as you have an image editing program so you can get the colors right.
If you don't want a bottom banner, and just want a drop shadow against a white bg, the three colors are:
dark > #666666
middle > #B2B2B2
light > #E6E6E6
Ok, I'm done now...It's just a nice subtle effect that can add a bit o' depth to your page without adding any weight.
Link to comment
Share on other sites
56 answers to this question
Recommended Posts