11 Filter effects for static pictures-Ie7 and non-IE browsers are not supported. _ Image Effects

Source: Internet
Author: User
Please create a new file testimage.html
Attention: 11 Filter effects for static pictures-Ie7 and non-IE browsers are not supported.
Welcome and invite Month Exchange, net technology and software architecture
The contents are as follows (can be modified by oneself):
Copy Code code as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> Test Picture Effect </title>
<style>
. Filter1
{...} {
Filter:alpha (opacity=50,finishopacity=80,style=0);
}
. Filter2
{...} {
Filter:fliph;
}
. Filter3
{...} {
FILTER:FLIPV;
}
. Filter4
{...} {
Filter:gray;
}
. Filter5
{...} {
Filter:xray;
}
. Filter6
{...} {
Filter:invert;
}
. Filter7
{...} {
Filter:glow (color= #4A7AC9, strength=50);
}
. Filter8
{...} {
Filter:shadow (color= #000000, direction=135);
}
. Filter9
{...} {
Filter:dropshadow (color= #000000, offx=50,offy=50);
}
. Filter10
{...} {
Filter:blur (direction=135);
}
. Filter11
{...} {
Filter:wave (freq=7,strength=9,lightstrength=5,phase=5);
}

</style>

<body>
<table width= "100%" border= "0" cellspacing= "0" cellpadding= "0" >
<tr>
<td> artwork <br/></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><br/>
Translucent <br/>
Opacity: Transparency at the beginning. <br/>

Finishopacity: The transparency at the end. <br/>

Style:0 is the average transparent 1 for the linear transparent 2 is the circular transparent 3 is the diamond transparent <br/></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td><br/>
Flip <br/> Left and right
</td>
</tr>
<tr>
<td></td>"
</tr>
<tr>
<td><br/>
Flip <br/></td> up and down
</tr>
<tr>
<td></td>
</tr>
<tr>
<td><br/>
Grayscale <br/></td>
</tr>
<tr>
<td></td>"
</tr>
<tr>
<td><br/>
X-ray <br/></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td><br/>
Color Swap <br/></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td><br/>
Glow Border <br/>
Color for the luminous colour code, strength is the luminous intensity, the filter width = width + Luminous intensity x2, filter high = Figure High + luminous intensity x2+10<br/></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td><br/>
Projection Border <br/>
The color is the luminous colour code, the direction represents the direction (can only be 45 degree multiples such as: 45,90,135,180,225,270,315 degree), the filter width = the width +25, the filter height = the figure Gao +40<br/></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td><br/>
Shaded Border <br/>
Color is the luminous colour code, OFFX indicates that the horizontal displacement offy represents the vertical displacement (can be positive and negative), the filter width = width + Horizontal Displacement absolute value +10, filter height = Figure High + vertical Displacement absolute value +2) <br/></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td><br/>
Blur Border <br/>
Direction represents the direction (can only be 45 degrees of multiples such as: 45,90,135,180,225,270,315), filter width = +15, filter height = Figure High +30<br/></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td><br/>
Wave Border <br/>
FREQ represents waveform frequency (>0), strength indicates amplitude strength (>0), lightstrength indicates peak strength (0~100 the higher the Black), phase indicates starting phase (0~100), filter width = width + amplitude intensity x2
Filter height = Figure High + amplitude strength x2+10<br/></td>
</tr>
<tr>
<td></td>
</tr>


</table>

</body>

The effect is as follows:


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.