Home | | Internet Programming | HTML - Filters

Chapter: Web or internet Programming : Dynamic HTML

HTML - Filters

Flip filters: flipv and fliph , Image filters: invert, gray and xray

Filters

 

Flip filters: flipv and fliph

 

<head>

 

<title>The flip filter</title> <style type = "text/css">

 

body { background-color: #CCFFCC } table { font-size: 3em;

 

font-family: Arial, sans-serif; background-color: #FFCCCC; border-style: ridge ; border-collapse: collapse }

 

td { border-style: groove; padding: 1ex } </style>

 

</head>

<body>

 

<table>

<tr>

 

<!-- Filters are applied in style declarations -- >

<td style = "filter: fliph">Text</td>

<td>Text</td>

</tr>

 

<tr>

<!-- More than one filter can be applied at once --> 

<td style = "filter: flipv fliph">Text</td>

<td style = "filter: flipv">Text</td> </tr>

</table>

</body>

 

</html>


Creating Image masks

 

<head>

 

<title>Mask Filter</title> </head> <body>

 

<h1>Mask Filter</h1>

 

<!-- Filter parameters are specified in parentheses, . -->

<!-- in the form param1 = value1, param2 = value2, etc. -->

 

<div style = "position: absolute; top: 125; left: 20;

 filter: mask( color = #CCFFFF )">

<h1 style = "font-family: Courier, monospace">

 

AaBbCcDdEeFfGgHhIiJj<br /> KkLlMmNnOoPpQqRrSsTt </h1>

</div>

 

<img src = "gradient.gif" width = "400" height = "200" alt = "Image with Gradient Effect" />

</body>

</html>



Image filters: invert, gray and xray

 

<head>

 

<title>Misc. Image filters</title> <style type = "text/css">

 

.cap { font-weight: bold; background-color: #DDDDAA; text-align: center }

</style>

 

</head>

<body>

 

<table class = "cap"> <tr> <td>Normal</td> <td>Grayscale</td> </tr>

 

<tr>

 

<td><img src = "hc.jpg" alt = "normal scenic view" /></td>

 

<td><img src = "hc.jpg" style = "filter: gray" alt = "gray scenic view"/> </td>

</tr>

 

<tr>

<td>Xray</td>

 

<td>Invert</td>

</tr>

 

<tr>

 

<td><img src = "hc.jpg" style = "filter: xray" alt = "xray scenic view"/> </td>

 

<td><img src = "hc.jpg" style = "filter: invert" alt = "inverted scenic view"/> </td>

</tr>

</table>

</body>

</html>



Filter blendTrans

 

<head>

 

<title>Using blendTrans</title>

 

<script type = "text/javascript">

<!-- function blendOut()

{

 

textInput.filters( "blendTrans" ).apply(); textInput.style.visibility = "hidden"; textInput.filters( "blendTrans" ).play();

}

 

// -->

 </script>

</head>

<body>

 

<div id = "textInput" onclick = "blendOut()" style = "width: 300; filter: blendTrans( duration = 3 )">

<h1>Some fading text</h1>

</div>

 

</body>

</html>

 


Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail
Web or internet Programming : Dynamic HTML : HTML - Filters |


Privacy Policy, Terms and Conditions, DMCA Policy and Compliant

Copyright © 2018-2023 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.