How do I create/code the drop shadow effect on this webpage:
What is the best image format to use: gif, jpg, png?
If the page is fixed width, this is easy: just place a background image on a wrapper div that repeats down the page. Then have top and bottom background images for the top and bottom shadows in separate divs above and below the wrapper.
Do you have some page code that this could be applied to?
The bg image for the wrapper used on that site is attached below.
You just need an image program like Photoshop or Fireworks, it’s a very easy effect to create. If your drop shadow is on a flat colour like it is on http://www.notsoboringlife.com/ then a gif would be fine but if the drop shadow is on a complex image you’d be best to use a png as it offers better transparency.
Odd, I don’t see any drop shadow in question on the linked page.
Anyways, PNG has the best transparency support (8bit, which is 256 levels of transparency; this will ensure you don’t get jagged edges like you can with a GIF, which only has 1 bit of transparency, ie, you can only specify 1 color to be transparent)
Be aware though that, thanks to the one n’ only Internet Explorer (world’s worst browser), some versions will not be able to see the PNG’s alpha transparency without some MS proprietary code trickery.
Also, on a side note, JPG does not support any transparency, and GIF’s support a maximum of 8 bits of color.
How many colors is that? Calculate 2 to the 8th (2^8). It’s 256.
JPEG can support 24bit (~16.7 million colors)
PNG can support 64bit ( ~18.4 quintillion colors) and 8bits of transparency (256 values)
In RGB, a 24bit JPEG supports 8bits of value per channel (8bits for R(ed), 8bits for G(reen) and 8bits for B(lue))
That means the values in each can be between 0-255 (256 values). These are expressed via Hexadecimal from 00-FF. When you take the R, G, and B hexadecimal values next to each other, you get hex code used in websites, ie, #FF0000 is FF Red, 00 Green and 00 Blue, or in other words “as much red as possible, no green and no blue”. This value is basically pure red.
Just some info…
It’s around the outside of the wrapper.
Anyways, PNG has the best transparency support
Yes, although if the body background is a solid color, it’s just as easy to include that background color in the image itself, and then even a jpg will work fine.
It’s sad that they’ve resorted to using a hackneyed background image along with unsemantic div#top and div#bottom.
If instead they removed div#top and div#bottom and instead did
.wrap {
width: 960px;
background-color: #EAEAEA;
-moz-box-shadow: 0 0 15px black;
-webkit-box-shadow: 0 0 15px black;
box-shadow: 0 0 15px black;
margin: 10px auto;
}
They could have achieved the entire thing using only CSS (and progressive CSS3 at that!) while reducing unnecessary divs and achieving the EXACT SAME EFFECT in modern browsers.
Only sad from one point of view. It’s not really “unsemantic” to do that, though. That’s what divs and background images are for. 
achieving the EXACT SAME EFFECT in modern browsers.
IE8 is a modern browser—just not a very good one. 
But yes, I myself would use CSS3 for this and just let IE users go to the deuce.
Haha we can possibly debate this somewhere else, but it is exactly unsemantic. It’s the entire definition of unsemantic.
The #top and #bottom div contain nothing but an <img> tag, to an image that’s not content related, but simply a slice of a background image. If they wanted to use a sliced image, at least make it a background-image and not an embedded image tag. That would appease the semantics gods slightly.
But in all, they have absolutely no reason to be in the html except for design purposes. A good designer simply shouldn’t have to do that.
It also saddens me more because the rest of the site isn’t too poorly coded, and the aesthetics are generally pleasing!
Most definitely. It’s unbelievable that IE was still trying to catch up to implementing all of CSS2.1. I don’t remember who coined it first, but as designers we must not be afraid to have websites appear different in different browsers.
One of my newest favorite quotes is from a sitepoint member, Michael Morris, who stated
Yeah, TBH I didn’t check whether they had used a bg image or not, and was basing my comments on a bg image, which I suggested the OP use.
Originally Posted by Michael Morris View Post
Personally I implement drop shadows with CSS these days and don’t use images. IE users can suffer a lesser experience for using a lesser browser. You don’t expect 2010 graphics out of your Playstation 2? Don’t expect 2010 effects out of your 2002 browser either.
Yep, the problem with that of course is the clients who deman the site look the same in all browsers. 
Could I use this and place an “if statement” for IE and also put a background image code for IE?
Yes, or you could use a bit of JavaScript to help IE along.
Definitely. IMO that’s a proper use of conditional stylesheets. Although in this case, if you’ve got a >90% Javascript enabled audience, I would use CSSPIE.
I used your code for the wrap:
.wrap {
width: 960px;
background-color: #EAEAEA;
-moz-box-shadow: 0 0 15px black;
-webkit-box-shadow: 0 0 15px black;
box-shadow: 0 0 15px black;
margin: 10px auto;
}
I tried this “if statement” for IE and the result was the same.
CSS:
.ie-shadow {
display:none /* Makes the special shadow not display in IE */
}
<!--[if IE]>
.ie-shadow {
display: block;
position: absolute;
top: 5px;
left: 5px;
width: 825px;
z-index: 1;
background: #000;
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='15', MakeShadow='true', ShadowOpacity='0.40');
}
<![endif]-->
Script:
<script language="JavaScript" type="text/JavaScript">
function refa(){
h=document.getElementById('wrap').offsetHeight;
document.getElementById('ie-shadow').style.height=h;
}
onload=refa
</script>
My friend gave me this code from the notsoboringwebsite:
#wrap {
background: url("images/bg.gif") repeat-y scroll center center #8F8E8E;
margin: 0 auto;
padding: 0;
width: 990px;
}
using this image:
Any help would be greatly appreciated!
Thanks
Is this in an internal stylesheet that you placed the <!–[if IE]> tags?
They should only be used in the HTML document. If they are placed into an external stylesheet, they will not work.
Can you copy/paste the full HTML, CSS, and provide a link to a live version?
Because I’m confused about what you are doing default and what you are trying to use IE.
Here is a link to the site:
There are still a lot of bugs to fix.
And yes, the <!–[if IE]> were the external style sheet. I will try placing them into the html document.
So, place them in the head of your document, under the other styles. I may be missing something, but what’s the JavaScript for? I wouldn’t think you’d need that.
Do I take the “if statements” in the screen.css and place them in the <style> tag on the index.html?
I don’t know if I need the javascript, a friend of mine put it in there for me?
I apologize for my ignorance, this is all new to me.
Yes, take them out of the style sheet and place them in the head of your document. You should end up with something like this:
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen,projection,tv" />
<link rel="stylesheet" type="text/css" href="css/screen.css" media="screen,projection,tv" />
[COLOR="Red"]<!--[if IE]><link rel="stylesheet" type="text/css" href="css/ie.css"><![endif]-->[/COLOR]
Then you put any IE styles in a separate style sheet in the CSS folder (in the example above it’s called ie.css).
this isn’t the only approach, but it’s very standard.
Thank you for your help. I’m still having problems with rendering the code properly in IE. I placed the IE in their own css file and placed the link you provided. I think my problem is within my <body> tag, but I can’t figure out how to place both wraps in the <div>. I am working locally on the file, the live link is not updated. I also removed the javascript.
CSS for ie.css:
.wrap {
width: 825px;
background-color:#C8C8C8;
-moz-box-shadow: 0 0 15px black;
-webkit-box-shadow: 0 0 15px black;
box-shadow: 0 0 15px black;
margin: 10px auto;
}
.ie-shadow {
display: block;
position: absolute;
top: 5px;
left: 5px;
width: 825px;
z-index: 1;
background: #000;
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='15', MakeShadow='true', ShadowOpacity='0.40');
}
HTML in body:
<body>
<div id="center"><div class="wrap"><div class="wrap ie-shadow">
...
...
...
</div></div></div>
When I use the code above, the entire content in the body disappears and only a shadow displays? It also floats to the left?
Firstly, there’s no need to put any styles that are in you main style sheet into the ie.css file, so remove the .wrap styles (unless there’s anything unique to IE in ther). (Of course, IE won’t understand the -moz and -webkit stuff anyway.)
Next, you’ve got a div with class=“wrap”, and inside that another div with class=“wrap”. I would expect that to cause a lot of troubles. Remove “wrap” from the inner div, and to be honest I would remove any class that’s just for IE, so remove ie-shadow too.
These IE styles are just for IE, so you can just feed extra styles for “wrap” just to IE via the IE only style sheet. Don’t have any special code in the HTML at all for IE.