Post
Ask Question

Image Filters using HTML

Introduction

 
Filters give a great variety of visual effects in web pages dynamically. Image Filters are of three types:
  1. Gray-The Gray Filter applies a grayscale image effect in which all color is stripped from the image and all that remains in brightness data. 
  2. Xray-The Xray Filter applies an Xray effect which is just an inversion of the Gray effect.
  3. Invert-The Invert Filter applies a Negative Image effect ie: dark areas become light and light areas become dark.
File name must be given with STYLE attribute as follows:
  1. STYLE="filter:gray"  
  2. For example, look at following code snippets:  
  3. <Html>  
  4. <Body>  
  5.  <br>  
  6.  <br>  
  7.  <table>  
  8.   <tr>  
  9.    <td>  
  10.     <img src="F:\photo.gif" >  
  11.    </td>  
  12.   <td>  
  13.     <img src="F:\photo.gif" STYLE="filter:gray">  
  14.   </td>  
  15.   <td>  
  16.     <img src="F:\photo.gif" STYLE="filter:xray">  
  17.   </td>  
  18.   <td>  
  19.     <img src="F:\photo.gif" STYLE="filter:invert">  
  20.   </td>  
  21.  </tr>  
  22.  <tr align="center"><td>Normal</td>  
  23.  <td>Gray</td>  
  24.  <td>XRay</td>  
  25.  <td>Invert</td>  
  26.  </tr>  
  27. </table>  
  28. </Body>  
  29. </Html> 
Output
 
 
1.gif


Similar Articles