clip

Browser Internet Explorer Netscape Opera Safari Firefox
Version 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Supported Yes Yes Yes Yes Yes Yes Errors Yes Yes Yes Yes Yes Yes Yes Yes Yes

Short information
CSS CSS2
Default value auto
Inherited No
Applied To block and interchangeable elements
HTML analog No
Reference to specification http://www.w3.org/TR/CSS21/visufx.html#propdef-clip

Description
This parameter determines an element positioning area. The element contents will be indicated in this area. Everything in that area will be cut and invisible. A rectangle is only one accessed area form at that moment. The parameter В«clipВ» works only for absolutely positioned elements.

Syntax

clip: rect(Y1, X1, Y2, X2) | auto

Arguments
Distance from element border to cutting area is used as arguments in that case. This distance is specified in CSS items, such as pixels (px), percent (%) etc. If you want an area border does not change, you should determine the parameter В«autoВ». Other variants are given below.


Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>clip</title>
  <style type="text/css">
  #layer {
   position: absolute; /* Absolute  positioning*/
   clip: rect(40px, auto, auto, 40px); /* Hide part of the text */
   width: 200px; /* Block width */
   color: white; /* Text color */
   background: #7f4c3e; /* Background color */
   border: 1px solid black; /* Frame parameters */
   padding: 10px; /* Areas around the text */
  }
  </style>
  </head> 
  <body> 
 
  <div id="layer">
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
   nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. 
   Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit 
   lobortis nisl ut aliquip ex ea commodo consequat.</p>
  </div>
 
 </body>
</html>

The result of this example is shown on the figure 2


Object model

[window.]document.getElementById("elementID").style.clip

Remark
The browser Opera 7 (from version 8 it is otherwise) hides only the block element's content and background and the frame remain invariable. The result of this example in Opera 7 is shown on the figure 3.


Other browsers image the example in another way. The browser Firefox hides not only the text but also background and the frame. It is shown on the figure 4.