The html sample code and the css code included in it are given below. The picture used in it is fd.jpg. Copy the code and name a picture fd.jpg to see the full effect
<!DOCTYPE HTML PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS filter effect.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
.alphas
{
filter:alpha(opacity=0,finishopacity=100,style=1,startx=0,starty=85,finishx=150,finishy=85);
}
.blurs
{
font-family:lucida handwirting italic;
font-size:72px;
font-style:bold;
color:#336600;
width:350px;/*This attribute is essential, otherwise the effect will not be visible*/
filter:blur(add=true,direction=90,strength=25);
}
.chromas
{
font-family:lucida handwirting italic;
font-size:72px;
font-style:bold;
color:red;
width:350px;
filter:chroma(color=red);
}
.dropshadows
{
font-family:lucida handwirting italic;
font-size:72px;
font-style:bold;
color:#336600;
width:350px;
filter:dropshadow(color=red,offx=15,offy=10,positive=1);
}
.fliphs
{
font-family:lucida handwirting italic;
font-size:72px;
font-style:bold;
color:#336600;
width:350px;
filter:fliph;
}
.flipvs
{
font-family:lucida handwirting italic;
font-size:72px;
font-style:bold;
color:#336600;
width:350px;
filter:flipv;
}
.glows
{
font-family:lucida handwirting italic;
font-size:72px;
font-style:bold;
color:#336600;
width:350px;
filter:glow(color=blue,strength=15);
}
.grays
{
font-family:lucida handwirting italic;
font-size:72px;
font-style:bold;
color:#336600;
width:350px;
filter:gray;
}
.inverts
{
font-family:lucida handwirting italic;
font-size:72px;
font-style:bold;
color:#336600;
width:350px;
filter:invert;
}
.masks
{
font-family:lucida handwirting italic;
font-size:72px;
font-style:bold;
color:#336600;
width:350px;
filter:mask(color=green);
}
.shadows
{
font-family:lucida handwirting italic;
font-size:72px;
font-style:bold;
color:#336600;
width:350px;
filter:shadow(color=red,direction=225);
}
.waves
{
font-family:lucida handwirting italic;
font-size:72px;
font-style:bold;
color:#336600;
width:350px;
filter:wave(add=true,freq=3,lightstrength=100,phase=45,strength=20);
}
.xrays
{
font-family:lucida handwirting italic;
font-size:72px;
font-style:bold;
color:#336600;
width:350px;
filter:xray;
}
</style>
</head>
<body>
<table width=1000 border=1>
<tr><td width=100>Filter properties</td><td width=100>Description</td><td width=400>Parameters and values</td><td width=400>Effect examples< /td></tr>
<tr><td><span class=alpha>Alpha</span></td><td>Set transparency effect</td><td>opacity: transparency level, 0 to 100, 0 is completely transparent<br>
style: Specifies the shape characteristics of the transparent area, 0 is uniform distribution; 1 is linear; 2 is radial; 3 is rectangular<br>finishopacity: sets the transparency at the end of the gradient to achieve a gradient effect, the value is from 0 to 100<br>
startX, startY: start coordinates of the gradient transparency effect<br>finishX, finishY: end coordinates of the gradient transparency effect</td><td><p><img src="fd.jpg" class="alphas"/></p ></td></tr>
<tr><td>Blur</td><td>Create a blur effect</td><td>add: Specify whether the picture should be changed to a blur effect, true and false<br>
direction: Set the blur direction, 0 degrees means vertically upward, every 45 degrees is a unit, the default is 270 degrees to the left<br>strength: represents how many pixels of width are affected by the blur, the default is 5</td>
<td><div class="blrs">GOOD LUCK !</div></td></tr>
<tr><td>Chroma</td><td>Set the specified color to transparent</td><td>color: Specify transparent color</td><td>chroma<div class="chromas">Example </div></td></tr>
<tr><td>DropShadow</td><td>Create an offset image outline, that is, cast a shadow</td><td>color: the color of the projection<br>offx, offy: shadow in the x, y direction offset<br>
positive: true creates a shadow for any non-transparent pixel, false creates a shadow for transparent pixels</td><td><div class="dropshadows">dropshadow example</div></td></tr>
<tr><td>FlipH</td><td>Horizontal Flip</td><td>None</td><td><div class="fliphs">Horizontal Flip</div></td ></tr>
<tr><td>FlipV</td><td>Vertical Flip</td><td>None</td><td><div class="flipvs">Vertical Flip</div></td ></tr>
<tr><td>Glow</td><td>Add light effects to the outer boundary of the object</td><td>color: Specify the color of the light<br>
strength: luminous intensity</td><td><div class="glows">GLOW example</div></td></tr>
<tr><td>Gray</td><td>Reduce the color of the image and turn it into grayscale</td><td>None</td><td><img src="fd.jpg" class ="grays"/></td></tr>
<tr><td>Invert</td><td>Completely inverts color, saturation and brightness values to create a negative effect</td><td>None</td><td><img src="fd. jpg" class="inverts"/></td></tr>
<tr><td>Light</td><td>Project light on an object</td><td>no</td><td>no</td></tr>
<tr><td>Mask</td><td>Create a transparent mask for an object</td><td>color: Specify the color of the mask</td><td><div class="masks">MASK Example</div></td></tr>
<tr><td>Shadow</td><td>Establish a solid outline of an object, that is, a shadow effect</td><td>color: projection color<br>direction: projection direction</td><td>< div class="shadows">SHADOW example</div></td></tr>
<tr><td>Wave</td><td>Use sinusoidal ripples to disrupt the image in the X-axis and Y-axis directions</td><td>add: true means disrupting the image in waves, false not disrupting it<br >
freq: The frequency of generating ripples (how many ripples are generated)<br>lightstrength: Enhance the effect of the generated ripples (value is 0 to 100)<br>
phase: Set the offset at the beginning of the sine wave, generally 0, up to 100<br>strength: Set the amplitude of the sine wave</td><td><div class="waves">WAVE example</div> </ td></tr>
<tr><td>Xray</td><td>Only display the outline of the object</td><td>None</td><td><img src="fd.jpg" class="xrays"/> </td></tr>
</table>
</body>
</html>