visufx.html

CSS lets learn this step by step...

<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td><a href="visufx.html#value-def-shape" class="noxref"><span class="value-inst-shape">&lt;shape&gt;</span></a> | auto | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>Initial:</em>&nbsp;&nbsp;<td>auto
<tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>block-level and
replaced elements
<tr valign=baseline><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
<tr valign=baseline><td><em>Percentages:</em>&nbsp;&nbsp;<td>N/A
<tr valign=baseline><td><em>Media:</em>&nbsp;&nbsp;<td><a href="media.html#visual-media-group" class="noxref">visual</a>
</table>
</dl>
</div>


<P>The 'clip' property applies to elements that have a <a href="visufx.html#propdef-overflow" class="noxref"><span
class="propinst-overflow">'overflow'</span></a> property with a value
other than 'visible'. Values have the following meanings:</p>

<dl>
<dt><strong>auto</strong>
<dd>The clipping region has the same size and location
as the element's box(es).

<dt><span class="index-def" title="&lt;shape&gt;::definition of"><a
name="value-def-shape"
class="value-def"><strong>&lt;shape&gt;</strong></a></span>

<dd>In CSS2, the only valid &lt;shape&gt; value is:
rect (<a href="visufx.html#value-def-top" class="noxref"><span
class="value-inst-top">&lt;top&gt;</span></a> <a href="visufx.html#value-def-right" class="noxref"><span
class="value-inst-right">&lt;right&gt;</span></a> <a href="visufx.html#value-def-bottom" class="noxref"><span
class="value-inst-bottom">&lt;bottom&gt;</span></a> <a href="visufx.html#value-def-left" class="noxref"><span
class="value-inst-left">&lt;left&gt;</span></a>)

where <a href="visufx.html#value-def-top" class="noxref"><span class="value-inst-top">&lt;top&gt;</span></a>, <a href="visufx.html#value-def-bottom" class="noxref"><span
class="value-inst-bottom">&lt;bottom&gt;</span></a> <a href="visufx.html#value-def-right" class="noxref"><span
class="value-inst-right">&lt;right&gt;</span></a>, and <a href="visufx.html#value-def-left" class="noxref"><span
class="value-inst-left">&lt;left&gt;</span></a> specify offsets from the
respective sides of the box.

<P><span class="index-def" title="&lt;top&gt;::definition of"><a
name="value-def-top" class="value-def">&lt;top&gt;</a></span>, <span
class="index-def" title="&lt;right&gt;::definition of"><a
name="value-def-right" class="value-def">&lt;right&gt;</a></span>,
<span class="index-def" title="&lt;bottom&gt;::definition of"><a
name="value-def-bottom" class="value-def">&lt;bottom&gt;</a></span>,
and <span class="index-def" title="&lt;left&gt;::definition of"><a
name="value-def-left" class="value-def">&lt;left&gt;</a></span> may
either have a <a href="syndata.html#value-def-length" class="noxref"><span class="value-inst-length">&lt;length&gt;</span></a>
value or 'auto'.  Negative lengths are permitted. The value 'auto'
means that a given edge of the clipping region will be the same as the
edge of the element's generated box (i.e., 'auto' means the same as '0'.)

<P>When coordinates are rounded to pixel coordinates, care should be
taken that no pixels remain visible when &lt;left&gt; + &lt;right&gt;
is equal to the element's width (or &lt;top&gt; + &lt;bottom&gt;
equals the element's height), and conversely that no pixels remain
hidden when these values are 0.
</dl>

<P>The element's ancestors may also have clipping regions (in case
their <a href="visufx.html#propdef-overflow" class="noxref"><span class="propinst-overflow">'overflow'</span></a> property is
not 'visible'); what is rendered is the intersection of the various
clipping regions.

<P>If the clipping region exceeds the bounds of the UA's
document window, content may be clipped to that window by the
native operating environment.

<div class="example"><P style="display:none">Example(s):</P><P>
The following two rules:</P>
<PRE>
P { clip: rect(5px, 10px, 10px, 5px); }
P { clip: rect(5px, -5px, 10px, 5px); }
</PRE>

<P>will create the rectangular clipping regions delimited
by the dashed lines in the following illustrations:</p>

<div class="figure">
<P><IMG src="images/clip.gif" alt="Two clipping regions"><SPAN class="dlink">&nbsp;&nbsp;&nbsp;<A name="img-clip" href="images/longdesc/clip-desc.html" title="Long description for example of clipping region">[D]</A></SPAN></p>
</div>
</div>

<div class="note"><P>
<em><strong>Note.</strong>
In CSS2, all clipping regions are rectangular. We anticipate
future extensions to permit non-rectangular clipping.
</em>
</div>

<H2>11.2 <a name="visibility">Visibility</a>: the <a href="visufx.html#propdef-visibility" class="noxref"><span
class="propinst-visibility">'visibility'</span></a> property</H2>

<div class="propdef">
<dl><dt>
<span class="index-def" title="'visibility'"><a name="propdef-visibility" class="propdef-title"><strong>'visibility'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td>visible | hidden | collapse | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>Initial:</em>&nbsp;&nbsp;<td>inherit
<tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>all elements
<tr valign=baseline><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
<tr valign=baseline><td><em>Percentages:</em>&nbsp;&nbsp;<td>N/A
<tr valign=baseline><td><em>Media:</em>&nbsp;&nbsp;<td><a href="media.html#visual-media-group" class="noxref">visual</a>
</table>
</dl>
</div>


<p>The <a href="visufx.html#propdef-visibility" class="noxref"><span class="propinst-visibility">'visibility'</span></a> property
specifies whether the boxes generated by an element are
rendered. Invisible boxes still affect layout (set the <a href="visuren.html#propdef-display" class="noxref"><span
class="propinst-display">'display'</span></a> property to 'none' to
suppress box generation altogether).  Values have the following
meanings:</p>

<dl>
<dt><strong>visible</strong>
<dd>The generated box is visible. 
<dt><strong>hidden</strong>
<dd>The generated box is invisible (fully transparent), but still
affects layout.
<dt><strong>collapse</strong>
<dd>Please consult the section on 
<a href="tables.html#dynamic-effects">dynamic row and column
effects</a> in tables. If used on elements other than rows or columns,
'collapse' has the same meaning as 'hidden'.
</dl>

<P>This property may be used in conjunction with scripts to create
dynamic effects.

<div class="html-example"><P> In the following example, pressing
either form button invokes a user-defined script function that causes
the corresponding box to become visible and the other to be
hidden. Since these boxes have the same size and position, the effect
is that one replaces the other. (The script code is in a hypothetical
script language. It may or may not have any effect in a CSS-capable
UA.)

<pre>
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
&lt;HTML&gt;
&lt;HEAD&gt;
&lt;STYLE type=&quot;text/css&quot;&gt;
&lt;!--
   #container1 { position: absolute; 
                 top: 2in; left: 2in; width: 2in }
   #container2 { position: absolute; 
                 top: 2in; left: 2in; width: 2in;
                 visibility: hidden; }
--&gt;
&lt;/STYLE&gt;
&lt;/HEAD&gt;
&lt;BODY&gt;
&lt;P&gt;Choose a suspect:&lt;/P&gt;
&lt;DIV id="container1"&gt;
   &lt;IMG alt="Al Capone" 
        width="100" height="100" 
        src="suspect1.jpg"&gt;
   &lt;P&gt;Name: Al Capone&lt;/P&gt;
   &lt;P&gt;Residence: Chicago&lt;/P&gt;
&lt;/DIV&gt;

&lt;DIV id="container2"&gt;
   &lt;IMG alt="Lucky Luciano" 
        width="100" height="100" 
        src="suspect2.jpg"&gt;
   &lt;P&gt;Name: Lucky Luciano&lt;/P&gt;
   &lt;P&gt;Residence: New York&lt;/P&gt;
&lt;/DIV&gt;

&lt;FORM method="post" 
      action="http://www.suspect.org/process-bums"&gt;
   &lt;P&gt;
   &lt;INPUT name="Capone" type="button" 
          value="Capone" 
          onclick='show("container1");hide("container2")'&gt;
   &lt;INPUT name="Luciano" type="button" 
          value="Luciano" 
          onclick='show("container2");hide("container1")'&gt;
&lt;/FORM&gt;
&lt;/BODY&gt;
&lt;/HTML&gt;
</pre>

</div>
<hr class="navbar">

<div class="navbar" align="center">
<p><a href="visudet.html">previous</a> &nbsp;
<a href="generate.html">next</a> &nbsp;
<a href="cover.html#minitoc">contents</a> &nbsp;
<a href="propidx.html">properties</a> &nbsp;
<a href="indexlist.html">index</a> &nbsp;
</div>
</body>
</html>