Hey all - I had a question for you. I'm working on a site that needs an interesting effect - but I can't seem to achieve it properly with a transparent .gif. I was wondering if there was some alternate method of doing this - hopefully using CSS. (I've heard you can do this using transparent .pngs and a javascript for IE6 and below, but I'd like to avoid that if I could.)
What I've got is - this is gonna be interesting - a vertical gradient background. It has "repeat-x" set to it, so once it runs the height of the gradient, it just goes to the regular background color. Oh yes, and the vertical gradient has 33 degree stripes. ;) Now I have a centered content box (of static width) that is white, with a 1px border. I need this box to have a drop-shadow effect all the way around it. (Did I mention the header has rounded corners? Oo..can I *get* any more complicated? LOL) Top, bottom , left right - all needs a drop shadow. My issue is that I can get the header to do what I need just fine. but the left/right/bottom areas are a little weird. Because of the gradient, the transparent gif is making things look a little odd - when it overlays the darker color at the top, you can see the lighter edging of the shadow. When you get down to the light color at the bottom, the shadow looks abruptly cut off. Right below the header though, it looks great ;) Would anyone know of a CSS-based method I could use to make a drop shadow overlay a gradient background with as little "noticability" as possible? I'd appreciate any pointers! Thanks :) ~Shelly ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
