[07/05][交流]CSS滤镜运用——FLIP（翻转）滤镜
<table border=1 cellspacing=5 cellpadding=5 width=750 background=http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/bg/03/n2.gif><tr><td colspan=2><BR><BR><font size=4 color=purple><b>
Flip是CSS滤镜的翻转属性，FlipH代表水平翻转，FlipV代表垂直翻转。它们的表达式很简单，分别是：<BR><BR>
Filter：FlipH<BR><BR>
Filter：FlipV<BR><BR>
</b></font></td></tr>
<tr><td colspan=2><BR><BR><BR><font size=4 color=purple><b>看看效果吧：</b></font></td></tr>
<tr><TD width=50%><center><font size=3>效果图</center><td width=50%><center><font size=3>代码</center></td></tr>
<tr><TD width=50%><center>
<table><td align=center><center>
<font style="font-size:28PT;font-family:隶书;color=red">欢迎光临音画学堂</font></center></td></table>
<table><td style="filter:flipv" align=center><center>
<font style="font-size:28PT;font-family:隶书;color=red">欢迎光临音画学堂</font></center></td></table>
</center></td>
<td width=50%><center>
<textarea rows=6 cols=54>
<table><td align=center><center>
<font style="font-size:28PT;font-family:隶书;color=red">欢迎光临音画学堂</font></center></td></table>
<table><td style="filter:flipv" align=center><center>
<font style="font-size:28PT;font-family:隶书;color=red">欢迎光临音画学堂</font></center></td></table>
</textarea></center></td></tr>
<tr><TD width=50%><center>
<table><td align=center><center>
<font style="font-size:28PT;font-family:隶书;color=red">欢迎光临音画学堂</font></center></td></table>
<table><td style="filter:fliph" align=center><center>
<font style="font-size:28PT;font-family:隶书;color=red">欢迎光临音画学堂</font></center></td></table>
</center></td>
<td width=50%><center>
<textarea rows=6 cols=54>
<table><td align=center><center>
<font style="font-size:28PT;font-family:隶书;color=red">欢迎光临音画学堂</font></center></td></table>
<table><td style="filter:fliph" align=center><center>
<font style="font-size:28PT;font-family:隶书;color=red">欢迎光临音画学堂</font></center></td></table>
</textarea></center></td></tr>
<tr><TD width=50%><center>
<table><td align=center><center>
<img src=http://photos12.flickr.com/13960503_916a77046c_o.jpg width=350 style="filter:fliph">
</center></td></table>
<table><td style="filter:fliph" align=center><center>
<img src=http://photos12.flickr.com/13960503_916a77046c_o.jpg width=350>
</center></td></table>
</center></td>
<td width=50%><center>
<textarea rows=6 cols=54>
<table><td align=center><center>
<img src=http://photos12.flickr.com/13960503_916a77046c_o.jpg width=350 style="filter:fliph">
</center></td></table>
<table><td style="filter:fliph" align=center><center>
<img src=http://photos12.flickr.com/13960503_916a77046c_o.jpg width=350>
</center></td></table>
</textarea></center></td></tr>
<tr><TD width=50%><center>
<table border=0 cellspacing=0 cellpadding=0 width=100%><td><center>
<table border=0 cellspacing=0 cellpadding=0 width=100%><td align=center><center>
<img src=http://photos12.flickr.com/13960503_916a77046c_o.jpg width=350 style="filter:flipv">
</center></td></table>
<table border=0 cellspacing=0 cellpadding=0 width=100%><td style="filter:flipv" align=center><center>
<img src=http://photos12.flickr.com/13960503_916a77046c_o.jpg width=350>
</center></td></table></center></td></table>
</center></td>
<td width=50%><center>
<textarea rows=6 cols=54>
<table><td align=center><center>
<img src=http://photos12.flickr.com/13960503_916a77046c_o.jpg width=350 style="filter:flipv">
</center></td></table>
<table><td style="filter:flipv" align=center><center>
<img src=http://photos12.flickr.com/13960503_916a77046c_o.jpg width=350>
</center></td></table>
</textarea></center></td></tr>
</table> <div align=center><font face=隶书 color=purple size=5>字体设置翻转时，要借助表格的翻转才行，图两样都行！大家可以试试以下的代码，就知道了^^</font><BR><BR>
<textarea rows=3 cols=55>
<font style="font-size:30pt;font-family:隶书;color=red;filter:fliph">音画学堂</font>
</textarea>
<BR><BR>
<textarea rows=3 cols=55>
<table><td style="filter:fliph"><font style="font-size:30pt;font-family:隶书;color=red">音画学堂</font></td></table>
</textarea><BR><BR>
<textarea rows=8 cols=55>
<img src=http://photos12.flickr.com/13960503_916a77046c_o.jpg>
<br>
<img src=http://photos12.flickr.com/13960503_916a77046c_o.jpg style="filter:fliph">
</textarea>
<BR><BR>
<textarea rows=8 cols=55>
<table><td><img src=http://photos12.flickr.com/13960503_916a77046c_o.jpg></td>
<td style="filter:fliph"><img src=http://photos12.flickr.com/13960503_916a77046c_o.jpg>
</td></table>
</textarea>
</div>
[ 本帖最后由 happy-yan 于 2006-7-6 10:36 编辑 ]
页:
[1]