You can create partially transparent elements on your web page by two methods. In first method use pre set opacity transparent PNG images. First method is not that much cross-browser compatible, but by using second method you can create translucent elements.

CSS contains a specific property named as “opacity”, which controls transparency of an element. If you want to ensure cross browser compatibility of your partial translucent elements you can replicate opacity property with the help of own browser specific properties. Opacity is widely implemented part of CSS color module. Generally, if you apply transparency effect to your background then it may become hard to read content. Sometimes getting the desired effect in CSS is harder than one might think. Opacity is not supported by Internet Explorer for which we can use the property ‘alpha filter’ implemented by the Microsoft.

Code to make your HTML simply semi-transparent,

#alpha {

background: url(bgimg.jpg) no-repeat 0 0;

filter: alpha(opacity=25);

-moz-opacity: 0.3;

-khtml-opacity: 0.3;

opacity: 0.3;

}

 

CSS Opacity Problem:

If we add child element in html element, the code will get affected. The problem with PNG images is, beside a superfluous HTTP request, that images are way, way larger in file size than one or two lines of CSS code.

Solution:

Visualize the relationship between elements using absolute positioning or not? This hint will solve your problem.

Absolutely positioned element is out of document flow, if changes were made to the page or content then it may cause layout issues. The CSS attribute -moz-opacity seems to be no longer appropriated. Supporting CSS standard is significantly benefited that all designers can get from Firefox, whilst PNG with alpha channel and even RGBa are also displayed accurately in Firefox. Apply the transparency only to the desired part of the element is to set the relevant colour using a colour value that includes an alpha channel. Make the PNG background with the desire opacity amount applied to use for the CSS supported browsers.

/* In CSS file */

#transbox {

 

background-image: url(‘images/bgimg.png’); /* The PNG image 1x1px, colour #ffffff, opacity 50% */

background-repeat: repeat;

 

}

 

/* In HTML file */

< ! — [if IE 6] >

< style type=”text/css”>

 

#transbox {background-image:none; background-color:#ffffff; filter:alpha(opacity=70);}

#transbox div {filter:alpha(opacity=100); position: relative;}

 

< / style >

< ! [endif] –>

Terms used here:

Opacity (also thought of as an alpha value measured from 0.0 – 1.0, the former being invisible)

RGBa (measured as red, green, blue values from 0 – 255 with an alpha ranging from 0.0 to 1.0)

HSLa (hue is measured in degrees [from  0 – 360], saturation and lightness are measured from 0% – 100%, and the alpha value ranges from 0.0 to 1.0)

CSS code example:

.boxrgba {

width:200px;

height:200px;

background:rgba(0,0,0,0.4);

color:rgba(255,255,255,1);

}

 

.boxhsla {

width:200px;

height:200px;

background:hsla(0,25%,35%,0.4);

color:hsla(41,34%,24%,1);

}

 

Web Browser Support

RGBa support is available in:

 

Firefox 3+

Safari 2+

Opera 10

Filters in Internet Explorer are available since Internet Explorer 5.5.

CSS offers complete flexibility to the developer when it comes to adapting the size and level of transparency. To make it powerful and flexible solution you can easily animate or manipulate it with JavaScript. You should implement appropriate designing approach and simplicity in coding style to improve your website’s user experience.

For more reading about technology news in singapore and seo to online marketing do view more about other pages.

Written by Sourabh Bhunje

Sourabh Bhunje, B.E. IT from Pune University. Currently Working at Techliebe. Professional Skills: Programming - Software & Mobile, Web & Graphic Design, Localization, Content Writing, Sub-Titling etc. http://techliebe.com/about-us

This article has 2 comments

Leave a Comment