Enterprise Software

Hide and clip positioned content

CSS2 allows you to add special effects to your pages with clip, overflow, and visibility features. Here's how.

By Matt Rotter, Charity Kahn, and Paul Anderson

CSS2's clip, overflow, and visibility features make it easy to add special effects to your pages. The clip property lets you reveal overlapped objects, and the overflow property lets you specify what happens to objects that don't fit into a boundary box with a set height and width. The visibility property lets you make objects invisible—it's a great way to have an object flow around something that's seemingly not there.

In the example below, we've created a span element that calls the hidden class, which uses the visibility property to hide the text. You won't see that text in a browser, but you'll notice that the line that follows it makes room for it on the screen. The next element calls the overflow class, which, naturally, employs the overflow property. The tag's bounding box is smaller than its text, so the text is cut off. The last two elements demonstrate clipping. The last object is placed directly on top of the one before it, but it's clipped to a smaller size; thus, the previous one shows through.

<HTML>
<HEAD>
<STYLE type="text/css">
<!—
.hidden { position: relative;
     visibility: hidden
     }

.overflow { position: absolute;
     top: 210px;
     left: 60px;
     width: 40px;
     height: 40px;
     background-color: yellow;
     overflow: hidden
     }

.plain { position: absolute;
     top: 200px;
     left: 200px;
     width: 150px;
     height: 150px;
     background-color: #eeeeee;
     }

.clip { position: absolute;
     top: 200px;
     left: 200px;
     width: 150px;
     height: 150px;
     color: yellow;
     background-color: blue;
     clip: rect(25px 125px 125px 25px);
     }
—>
</STYLE>
</HEAD>
<BODY>
<SPAN class="hidden">This text is invisible on the page,</SPAN>
but this text is affected by the invisible item's flow.

<DIV class="overflow">This is way too much text for the little box that we've designated. The overflow property will hide it.</DIV>

<DIV class="plain">This text is covered by the blue square that follows. But because the square is clipped, some of this text shows through.</DIV>

<DIV class="clip">This text is yellow on a blue square, but it's getting cut off by clipping.</DIV>

</BODY>
</HTML>

Note: The examples on this page work only with browsers of version 4.0 and later.

Matt Rotter and Charity Kahn are software engineers for CNET.com.

Paul Anderson is an associate technical editor for CNET Builder.com.

Editor's Picks

Free Newsletters, In your Inbox