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/ -- __ 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 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
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 ~~~ div.transparent-bg { background: url(http://www.domain.tld/1px-99-50.png); background: rgba(153,153,153,0.5); } ~~~ The HTML: ~~~ I can has transparent background? Go Home. ~~~ 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. -- __ 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 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
On Wed, Feb 18, 2009 at 4:43 PM, Wade Smart 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/
[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/