Fun with transparent colors by CSS

Posted: March 16, 2011 in CSS, HTML
Tags: ,

As a web designer you might get into situations where you need to make elemens transparent so that they can be seen through each other. An example is a vertical menu that roll down over the rest of the page. It looks really nice if it is transparent so that you can still see the background for instance. A way to do this is simply to set a color for that element (div) and make it transperent to some degree.

Here is an example on how to put several layers on an image with different colors on top of each other where each layer is transperent to different degrees.

Use css-classes that looks something like this. The first one contains the background color and is on the back. The other are nested inside it.

.divImage {
background: url(images/someImage.jpg) no-repeat;
height:300px;
width:300px;
}

.div1 {
background: #FF0000;
height:200px;
width:200px;
-moz-opacity:0.4;
opacity: 0.4;
filter:alpha(opacity=40);
}

.div2 {
background: #00FF00;
height:100px;
width:100px;
-moz-opacity:0.6;   /*For Mozila Firefox*/
opacity: 0.6;
filter:alpha(opacity=60);  /*hack code for IE */
}

.div3 {
background: #0000FF;
height:50px;
width:50px;
-moz-opacity:0.6; /*For Mozila Firefox*/
opacity: 0.6;
filter:alpha(opacity=60);  /*hack code for IE*/
}

So the HTML-code would simply look something like this to get a similar behaviour as in the example above:

<div class=”divImage”>
<div class=”div1″>
<div class=”div2″>
<div class=”div3″></div>
</div>
</div>
</div>

Enjoy 😉

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s