Change the Visibility Level of Html Elements using CSS Transparency

on 2011/04/30 6:11 AM stored in: Uncategorized and tagged:

Introduction to Transparency in CSS

CSS allows you to make any element with background color or image transparent with its opacity and filter alpha attributes. Once the transparent level is defined user will see the element in a different visibility level. You have to specify both opacity and filter attributes at the same time considering the browser compatibility.

Opacity is supported by Firefox and it allows you to define a value between 0.0 and 1.0 (Ex: 0.3,0.4..etc). Value 0 is the highest transparent level and user will rarely see the element in this level. Value 1 is the lowest transparency level and element will be shown in normal way.

filter alpha is supported by Internet Explorer and allows you to define a value between 0 and 100. 0 is the highest transparency and 100 is the lowest transparency respectively.

CSS Code for Transparent Elements with Firefox

CSS Code for Transparent Elements with Internet Explorer

How to Make a Transparent Background Image

Using new CSS3 attributes now you can make background images or any part of a image transparent without using design tools such as photoshop. Create a style for the html element and use the background-image property to define the background image. Then define the transparency level for the image.

Normal Background Image

Transparent Background Image

Half Transparent Image

Create Color Bars using CSS Transparency

You can create a simple color bar to display the difference in transparent levels using different opacity values.

Normal

Opacity 0.9

Opacity 0.8

Opacity 0.7

Opacity 0.6

Opacity 0.5

Opacity 0.4

Opacity 0.3

Opacity 0.2

Opacity 0.1

        

                                Normal
        
        

                                Opacity 0.9
        
        

                                Opacity 0.8
        
        

                                Opacity 0.7
        
        

                                Opacity 0.6
        
        

                                Opacity 0.5
        
        

                                Opacity 0.4
        
        

                                Opacity 0.3
        
        

                                Opacity 0.2
        
        

                                Opacity 0.1

Download Css Transparent/Opacity Examples

Download Css Transparency Examples