HighDots Forums  

CSS opacity

Macromedia Dreamweaver Macromedia Dreamweaver Discussions (macromedia.dreamweaver)


Discuss CSS opacity in the Macromedia Dreamweaver forum.

Reply
 
Thread Tools Display Modes
  #1  
Old   
blue_vision
 
Posts: n/a

Default CSS opacity - 02-27-2009 , 06:44 PM






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!




Reply With Quote
  #2  
Old   
Michael Fesser
 
Posts: n/a

Default Re: CSS opacity - 02-27-2009 , 06:56 PM






..oO(blue_vision)

Quote:
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


Reply With Quote
  #3  
Old   
Murray *ACE*
 
Posts: n/a

Default Re: CSS opacity - 02-28-2009 , 06:38 AM



Quote:
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

Quote:
.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


Reply With Quote
  #4  
Old   
Gary White
 
Posts: n/a

Default Re: CSS opacity - 02-28-2009 , 09:45 AM



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

Quote:
You could also use a nested container arrangement couldn't you?
The nested container would also be less than 100% opaque.

Gary


Reply With Quote
  #5  
Old   
Murray *ACE*
 
Posts: n/a

Default Re: CSS opacity - 02-28-2009 , 09:56 AM



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

Quote:
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


Reply With Quote
  #6  
Old   
Gary White
 
Posts: n/a

Default Re: CSS opacity - 02-28-2009 , 10:31 AM



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

Quote:
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


Reply With Quote
  #7  
Old   
Murray *ACE*
 
Posts: n/a

Default Re: CSS opacity - 02-28-2009 , 10:52 AM



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

Quote:
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


Reply With Quote
  #8  
Old   
Thierry
 
Posts: n/a

Default Re: CSS opacity - 02-28-2009 , 10:59 AM



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

Quote:
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/rg...ss-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/s...BarSample.html
--



Reply With Quote
  #9  
Old   
Al Sparber - PVII
 
Posts: n/a

Default Re: CSS opacity - 02-28-2009 , 11:05 AM



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

Quote:
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/rg...ss-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






Reply With Quote
  #10  
Old   
Thierry
 
Posts: n/a

Default Re: CSS opacity - 02-28-2009 , 11:39 AM






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

Quote:
"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/rg...ss-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/s...BarSample.html
--






Reply With Quote
Reply




Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off



Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.