advanced code snippet search

We Recommend

CSS: The Definitive Guide CSS: The Definitive Guide
Provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover Internet Explorer 7, Microsoft's vastly improved browser, this new edition includes content on positioning, text wrapping (nowrap), lists and generated content, table layout, user interface, paged media, and more.

Posted By

Ashung on 07/09/08


Tagged

css opacity


Versions (?)


Who likes this?

6 people have marked this snippet as a favorite

Wiederkehr
SpinZ
withremote
wizard04
heinz1959
hannizkaos


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.

Plain TextExpand 
  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!

You need to login to post a comment.