CSS transparency is really popular among web designers nowadays. If you’re in the process of creating a website, or even modernizing your website, you should definitely explore this nifty CSS coding ability that came out with CSS3.

Here are a few ways you can incorporate transparent elements into your website. 

Creating a transparent background

Creating a transparent background

The best way to manipulate transparency in the background is to toy around with RGBA colors. CSS allows you the option to specify colors using Red, Green, Blue, and Alpha-Transparency values. Add the following code to the appropriate place in your style.css or source file:

#div {
background: rgb(54, 25, 25); /* Fall-back for browsers that don’t support rgba */
background: rgba(54, 25, 25, .5);
}

Toy around with the values until you achieve the correct color / opacity.

Making an image permanently transparent

Making an image permanently transparent

Put this code into the appropriate place in your style.css file:

img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}

Make changes only to the numbers in bold. The opacity property can take a value from 0.0 – 1.0. The lower the value, the more transparent the image. Internet Explorer 8 and earlier versions use filter:alpha(opacity=x). The x can take a value from 0 – 100. The lower the value, the more transparent the image. It has to match the opacity in the first line. For example, if you go with 0.6 transparency, make the alpha opacity 60.

Creating a transparent hover effect

Creating a transparent hover effect

Put the following code into the appropriate place in your style.css file.

img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}

img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}

Advertisements

Make changes only to the numbers in bold. The opacity property can take a value from 0.0 – 1.0. The lower the value, the more transparent the image. Internet Explorer 8 and earlier versions use filter:alpha(opacity=x). The x can take a value from 0 – 100. The lower the value, the more transparent the image. It has to match the opacity in the first line. For example, if you go with 0.6 transparency, make the alpha opacity 60.

If you want your image to appear regular and become transparent when hovered over, simply change the opacity in the first section (img) to 1.0/100 and decide on the opacity value in the (img:hover) section.

Adding a transparent box

Adding a transparent box

Tweak the appropriate place in your style.css (or source) file to include the following code:

<html>
<head>
<style>
div.background
{
width:500px;
height:250px;
background:url(klematis.jpg) repeat;
border:2px solid black;
}
div.transbox
{
width:400px;
height:180px;
margin:30px 50px;
background-color:#ffffff;
border:1px solid black;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p
{
margin:30px 40px;
font-weight:bold;
color:#000000;
}
</style>
</head>

<body>

<div>
<div>
<p>I am adding text in the transparent box.
I am adding text in the transparent box.
I am adding text in the transparent box.
I am adding text in the transparent box.
I am adding text in the transparent box.
</p>
</div>
</div>

</body>
</html>

Make changes only to the values in bold. The div element (class =”background”) has a fixed height and width. Find the appropriate size for your website’s or header’s background. Next, take a look at the smaller div (class=”transbox”) and decide on the size, color, border, transparency, and text.

Keep in mind that the opacity property can take a value from 0.0 – 1.0. The lower the value, the more transparent the image. Internet Explorer 8 and earlier versions use filter:alpha(opacity=x). The x can take a value from 0 – 100. The lower the value, the more transparent the image. It has to match the opacity in the first line. For example, if you go with 0.6 transparency, make the alpha opacity 60.

This guest article was written by Simon (better known as SimonTheSorcerer online). He is working for Jangomail a mass email service provider. You can check out more of his work at his online marketing blog.