Special Offer - Get $90 Discount and Host Your Dream Web Site @ Dreamhost for 1 Year Click Here. Promo Code SLJ345
Back To Top
WordPress Web Application Development
Develop Powerfull Web Applications Using Cutting Edge WordPress Development Techniques

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

Leave a Reply

Follow Us On Facebook