Your Ad Here

advanced code snippet search

Posted By

Ashung on 07/09/08


Tagged

css opacity


Versions (?)

Who likes this?

7 people have marked this snippet as a favorite

Wiederkehr
SpinZ
withremote
wizard04
heinz1959
hannizkaos
robe


Useful CSS Opacity Rules

 / Published in: CSS
 

Browser Support: IE5.5, IE6, IE7, Firefox 1-3, Mozilla, Opera 8-9.5, Safari(Win,Mac), Knoqueror(Linux).

Use: Any Tag.

Expand | Embed | Plain Text 
  1. .opacity0  { opacity: 0;   -moz-opacity: 0;   filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);  zoom:1; }
  2. .opacity1  { opacity: 0.1; -moz-opacity: 0.1; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=10); zoom:1; }
  3. .opacity2  { opacity: 0.2; -moz-opacity: 0.2; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20); zoom:1; }
  4. .opacity3  { opacity: 0.3; -moz-opacity: 0.3; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30); zoom:1; }
  5. .opacity4  { opacity: 0.4; -moz-opacity: 0.4; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); zoom:1; }
  6. .opacity5  { opacity: 0.5; -moz-opacity: 0.5; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50); zoom:1; }
  7. .opacity6  { opacity: 0.6; -moz-opacity: 0.6; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60); zoom:1; }
  8. .opacity7  { opacity: 0.7; -moz-opacity: 0.7; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70); zoom:1; }
  9. .opacity8  { opacity: 0.8; -moz-opacity: 0.8; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80); zoom:1; }
  10. .opacity9  { opacity: 0.9; -moz-opacity: 0.9; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90); zoom:1; }
  11.  
  12. HTML EXAMPLE:
  13. <div class="anotherClassName opacity8">...</div>
  14.  
  15. <span class="anotherClassName opacity5">...</span>
  16.  
  17. <form action="" class="search">
  18.   <fieldset>
  19.     <legend>Search</legend>
  20.     <input type="text" class="search-text" />
  21.     <input type="submit" class="search-submit opacity0" value="Search" />
  22.   </fieldset>
  23. </form>

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: withremote on July 9, 2008

Awesome, I just used this!

Posted By: tknterry on July 28, 2009

I just used the following line from the snippets above for my website menu to be able to adjust the opacity on IE8. It works well. filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60); zoom:1;

Posted By: silviay on May 6, 2010

thank's so much :-*

You need to login to post a comment.