Graphic Design shadow to enhance presentation of images.
Graphic Design shadow to enhance presentation of images.

Web Design - Tips, Tricks and Programmng

New CSS3 Feature - background rgba

Return to Forum Home Page

Forum

Return to Topic

Return to Topic

Login to Forum

Login to Forum

Register to access Forum

Register to access Forum

Previous Thread Return to Topic Next Thread
Author Message

17 Designs

17 Designs

Date Joined:
Jan 19, 2010

Posts:
66

Posted: Wed Jun 13, 2012 08:47 AM

Subject: New CSS3 Feature - background rgba

Adding transparent backgrounds has always been difficult to achieve using CSS. The code is involved and not only does the background change transparency but so does the content.

In your CSS file, here was the old way of creating a transparent background:

div.transparent-background {
filter: alpha(opacity=75);
-moz-opacity: 0.75;
-khtml-opacity: 0.75;
opacity: 0.75;
}

Using this DIV statement your background changes 75% and so does your content.

Through the employed of z-index layers and absolute / relative positioing you can overcome this issue by nesting DIV statements. However, the coding is even more involved.

<div class="dotted-box">
<div class="dotted-box-background"> </div>
<div class="dotted-box-contents">

</div>
</div>


The CSS needed...
div.dotted-box {
border: 1px solid #6ccef5;
position: relative;
width: 100%;
margin: 0 0 0 0;
padding: 10px 10px 0 10px;
}
div.dotted-box-background {
background: rgb(57, 73, 159);
width: 100%;
height: 100%;
filter: alpha(opacity=35); /* IE's opacity*/
left: 0px;
opacity: 0.35;
position: absolute;
top: 0px;
z-index: 99; /* Place background below */
}
div.dotted-box-contents {
background-color: transparent;
width: 100%;
height: 100%;
position: relative;
z-index: 101; /* Place contents above background */
}

That's why we really LOVE the new CSS3 feature background rgba. Here's how simple it is to make a transparent background using CSS:

div.transparent-box {
float: left;
width: 400px;
display: block;
border: 1px solid #6ccef5;
background: rgba(57, 73, 159, 0.75); /* Add a background using HEX color values for Red, Green, Blue followed by a change in opacity */
}

The beauty of this CSS DIV statement is only the transparent box changes opacity and not the content.

Return to Forum Home Page

Forum

Return to Topic

Return to Topic

Login to Forum

Login to Forum

Register to access Forum

Register to access Forum