<html>
<head>
<title>Abakada CSS Demo: Filters Demo</title>
<link rel="stylesheet" href="/shared/netdemos.css">
<style type="text/css">
<!--
#desc { font: bold 13pt arial; padding: 5; color: lime; background: steelblue }
#fcode { font-size: smaller; color: ivory }
#flink { font: bold 9pt arial; color: navy; cursor: hand }
-->
</style>
</head>
<body>
<!-- #include virtual="~/shared/top.inc" -->
<div class="header"><h2>Abakada CSS Demo: Filters Demo</h2></div>
<hr size=1 width=92%>
<center>
<div id="desc">
Click on the links below to apply a filter and see the filter syntax.
<br>
<span id="fcode">no filter applied</span>
</div>
<table id="flink" cellpadding=10>
<tr>
<td onclick="applyFilter ( this.innerText )">alpha</td>
<td onclick="applyFilter ( this.innerText )">blur</td>
<td onclick="applyFilter ( this.innerText )">chroma</td>
<td onclick="applyFilter ( this.innerText )">dropShadow</td>
<td onclick="applyFilter ( this.innerText )">flipH</td>
<td onclick="applyFilter ( this.innerText )">flipV</td>
<td onclick="applyFilter ( this.innerText )">glow</td>
<td onclick="applyFilter ( this.innerText )">gray</td>
<td onclick="applyFilter ( this.innerText )">invert</td>
<td onclick="applyFilter ( this.innerText )">mask</td>
<td onclick="applyFilter ( this.innerText )">shadow</td>
<td onclick="applyFilter ( this.innerText )">wave</td>
<td onclick="applyFilter ( this.innerText )">xray</a></td>
</table>
<div style="width: 100%" id="theImg">
<p id="msg">Filters can be applied to almost any HTML object,
including text, images, and controls. </p>
<img width=191 height=197 src="../shared/images/filtdemo.gif" hspace=10 vspace=10>
<br>
<button onclick="applyFilter ( 'none' )">Clear Filter</button>
</div>
<script language="JavaScript">
<!--
function applyFilter ( filt ) {
switch ( filt ) {
case "alpha" :
theImg.style.filter = "alpha ( opacity=50 )";
desc.innerHTML = "Alpha: alters the opacity of an object, allowing it to blend with the background.<br><span id=fcode>filter: alpha ( opacity=50 )</span>";
break;
case "blur" :
theImg.style.filter = "blur ( direction=45, strength=5, add=0 )";
desc.innerHTML = "Motion Blur: blurs an object with the direction and strength specified.<br><span id=fcode>filter: blur ( direction=45, strength=5, add=0 )</span>";
break;
case "chroma" :
theImg.style.filter = "chroma ( color=black )";
desc.innerHTML = "Chroma Key: makes a specified color transparent.<br><span id=fcode>filter: chroma ( color=black )</span>";
break;
case "dropShadow" :
theImg.style.filter = "dropShadow ( offx=-4, offy=3, color=khaki )";
desc.innerHTML = "Drop Shadow: creates a shadow of the object at a specified x-y offset and color.<br><span id=fcode>filter: dropShadow ( offx=-4, offy=3, color=khaki )</span>";
break;
case "flipH" :
theImg.style.filter = "flipH ( )";
desc.innerHTML = "Flip Horizontal: flips the visible pixels in the horizontal axis.<br><span id=fcode>filter: flipH ( )</span>";
break;
case "flipV" :
theImg.style.filter = "flipV ( )";
desc.innerHTML = "Flip Vertical: flips the visible pixels in the vertical axis.<br><span id=fcode>filter: flipV ( )</span>";
break;
case "glow" :
theImg.style.filter = "glow ( strength=3, color=orange )";
desc.innerHTML = "Glow: creates a glow around the opaque pixels of an object.<br><span id=fcode>filter: glow ( strength=3, color=orange )</span>";
break;
case "gray" :
theImg.style.filter = "gray ( )";
desc.innerHTML = "Grayscale: converts the visible pixels to 256 shades of gray.<br><span id=fcode>filter: gray ( )</span>";
break;
case "invert" :
theImg.style.filter = "invert ( )";
desc.innerHTML = "Invert: maps the pixels to their opposite value in the color spectrum.<br><span id=fcode>filter: invert ( )</span>";
break;
case "mask" :
theImg.style.filter = "mask ( color=olive )";
desc.innerHTML = "Mask: turns transparent pixels to a specified color and opaque pixels transparent.<br><span id=fcode>filter: mask ( color=olive )</span>";
break;
case "shadow" :
theImg.style.filter = "shadow ( color=silver, direction=135 )";
desc.innerHTML = "Shadow: creates an attenuated shadow in the direction and color specified.<br><span id=fcode>filter: shadow ( color=silver, direction=135 )</span>";
break;
case "wave" :
theImg.style.filter = "wave ( freq=4, strength=9, phase=0, lightstrength=0, add=0 )";
desc.innerHTML = "Wave: applies a sine wave deformation to an object.<br><span id=fcode>filter: wave ( freq=4, strength=9, phase=0, lightstrength=0, add=0 )</span>";
break;
case "xray" :
theImg.style.filter = "xray ( )";
desc.innerHTML = "Xray: grayscales and flattens the color depth.<br><span id=fcode>filter: xray ( )</span>";
break;
case "none" :
theImg.style.filter = "";
desc.innerHTML = "Click on the links below to apply a filter and see the filter syntax.<br><span id=fcode>no filter applied</span>";
break;
}
}
// -->
</script>
</center>
<hr size=1 width=92%>
<!-- #include virtual="~/shared/viewsrc.inc" -->
</body>
</html>