I'm looking to do something like this:
Needs to be light-weight and compatible with IE6.
views:
63answers:
3
+3
A:
You need to do it all in Photoshop. Create the dropshadow with a distance of "0". Then save the white background with the drop shadow as a PNG with a transparent background. The shadow will fade into whatever body background you have. This is what we have done with our website
EDIT:
I missed the IE part
I suppose a different option could be that you use the (blue gradient) within the background image and save it as a JPEG. This means that your #Main-Wrapper width will be the width of the entire white background PLUS the dropshadow AND some of the blue-to-white gradient. This is going to be challenging in CSS because you cannot repeat it vertically due to the blue-to-white gradient background.
EDIT EDIT:
Further you can use an IE hack to show a background WITHOUT a drop shadow to anyone using IE6 and then use the Transparent PNG for everyone else who is using a browser worth using.
<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->
rockinthesixstring
2010-06-21 16:16:26
IE6 doesn't like transparent (as in, alpha-channel) PNGs...
Shog9
2010-06-21 16:17:39
@rockinthesixstring - is there any other way to get this without using PNG.
metal-gear-solid
2010-06-21 16:18:46
ah, missed the IE6 bit. But honestly... IE6? If ANY corporation is still supporting IE6, they need to be shoved (really hard) in a new direction.
rockinthesixstring
2010-06-21 16:19:05
@Shog9 - It doesn't *need* to be transparent, it can be a solid 1 layer image, it's background matching the rest of your site, and center it.
Nick Craver
2010-06-21 16:19:44
@metal-gear-solid it needs to be an image, otherwise the gradient will suck.
rockinthesixstring
2010-06-21 16:20:07
Dumb consumers still use IE6. Just do what @rockinthesixstring is saying, but don't use transparency. Have a gif/jpg for every piece of your site where you need a drop shadow. Yuck. Or use one of those IE6 png plugins http://www.twinhelix.com/css/iepngfix/
Stuart Branham
2010-06-21 16:21:12
FWIW, I consider this the most practical solution - if IE6 users aren't used to lousy rendering yet, they will be soon enough.
Shog9
2010-06-21 16:21:40
@Nick Craver - How it's possible without transparent PNG? background is fading to white.
metal-gear-solid
2010-06-21 16:21:46
I edited my answer above.
rockinthesixstring
2010-06-21 16:23:26
@metal-gear-solid - Larger background image :) I didn't say it's ideal, just possible. Want to support something that *doesn't* support standards? There's extra work, whether it's structure, image size, etc...you're making a compromise, because it doesn't support the method that works *everywhere* else.
Nick Craver
2010-06-21 16:25:25
@metal-gear-sold and @Nick Craver, an IE hack might be the solution. Just use a white background without the gradient for IE6 users and show the proper background to everyone else.
rockinthesixstring
2010-06-21 16:27:00
@Stuart B - +1 for iepngfix. Though not ideal... it's a great work around for obsolete IE browsers.
rockinthesixstring
2010-06-21 19:15:52
Is there any css 3 solution?
metal-gear-solid
2010-06-22 14:54:59
I don't think so. Are you absolutely tied down to having the drop shadow IN IE6?
rockinthesixstring
2010-06-22 16:22:00
A:
To add to the "make it in photoshop" answer, an alternative solution would be to use an IE PNG "fix". This makes translucent or transparent PNGs actually work somewhat in IE6. It's not perfect, but testing may show that it suits your needs.
Stuart Branham
2010-06-21 20:01:33
Heh, well... If you're gonna resort to using filters, you might as well just use the gradient filter and be done with it.
Shog9
2010-06-22 18:03:37