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

<style>
#target {
   margin: 10; padding: 10;
   transition: filter 1.5s;
   filter: none;
}
table.demo {
   width: 80%; height: 450; 
   box-shadow: -8px 8px 8px gray;
}
select {
   padding: 3px; font-size: 12pt;
   background-color: wheat;
}
</style>

<script language="JavaScript">
<!--
function change ( ) {
   var target = document.getElementById ( "target" );
   target.style.filter = selector.value;
   setTimeout( ( ) => {
      target.style.filter = "none";
   }, 2400 );
}
//-->
</script>
</head>

<body>
<div class="header"><h2>CSS <b>Filter Functions</b> Demo</h2></div>
<hr size=1 width=92%>

<center>

<h4>This example illustrates the effects of passing different values<br>
to the available CSS <b>filter functions</b>.</h4>

<table class="demo">
<tr align="center">
<td width="60%" style="background: linear-gradient(skyblue, palegoldenrod, skyblue)">
   <img id="target" src="/shared/images/sistine.jpg"></td>
</td>
<td width="40%" style="background: linear-gradient(#e66465, #9198e5);">
   <select id="selector" size=15 onchange="change ( )">
      <option selected>Choose a function</option>
      <option>blur( 1mm )</option>
      <option>blur( 1pc )</option>
      <option>blur( 1pt )</option>
      <option>blur( 1px )</option>
      <option>blur( 1em )</option>
      <option>blur( 1ex )</option>
      <option>brightness( 0.5 )</option>
      <option>brightness( 1 )</option>
      <option>brightness( 1.5 )</option>
      <option>brightness( 30% )</option>
      <option>brightness( 60% )</option>
      <option>brightness( 120% )</option>
      <option>contrast( 25% )</option>
      <option>contrast( 0.5 )</option>
      <option>contrast( 75% )</option>
      <option>contrast( 1.5 )</option>
      <option>contrast( 175% )</option>
      <option>drop-Shadow( 8px 8px 4px dimgray )</option>
      <option>drop-Shadow( -8px 8px 4px dimgray )</option>
      <option>drop-Shadow( 8px -8px 4px dimgray )</option>
      <option>drop-Shadow( -8px -8px 4px dimgray )</option>
      <option>grayscale( 0.5 )</option>
      <option>grayscale( 75% )</option>
      <option>grayscale( 1 )</option>
      <option>grayscale( 125% )</option>
      <option>hue-rotate( 45deg )</option>
      <option>hue-rotate( -45deg )</option>
      <option>hue-rotate( 90deg )</option>
      <option>hue-rotate( -90deg )</option>
      <option>hue-rotate( 180deg )</option>
      <option>hue-rotate( -180deg )</option>
      <option>invert( 0.25 )</option>
      <option>invert( 0.75 )</option>
      <option>invert( 30% )</option>
      <option>invert( 60% )</option>
      <option>invert( 100% )</option>
      <option>opacity( 0 )</option>
      <option>opacity( 0.25 )</option>
      <option>opacity( 0.5 )</option>
      <option>opacity( 1.5 )</option>
      <option>saturate( 0 )</option>
      <option>saturate( 0.25 )</option>
      <option>saturate( 75% )</option>
      <option>saturate( 1.5 )</option>
      <option>saturate( 200% )</option>
      <option>saturate( 3.5 )</option>
      <option>sepia( 0 )</option>
      <option>sepia( 0.5 )</option>
      <option>sepia( 75% )</option>
      <option>sepia( 100% )</option>
   </select>
</td>
</tr>
</table>

<p class="small"><b>Please wait for the image to revert to its inital state before applying another choice.</b></p>

</center>

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

</body>
</html>