Re: [css-d] shadow over gradient
At 4/26/2007 02:35 PM, Shelly wrote: >http://anekostudios.com/test/partial_ss.jpg >This one is how I have it currently, with transparent PNG images. I >like how this looks, and if I *have* to use a script to get it to work >in IE6 and lower, then I will - but I'd *really* like to avoid it. ... >So I'm just wondering if there's a way to accomplish this without a >script, and with CSS? Shelly, you don't need javascript to work with PNGs IE6, you can use Microsoft's proprietary AlphaImageLoader filter in your stylesheet. Here's a site (in development) where we use pngs to drop a shadow on a textured background on every page: http://tm-athletics.com/ (The content column and the page background image are both centered, so widen & shrink your browser window to see the shadow move against the background.) You can find explanations in the CSS-D archives: http://css-discuss.incutio.com/?page=AlphaBetaPngSupport Also try googling PNG +CSS Here are some other PNG support links I've bookmarked: http://homepage.ntlworld.com/bobosola/ http://positioniseverything.net/articles/dropshadows.html http://www.daltonlp.com/view/217 http://www.playingwithfire.com/test/pngbehavior/demo.html I'm stunned to discover that all of my AlphaImageLoader bookmarks in Microsoft's MSDN are broken [1] or come up as 'page not found' [2]. Is it possible that they figure that since they've released IE7 developers no longer need to support earlier versions of IE? Or maybe they've moved them someplace their own search engine can't find them? [1] http://msdn2.microsoft.com/en-us/library/ms532969.aspx [2] http://msdn.microsoft.com/workshop/author/filter/reference/filters/alphaimageloader.asp Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.com __ 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/
Re: [css-d] shadow over gradient
Sure! I've cut out a bunch of the site - I have the guy's logo up and stuff, and I know he doesn't want to be "known" yet. So I'm just sending the "pertinent" information ;) http://anekostudios.com/test/partial_ss.jpg This one is how I have it currently, with transparent PNG images. I like how this looks, and if I *have* to use a script to get it to work in IE6 and lower, then I will - but I'd *really* like to avoid it. http://anekostudios.com/test/partial_ss2.jpg This is using the gif. You can see the "edge" created in the lighter section. When you get towards the top, it looks similar, except it's lighter to the edge. So I'm just wondering if there's a way to accomplish this without a script, and with CSS? Any help is appreciated :) ~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/
Re: [css-d] shadow over gradient
I've got a few ideas but I'd like to see a screen shot before I opened my big mouth! :-O Is that do-able? Thanks - JJ On 4/26/07, Shelly <[EMAIL PROTECTED]> wrote: > 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/ > __ 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/
