Skip to Main Content
Painting the Web
book

Painting the Web

by Shelley Powers
May 2008
Beginner content levelBeginner
656 pages
17h 41m
English
O'Reilly Media, Inc.
Content preview from Painting the Web

Changing Class and Transparency

Opacity is sometimes overlooked when it comes to visual effects. Opacity can be a great way of indicating whether something is applicable, for example, to indicate whether a button is active or a link can be clicked. Opacity can be a great way to indicate whether something is applicable—whether a button is active or a link can be clicked, for example.

To demonstrate working with opacity, Example 10-7 shows a web page with several different chocolates, each with different ingredients. Along the top of the page are seven checkboxes associated with ingredients found in the candies: chocolate, berry, lemon, hazelnut, caramel, coffee, and sea salt. These same ingredients are also given as HTML classes to the div element containing each chocolate.

Checking one or more checkboxes highlights which chocolate has the ingredient. The application does this by de-emphasizing the chocolates that don't have the ingredient. The result is cumulative: a chocolate only has to match one of the checked options to be displayed with 100% opacity.

Example 10-7. Page with several chocolates, with ingredients listed as class names

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>A Taste Of</title> <meta http-equiv="X-UA-Compatible" content="IE=7"/> <link rel="stylesheet" href="taste.css" type="text/css" media="screen" /> <script type="text/javascript" src="taste.js"> </script> </head> <body> <form ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Start your free trial

You might also like

Reinventing the Organization for GenAI and LLMs

Reinventing the Organization for GenAI and LLMs

Ethan Mollick
Mastering PHP 7

Mastering PHP 7

Branko Ajzele

Publisher Resources

ISBN: 9780596515096Supplemental ContentErrata Page