clip.aspx font size:
View Sample
<html>
<head>
<title>Abakada CSS Demo: clip Attribute</title>
<link rel="stylesheet" href="/shared/netdemos.css">

<style type="text/css">
<!--
#theImg {
   position: absolute; visibility: hidden;
   left: 0; top: 0; width: 200; height: 200; cursor: hand }   
-->
</style>

<script language="JavaScript" src="center.js"></script>
</head>

<body onload="center ( 'theImg', 0, 20 )" onresize="setTimeout ( redraw, 1000 )">
<!-- #include virtual="~/shared/top.inc" -->

<div class="header"><h2>Abakada CSS Demo: clip Attribute</h2></div>
<hr size=1 width=92%>

<center>

   <h5>This example shows the effects of applying different values possible for the CSS <b>clip</b> style attribute.</h5>

   <p id="msg">Select from the clipping options below to see how the style is applied, <br>
      and note the resulting CSS syntax for the style declaration. </p>

   <div style="height: 200"><!-- spacer --></div>

   <img id="theImg" src="../shared/images/samp08.jpg" 
      height=200 width=200 border=0 alt="">

   <h4 id="theSyntax">Syntax { clip: rect ( auto ) }</h4>

   <table cellpadding=5>
   <caption>Select a clipping value</caption>
   <tr>
      <td><b>Top</b></td>
      <td><select name="cTop" id="cTop" onchange="chgProp ( this.value )">
         <option selected>auto
         <option>10
         <option>25
         <option>50
         <option>100
         <option>150
      </select></td>
      <td><b>Right</b></td>
      <td><select name="cRight" id="cRight" onchange="chgProp ( this.value )">
         <option selected>auto
         <option>10
         <option>25
         <option>50
         <option>100
         <option>150
      </select></td>
      <td><b>Bottom</b></td>
      <td><select name="cBottom" id="cBottom" onchange="chgProp ( this.value )">
         <option selected>auto
         <option>10
         <option>25
         <option>50
         <option>100
         <option>150
      </select></td>
      <td><b>Left</b></td>
      <td><select name="cLeft" id="cLeft" onchange="chgProp ( this.value )">
         <option selected>auto
         <option>10
         <option>25
         <option>50
         <option>100
         <option>150
      </select></td>
      <td><button onclick="reset ( )">Reset</button></td></tr>
   </table>

</center>

<script language="JavaScript">
<!--
var el = document.all ? document.all [ 'theImg' ] : 
   document.getElementById ( 'theImg' )
var synt = document.all ? document.all [ 'theSyntax' ] : 
   document.getElementById ( 'theSyntax' )

function chgProp ( ) {
   var vTop = cTop.options ( cTop.selectedIndex ).text;
   var vRight = cRight.options ( cRight.selectedIndex ).text;
   var vBottom = cBottom.options ( cBottom.selectedIndex ).text;
   var vLeft = cLeft.options ( cLeft.selectedIndex ).text;
   el.style.clip = "rect ( " + vTop + " " + vRight + " " + vBottom + " " + vLeft + " )";
   synt.innerText = "Syntax { clip: rect ( " + vTop + " " + vRight + " " + vBottom + " " + vLeft + " ) }";
}

function reset ( ) {
   cTop.options.selectedIndex = 0;
   cRight.options.selectedIndex = 0;
   cBottom.options.selectedIndex = 0;
   cLeft.options.selectedIndex = 0;
   el.style.clip = "rect ( auto )";
   synt.innerText = "Syntax { clip: rect ( auto ) }";
}
//-->
</script>

<hr size=1 width=92%>
<!-- #include virtual="~/shared/viewsrc.inc" -->

</body>
</html>