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

3. Hover-Crafting with CSS3 > Simple and flexible hovering using opacity

Simple and flexible hovering using opacity

We’re constantly looking for solutions that save time and offer additional flexibility. This is precisely what CSS3 offers us in spades: the ability to achieve, in a few lines of code, what used to take more time and resources to create and maintain.

Yet another tool for the hover-crafting arsenal is the opacity property. As mentioned in Chapter 1, opacity is a CSS3 property that allows you to specify how opaque a given element is. Coupled with the aforementioned RGBA, opacity offers another method to add transparency to the designs we create for the web.

One of the ways I like to use opacity is to create simple and flexible hover states for hyperlinked graphics, using the variation in transparency to create multiple states from a single image. Add a CSS transition into the mix and you now have a wonderfully rich experience for linked graphics on the page that’s easy to maintain.


  

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