CSS opacity

Sorry for the newbie question but...

I am using an html w/css template from dreamweaver. I have a seamless tiled
background with little designs on it. I would like to have the main content
area be a solid color (say gray or something) but with the opacity turned down
so that you can slightly see the tiled background through it. I know I can prob
do this with a png or something with photoshop and transparency but is there a
way to do it in dreamweaver? I didn't see that option in the CSS options...

Thanks!

..oO(blue_vision)

I am using an html w/css template from dreamweaver. I have a seamless tiled
background with little designs on it. I would like to have the main content
area be a solid color (say gray or something) but with the opacity turned down
so that you can slightly see the tiled background through it. I know I can prob
do this with a png or something with photoshop and transparency but is there a
way to do it in dreamweaver? I didn't see that option in the CSS options...

You can do it with CSS 3 and the 'opacity' property. This will work in
all modern browsers (Opera, FF, ...). IE doesn't support it and requires
a proprietary filter (google for examples if necessary). The downside is
that this will not only affect the background, but the entire element -
the text will become transparent as well. This will affect legibility,
so you shouldn't go below 85-90% opacity.

If you want just the background to fade with the text staying fully
opaque, use a PNG background image (IE6 still requires a fix, though).

Micha

If you want just the background to fade with the text staying fully
opaque, use a PNG background image (IE6 still requires a fix, though).

You could also use a nested container arrangement couldn't you?

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
==================


"Michael Fesser" <netizen (AT) gmx (DOT) de> wrote

.oO(blue_vision)

I am using an html w/css template from dreamweaver. I have a seamless
tiled
background with little designs on it. I would like to have the main
content
area be a solid color (say gray or something) but with the opacity turned
down
so that you can slightly see the tiled background through it. I know I can
prob
do this with a png or something with photoshop and transparency but is
there a
way to do it in dreamweaver? I didn't see that option in the CSS
options...

You can do it with CSS 3 and the 'opacity' property. This will work in
all modern browsers (Opera, FF, ...). IE doesn't support it and requires
a proprietary filter (google for examples if necessary). The downside is
that this will not only affect the background, but the entire element -
the text will become transparent as well. This will affect legibility,
so you shouldn't go below 85-90% opacity.

If you want just the background to fade with the text staying fully
opaque, use a PNG background image (IE6 still requires a fix, though).

Micha

On Sat, 28 Feb 2009 07:38:28 -0500, "Murray *ACE*"
<forums (AT) HAHAgreat-web-sights (DOT) com> wrote:

You could also use a nested container arrangement couldn't you?

The nested container would also be less than 100% opaque.

Gary

If the content were in the ancestor, and the opacity were in the descendent,
that would not be the case, right?

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
==================


"Gary White" <reply (AT) newsgroup (DOT) please> wrote

On Sat, 28 Feb 2009 07:38:28 -0500, "Murray *ACE*"
forums (AT) HAHAgreat-web-sights (DOT) com> wrote:

You could also use a nested container arrangement couldn't you?

The nested container would also be less than 100% opaque.

Gary

On Sat, 28 Feb 2009 10:56:37 -0500, "Murray *ACE*"
<forums (AT) HAHAgreat-web-sights (DOT) com> wrote:

If the content were in the ancestor, and the opacity were in the descendent,
that would not be the case, right?

That's true, but the problem would be that the only way to get the
descendent behind the content would be to use absolute positioning. Then
you run into sizing issues. How would you get the background layer to size
correctly to match the content? I think Micha's suggestion is the far
better and least convoluted way to accomplish it.

Gary

I see your objection and fold. 8)

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
==================


"Gary White" <reply (AT) newsgroup (DOT) please> wrote

On Sat, 28 Feb 2009 10:56:37 -0500, "Murray *ACE*"
forums (AT) HAHAgreat-web-sights (DOT) com> wrote:

If the content were in the ancestor, and the opacity were in the
descendent,
that would not be the case, right?

That's true, but the problem would be that the only way to get the
descendent behind the content would be to use absolute positioning. Then
you run into sizing issues. How would you get the background layer to size
correctly to match the content? I think Micha's suggestion is the far
better and least convoluted way to accomplish it.

Gary

"Gary White" <reply (AT) newsgroup (DOT) please> wrote

On Sat, 28 Feb 2009 10:56:37 -0500, "Murray *ACE*"
forums (AT) HAHAgreat-web-sights (DOT) com> wrote:

If the content were in the ancestor, and the opacity were in the
descendent,
that would not be the case, right?

That's true, but the problem would be that the only way to get the
descendent behind the content would be to use absolute positioning. Then
you run into sizing issues. How would you get the background layer to size
correctly to match the content? I think Micha's suggestion is the far
better and least convoluted way to accomplish it.

I use something else. It's a mix of data URI, CSS3 and filter (but no PNG,
hence there is no HTTP request).
I believe it is Hedger Wang who came up with this technique [1], but Bill
Brown has also something up [2].

[1] http://www.hedgerwow.com/360/dhtml/rgba/demo.php
[2] http://theholiergrail.com/sandbox/rgba-cross-browser.php

data URI scheme is very cool, it lets you include data stuff inline. You
guys should check it out.

--
Thierry | Adobe Community Expert | Articles and Tutorials ::
http://www.TJKDesign.com/go/?0

Spry Widgets | http://labs.adobe.com/technologies/spry/samples/ [click on
"Widgets"]
Spry Menu Bar samples |
http://labs.adobe.com/technologies/spry/samples/menubar/MenuBarSample.html
--

"Thierry" <thierry (AT) invalid (DOT) com> wrote

I use something else. It's a mix of data URI, CSS3 and filter (but no PNG,
hence there is no HTTP request).
I believe it is Hedger Wang who came up with this technique [1], but Bill
Brown has also something up [2].

[1] http://www.hedgerwow.com/360/dhtml/rgba/demo.php
[2] http://theholiergrail.com/sandbox/rgba-cross-browser.php

data URI scheme is very cool, it lets you include data stuff inline. You
guys should check it out.

It's impressive, but kills clear type in IE7, which is a deal breaker for
me.


--
Al Sparber - PVII
http://www.projectseven.com
The Finest Dreamweaver Menus | Galleries | Widgets
http://www.projectseven.com/go/pop
The Ultimate DW Menu System

"Al Sparber - PVII" <pviiteam (AT) projectSPAseven (DOT) com> wrote

"Thierry" <thierry (AT) invalid (DOT) com> wrote in message
news:gobqhb$bc9$1 (AT) forums (DOT) macromedia.com...
I use something else. It's a mix of data URI, CSS3 and filter (but no
PNG, hence there is no HTTP request).
I believe it is Hedger Wang who came up with this technique [1], but Bill
Brown has also something up [2].

[1] http://www.hedgerwow.com/360/dhtml/rgba/demo.php
[2] http://theholiergrail.com/sandbox/rgba-cross-browser.php

data URI scheme is very cool, it lets you include data stuff inline. You
guys should check it out.


It's impressive, but kills clear type in IE7, which is a deal breaker for
me.

Interesting you mention this as I had never thought of using Clear Type. I
just turned it on now and it does seem to look a little bit better.
I guess it is easier to tell the difference when you're used to it. Is it
mostly better for small text? It looks like small text looks a bit smaller
than it used to, but at the same time it seems more legible. Interesting..



--
Thierry | Adobe Community Expert | Articles and Tutorials ::
http://www.TJKDesign.com/go/?0

Spry Widgets | http://labs.adobe.com/technologies/spry/samples/ [click on
"Widgets"]
Spry Menu Bar samples |
http://labs.adobe.com/technologies/spry/samples/menubar/MenuBarSample.html
--