Re: [css-d] workaround to inherited opacity
Hi all, you could feed PNGs to Opera, FF2 and to IE7 with conditional commenting Just a further comment. I have put together a version using PNG32, which works with FF, IE7, Opera. I plan on adding a conditional style sheet for IE7 that swaps out the PNG32 for JPG or other IE6-friendly graphic format. (Since the PNG32s are specified as background-images in the CSS, the usual IE6 filter trick won't do.) Here's what it looks like right now... http://winningsportsclub.com/preview/concept2a.html Rob Emenecker @ Hairy Dog Digital www.hairydogdigital.com Please note: Return e-mail messages are only accepted from discussion groups that this e-mail address subscribes to. All other messages are automatically deleted. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] workaround to inherited opacity
Hi all, Thank you for your insightful comments. At the moment I'm leaning towards using small background PNG32s in the DIVs for the transparency effect, with a conditional style sheet for IE6 that uses alternate background images. Best, Rob Rob Emenecker @ Hairy Dog Digital www.hairydogdigital.com Please note: Return e-mail messages are only accepted from discussion groups that this e-mail address subscribes to. All other messages are automatically deleted. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] workaround to inherited opacity
Hi Bill (and Al), Whenever you expose IE7 to a filter you kill font-smoothing. This is a great approach, but the font-smoothing will be an issue. ...Rob Rob Emenecker @ Hairy Dog Digital www.hairydogdigital.com Please note: Return e-mail messages are only accepted from discussion groups that this e-mail address subscribes to. All other messages are automatically deleted. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] workaround to inherited opacity
On Thu, Sep 18, 2008 at 3:06 PM, Rob Emenecker [EMAIL PROTECTED] wrote: Hi all, I have a project where client wants a semi-opaque border on both a masthead and a content area of their page. The masthead and content areas are both contained in DIVs that center left-to-right over a tiled background. I am trying to figure out an effective workaround the issue of opacity inheritance, so that I can get the visual appearance of an 100 OPAQUE masthead DIV nested in a semi-opaque DIV. Here is an example link: http://www.winningsportsclub.com/preview/concept2a.html The Winning Sports Club has to sit on top of the semi-transparent DIV. What is the best way to go about achieving this effect? (I'm trying to avoid falling back on overlapping AP divs, if possible.) ...Rob As far as I've ever been able to figure out, a transparent PNG will only serve best. Mind you, this effect will fail in IE6, although the opacity would fail in the first place there, also. In short, it's behaving as intended (as far as I know). Every child element still has an opacity of 1, but that is considered to be full opacity from what is inherited. I hope I made that sound right. -- -Jack Timmons http://www.trotlc.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] workaround to inherited opacity
Rob Emenecker wrote: I have a project where client wants a semi-opaque border on both a masthead and a content area of their page. The masthead and content areas are both contained in DIVs that center left-to-right over a tiled background. I am trying to figure out an effective workaround the issue of opacity inheritance, so that I can get the visual appearance of an 100 OPAQUE masthead DIV nested in a semi-opaque DIV. The Winning Sports Club has to sit on top of the semi-transparent DIV. What is the best way to go about achieving this effect? (I'm trying to avoid Hi Rob, In the past, I've used a combination of RGBA, IE's gradient filter and PNGs (for Opera and FF2) to achieve this effect. Hedger Wang has a similar experiment out there somewhere on the same thing. Here's my experiment with it: http://www.webdevelopedia.com/better_opacity.html and http://theholiergrail.com/sandbox/rgba-cross-browser.php Hope it helps. --Bill -- ~~~ Bill Brown, MacNimble.com :: From dot concept to dot com since 1999 WebDevelopedia.com, TheHolierGrail.com, Cyber-Sandbox.com, Anytowne.com The intuitive mind is a sacred gift and the rational mind is a faithful servant. We have created a society that honors the servant and has forgotten the gift. -- Albert Einstein ~~~ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] workaround to inherited opacity
From: Bill Brown [EMAIL PROTECTED] In the past, I've used a combination of RGBA, IE's gradient filter and PNGs (for Opera and FF2) to achieve this effect. Hedger Wang has a similar experiment out there somewhere on the same thing. Here's my experiment with it: http://www.webdevelopedia.com/better_opacity.html and http://theholiergrail.com/sandbox/rgba-cross-browser.php Not good. Whenever you expose IE7 to a filter you kill font-smoothing. That's a showstopper. Best to go purely with PNGs for IE7 and forget about older browsers in the name of progressive enhancement. -- Al Sparber - PVII http://www.projectseven.com Fully Automated Menu Systems | Galleries | Widgets http://www.projectseven.com/go/Elevators __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] workaround to inherited opacity
Al Sparber wrote:
From: Bill Brown [EMAIL PROTECTED]
Not good. Whenever you expose IE7 to a filter you kill font-smoothing.
That's a showstopper. Best to go purely with PNGs for IE7 and forget about
older browsers in the name of progressive enhancement.
Not good? Seems harsh. It's a workable solution in some cases, to be
sure, don't you think? IE7 is the only browser in my testing which
garbles the ClearTyping on filtered elements...the others seem fine. So,
you could feed PNGs to Opera, FF2 and to IE7 with conditional commenting
if you were hung up on the ClearTyping.
I don't use Windows, but when I do, I find ClearTyping to be just awful
so I disable it anyway. You could also disable ClearTyping on your site
completely (call it: for consistency's sake) by using this:
body{filter:none}
Personally, I don't think it's a show stopper, but I can see from this
post (and your other posts on the net about the subject) that you do.
S'all good. I was just offering up my experience, even as not good as
it is.
Thanks.
--Bill
--
~~~
Bill Brown, MacNimble.com :: From dot concept to dot com since 1999
WebDevelopedia.com, TheHolierGrail.com, Cyber-Sandbox.com, Anytowne.com
The intuitive mind is a sacred gift and the rational mind is a
faithful servant. We have created a society that honors the servant and
has forgotten the gift. -- Albert Einstein
~~~
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] workaround to inherited opacity
From: Bill Brown [EMAIL PROTECTED] Al Sparber wrote: From: Bill Brown [EMAIL PROTECTED] Not good. Whenever you expose IE7 to a filter you kill font-smoothing. That's a showstopper. Best to go purely with PNGs for IE7 and forget about older browsers in the name of progressive enhancement. Not good? Seems harsh. Hi Bill, I apologize if I came off as harsh. I was stating a point in a direct manner. In any event, I was merely trying to offer a different perspective for the original poster. It would seem, however, that this is off-topic for this list and so the discussion should end - at least it will for me :-) Cheers, -- Al Sparber - PVII http://www.projectseven.com Fully Automated Menu Systems | Galleries | Widgets http://www.projectseven.com/go/Elevators __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] workaround to inherited opacity
On Sep 19, 2008, at 12:01 PM, Bill Brown wrote: So, you could feed PNGs to Opera, FF2 and to IE7 with conditional commenting if you were hung up on the ClearTyping There is not even a need to conditional commenting, just use a background image instead of using a data:uri like yo do now. Hide it from IE 6 (attribute selectors would do) - which has very poor support of transparent png. [*] if transparency is critical, of course. Philippe --- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
