On 10/20/2011 11:04 PM, Elli Vizcaino wrote:
On 10/20/11 12:28 PM, Elli Vizcaino wrote:
What I'm getting at is, if a box element gets an opacity property with
a value of 0.5 for a semi transparent effect, do child elements such as text
then display in the browser at that same semi-transparent value?
Yes. The better approach is to use rgba colors for elements containing
text. That way only the box is affected and the text (or any other child
elements) remain unaffected.
RGBA stands for red, green, blue, and alpha. So this declaration renders
a box 80% opaque, while stuff inside the box is fully opaque:
#elli-box {
background-color: black;
background: rgba(255,255,255,.8);
}
The background-color property is a fallback for older browsers lacking
support for RGBA.
255,255,255 is white
0,0,0 is black
Most code editors now have the ability to let you easily set colors like
this.
Here is a quick example:
http://www.projectseven.com/csslab/css3/rgba/quick-test.htm
The styles used on the example are:
#elli-box {
background-color: #3CF;
background: rgba(51,204,255,.8);
/*Light Blue*/
}
And some design extras:
.elli-styles {
padding: 40px;
width: 400px;
font-size: 14px;
line-height: 1.5;
border-radius: 11px;
box-shadow: inset 0px 0px 40px #0080AA;
border: 2px solid #FFF;
}
--
Al Sparber - PVII
http://www.projectseven.com
The Finest Dreamweaver Menus | Galleries | Widgets
Since 1998
______________________________________________________________________
css-discuss [css-d@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/
