Pro HTML5 and CSS3 Design Patterns

CHAPTER 6 ■ BOX MODELS PROPERTIES

Visibility

HTML

<h1>Visibility</h1>

<p>There is hidden content here: <span class="hidden">CAN YOU SEE ME NOW?</span>

You can't see it, because it’s styled with <code>visibility:hidden</code>,

but you can see where it would have been rendered. </p>

<p>There is visible content here: <span class="visible">CAN YOU SEE ME NOW?</span> You can see

it, because it’s styled with <code>visibility:visible</code>. </p>

CSS

span { padding:4px; background-color:white;

border-left:1px solid gray; border-right:2px solid black;

border-top:1px solid gray; border-bottom:2px solid black; }

p { background-color:gold; padding:10px; line-height:1.5em; }

*.hidden { visibility:hidden; }

*.visible { visibility:visible; }

span:hover { visibility:hidden; }