Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

2. Hacking with Style > Hack 15. Make Elements Appear Transparent Without Alter...

Hack 15. Make Elements Appear Transparent Without Altering the Opacity

Opacity enables you to make items appear to be transparent, but it often comes with unexpected side effects, especially with nested items. CSS3’s introduction of alpha transparency gives you the freedom to use transparency without the side effects.

You can use transparency to give the illusion of depth in your design. Most commonly you would use transparency to mute the screen with an overlay, or add a drop shadow to a menu. Transparency gives the eye the impression of three-dimensional space within your application.

For many years, opacity was the primary mechanism used to provide transparency. This widely supported feature is present in virtually all browsers released in the past six years. You can add opacity to any element with the following attribute:


  

You are currently reading a PREVIEW of this book.

                                                                                                                    

Get instant access to over $1 million worth of books and videos.

  

Start a Free Trial


  
  • Safari Books Online
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint