Re: [css-d] Transparent Rows
On 19/02/2009, at 1:02 PM, Bill Brown wrote: background: rgba(153,153,153,0.5); Ooooh ... rgba ... I like it. How well supported is the a (alpha)? KathyW. __ 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] Transparent Rows
Kathy Wheeler wrote: On 19/02/2009, at 1:02 PM, Bill Brown wrote: background: rgba(153,153,153,0.5); Ooooh ... rgba ... I like it. How well supported is the a (alpha)? http://css-tricks.com/rgba-browser-support/ -- !-- ! Bill Brown macnim...@gmail.com ! Web Developologist, WebDevelopedia.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/
[css-d] Transparent Rows
20090218 1829 GMT-5
Im editing a internal site for a client and they have this page where
they pull inventory and its very difficult to read. In the background
they have a faded company logo - it does not interfere with the viewing
- its focusing on each line of inventory.
I was just thinking about using a alternating gray and white line for
each row. What I immediately discovered was it really messes up the
background image.
What I was thinking was doing a transparent effect on each row.
.even {
background-color: #E0E0E0;
opacity:0.5;
filter: alpha(opacity=50);
}
That didnt work so my question is - can this ONLY work on a image and
now on a color?
Wade
--
Registered Linux User: #480675
Linux since June 2005
__
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] Transparent Rows
On Wed, Feb 18, 2009 at 4:43 PM, Wade Smart wadesm...@gmail.com wrote:
20090218 1829 GMT-5
Im editing a internal site for a client and they have this page where
they pull inventory and its very difficult to read. In the background
they have a faded company logo - it does not interfere with the viewing
- its focusing on each line of inventory.
I was just thinking about using a alternating gray and white line for
each row. What I immediately discovered was it really messes up the
background image.
What I was thinking was doing a transparent effect on each row.
.even {
background-color: #E0E0E0;
opacity:0.5;
filter: alpha(opacity=50);
}
That didnt work so my question is - can this ONLY work on a image and
now on a color?
Wade
I actually ran into this same problem earlier today. What a
coincidence. You can make two semitransparent PNGs (one white, one
gray), and use them as background images for the rows.
-Casey
__
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] Transparent Rows
Casey wrote:
On Wed, Feb 18, 2009 at 4:43 PM, Wade Smart wadesm...@gmail.com wrote:
20090218 1829 GMT-5
Im editing a internal site for a client and they have this page where
they pull inventory and its very difficult to read. In the background
they have a faded company logo - it does not interfere with the viewing
- its focusing on each line of inventory.
I was just thinking about using a alternating gray and white line for
each row. What I immediately discovered was it really messes up the
background image.
What I was thinking was doing a transparent effect on each row.
.even {
background-color: #E0E0E0;
opacity:0.5;
filter: alpha(opacity=50);
}
That didnt work so my question is - can this ONLY work on a image and
now on a color?
Wade
I actually ran into this same problem earlier today. What a
coincidence. You can make two semitransparent PNGs (one white, one
gray), and use them as background images for the rows.
-Casey
20090218 1905 GMT-5
I was actually just trying that out.
I figured out it was actually working in FF but not Opera - which is the
browser this company uses. Too bad though as it looked decent if FF.
:D
Wade
--
Registered Linux User: #480675
Linux since June 2005
__
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] Transparent Rows
Wade Smart wrote:
What I was thinking was doing a transparent effect on each row.
.even {
background-color: #E0E0E0;
opacity:0.5;
filter: alpha(opacity=50);
}
That didnt work so my question is - can this ONLY work on a image and
now on a color?
One solution I've used to achieve something similar looks like this:
The CSS
~~~
style type=text/css
div.transparent-bg
{
background: url(http://www.domain.tld/1px-99-50.png);
background: rgba(153,153,153,0.5);
}
/style
!--[if lt IE 7]style type=text/css
div.transparent-bg
{
background: transparent;
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr=#7799,
endColorstr=#7799);
zoom: 1;
}
/style![endif]--
~~~
The HTML:
~~~
div class='transparent-bg'
p
I can has transparent background?
a href='#home-menu'Go Home/a.
/p
/div
~~~
First, I set the background to a semi-transparent PNG [1]. Then, I
immediately override that setting with one for an RGBA background.
Browsers which recognize RGBA as a background-color setting will
override the previous background setting and apply only the RGBA background.
IE7 supports PNGs (more or less) so we leave it alone here. IE6 does
not, so we target it with conditional comments and use the proprietary
gradient filter to allow just the background to be semi-transparent
while leaving our text fully opaque. [2]
Anyway, hope it helps.
[1] data:uri images also work here,
if the CSS for IE6 is extended to include IE7.
[2] The caveat to using (any) filter is that Windows removes the
ClearType settings on blocks that use filtering, so your text
will look a little blockier in the filtered element, though not
in the children if I remember correctly.
--
!--
! Bill Brown macnim...@gmail.com
! Web Developologist, WebDevelopedia.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/
