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 ...
Get Painting the Web now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
