Re: [css-d] Opacity question...
On 5/24/10 5:44 PM, Philippe Wittenbergh wrote:
On May 25, 2010, at 5:26 AM, Christopher Schmitt wrote:
div {background-color: rgba(255,255,255,0.5);
That won't work in IE/Win, I believe, but it will in pretty much
anything else of recent vintage. Alternatively, you could create a
smallish PNG which is all white and has 50% opacity and drop it into
the background of the div. That will work in all current browsers
including IE/Win.
Also, you can use IE filter for gradients, which allow for opacity:
div {
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#6600,
endColorstr=#6600 ); }
#66FF00 would be the hexadecimal color. Then the last hexadecimal value
would be the opacity of the color.
With the caveat(s) that:
1. the element must have 'hasLayout' [1] set to true for those filters to
work correctly most of the time
2. those filters affect the display of text / font smoothing, and not exactly
as an improvement, esp on Win XP.
3. those filters may affect how other -descendent- element act, see [2] for
example
(I prefer the semi transparent png file my self, and opaque backgrounds for
old browsers such as IE 6).
[1] http://www.satzansatz.de/cssd/onhavinglayout.html
[2] http://www.satzansatz.de/cssd/tmp/alphatransparency.html
Philippe
Here's a tool I'm developing that automates the process for all the
methods discussed. It's a first draft, but it may be of some help:
http://webwiz.robinshosting.com/temp/easy-see-thru-backgrounds/
Cordially,
David
--
__
css-discuss [cs...@lists.css-discuss.org]
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/
[css-d] Opacity question...
Hello! I am wrestling with setting the opacity on background colors on a div to expose a pattern behind it. However I can't figure out how to keep the elements contained with in it at 100% opacity. Please see this page to see what I mean: http://em-w.com/portPages/port_homeandhearth1.html I would like the main image and the text to remain a solid color, while the white background has a 50% opacity level. Is there a way to do this? Thanks in advance for any advice! - Matthew __ css-discuss [cs...@lists.css-discuss.org] 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] Opacity question...
At 3:34 PM -0400 5/24/10, Matthew wrote:
I am wrestling with setting the opacity on background colors on a
div to expose a pattern behind it. However I can't figure out how to
keep the elements contained with in it at 100% opacity. Please see
this page to see what I mean:
http://em-w.com/portPages/port_homeandhearth1.html
I would like the main image and the text to remain a solid color,
while the white background has a 50% opacity level.
div {background-color: rgba(255,255,255,0.5);
That won't work in IE/Win, I believe, but it will in pretty much
anything else of recent vintage. Alternatively, you could create a
smallish PNG which is all white and has 50% opacity and drop it into
the background of the div. That will work in all current browsers
including IE/Win.
--
Eric A. Meyer (http://meyerweb.com/eric/), List Chaperone
CSS is much too interesting and elegant to be not taken seriously.
-- Martina Kosloff (http://mako4css.com/)
__
css-discuss [cs...@lists.css-discuss.org]
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] Opacity question...
On May 24, 2010, at 3:39 PM, Eric A. Meyer wrote:
At 3:34 PM -0400 5/24/10, Matthew wrote:
I am wrestling with setting the opacity on background colors on a div to
expose a pattern behind it. However I can't figure out how to keep the
elements contained with in it at 100% opacity. Please see this page to see
what I mean:
http://em-w.com/portPages/port_homeandhearth1.html
I would like the main image and the text to remain a solid color, while the
white background has a 50% opacity level.
div {background-color: rgba(255,255,255,0.5);
That won't work in IE/Win, I believe, but it will in pretty much anything
else of recent vintage. Alternatively, you could create a smallish PNG which
is all white and has 50% opacity and drop it into the background of the div.
That will work in all current browsers including IE/Win.
--
Eric A. Meyer (http://meyerweb.com/eric/), List Chaperone
CSS is much too interesting and elegant to be not taken seriously.
-- Martina Kosloff (http://mako4css.com/)
Alternatively, you could create a smallish PNG which is all white and has 50%
opacity and drop it into the background of the div. That will work in all
current browsers including IE/Win.
This did the trick! Thank you!
__
css-discuss [cs...@lists.css-discuss.org]
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] Opacity question...
On May 24, 2010, at 2:39 PM, Eric A. Meyer wrote:
At 3:34 PM -0400 5/24/10, Matthew wrote:
I am wrestling with setting the opacity on background colors on a
div to expose a pattern behind it. However I can't figure out how to
keep the elements contained with in it at 100% opacity. Please see
this page to see what I mean:
http://em-w.com/portPages/port_homeandhearth1.html
I would like the main image and the text to remain a solid color,
while the white background has a 50% opacity level.
div {background-color: rgba(255,255,255,0.5);
That won't work in IE/Win, I believe, but it will in pretty much
anything else of recent vintage. Alternatively, you could create a
smallish PNG which is all white and has 50% opacity and drop it into
the background of the div. That will work in all current browsers
including IE/Win.
Also, you can use IE filter for gradients, which allow for opacity:
div { filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#6600,
endColorstr=#6600 ); }
#66FF00 would be the hexadecimal color. Then the last hexadecimal value would
be the opacity of the color.
Hope this helps!
Best,
Christopher Schmitt
http://www.christopherschmitt.com/
Web Design Specialist
--
Attend the online CSS3 + July 4 + HTML5 Presentation
http://css3flag.eventbrite.com/
Free on July 1, 2010
__
css-discuss [cs...@lists.css-discuss.org]
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] Opacity question...
On May 24, 2010, at 3:26 PM, Christopher Schmitt wrote:
On May 24, 2010, at 2:39 PM, Eric A. Meyer wrote:
At 3:34 PM -0400 5/24/10, Matthew wrote:
I am wrestling with setting the opacity on background colors on a
div to expose a pattern behind it. However I can't figure out how to
keep the elements contained with in it at 100% opacity. Please see
this page to see what I mean:
http://em-w.com/portPages/port_homeandhearth1.html
I would like the main image and the text to remain a solid color,
while the white background has a 50% opacity level.
div {background-color: rgba(255,255,255,0.5);
That won't work in IE/Win, I believe, but it will in pretty much
anything else of recent vintage. Alternatively, you could create a
smallish PNG which is all white and has 50% opacity and drop it into
the background of the div. That will work in all current browsers
including IE/Win.
Also, you can use IE filter for gradients, which allow for opacity:
div {
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#6600,
endColorstr=#6600 ); }
Should be #00 is the color and the first hexadecimal value is the color
opacity.
Thanks to Claude for the reminder :)
Best,
Christopher Schmitt
http://www.christopherschmitt.com/
Web Design Specialist
--
Attend the online CSS3 + July 4 + HTML5 Presentation
http://css3flag.eventbrite.com/
Free on July 1, 2010
__
css-discuss [cs...@lists.css-discuss.org]
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] Opacity question...
On May 25, 2010, at 5:26 AM, Christopher Schmitt wrote:
div {background-color: rgba(255,255,255,0.5);
That won't work in IE/Win, I believe, but it will in pretty much
anything else of recent vintage. Alternatively, you could create a
smallish PNG which is all white and has 50% opacity and drop it into
the background of the div. That will work in all current browsers
including IE/Win.
Also, you can use IE filter for gradients, which allow for opacity:
div {
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#6600,
endColorstr=#6600 ); }
#66FF00 would be the hexadecimal color. Then the last hexadecimal value would
be the opacity of the color.
With the caveat(s) that:
1. the element must have 'hasLayout' [1] set to true for those filters to work
correctly most of the time
2. those filters affect the display of text / font smoothing, and not exactly
as an improvement, esp on Win XP.
3. those filters may affect how other -descendent- element act, see [2] for
example
(I prefer the semi transparent png file my self, and opaque backgrounds for old
browsers such as IE 6).
[1] http://www.satzansatz.de/cssd/onhavinglayout.html
[2] http://www.satzansatz.de/cssd/tmp/alphatransparency.html
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
__
css-discuss [cs...@lists.css-discuss.org]
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/
