广场 › 〖 美图学堂 〗 › [06/22][教 程] CSS 濾 鏡

月儿 发表于 2006-6-22 11:39:20

[06/22][教 程] CSS 濾 鏡

<TABLE background="http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/bg/color/7c9c2c11.jpg" width=100%><TBODY><TR><TD><BR><BR><DIV align=center><TABLE cellSpacing=15 borderColorDark=#140076 cellPadding=20 width="80%" bgColor=#140076 borderColorLight=#D8D0FE background=http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/bg/color/fe3d8240.jpg border=1><TBODY><tr><td width="50%" align="center">Alpha滤镜：设置透明度</td><TD width="50%" align="center">opacity：透明度。默认的范围是从0 到 100，0代表完全透明，100代表完全不透明。<br>style ：指定透明区域的形状。其中0代表统一形状、1代表线形、2代表放射状、3代表长方形。</td></tr><TR><TD width="50%" align="center">原图</td><td width="50%" align="center">使用滤镜后的图</td></tr><TR><TD width="50%" align="center"><TEXTAREA cols=40 rows=5>< img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg"></TEXTAREA></td><td width="50%" align="center"><TEXTAREA cols=40 rows=5>< img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg"style="filter:Alpha(Opacity=100,Style=3)"></TEXTAREA></td></tr><TR><TD width="50%" align="center"><img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg"></td><td width="50%" align="center"><img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg" style="filter:Alpha(Opacity=100,Style=3)"></TD></TR></TABLE><br><br><TABLE cellSpacing=15 borderColorDark=#140076 cellPadding=20 width="80%" bgColor=#140076 borderColorLight=#D8D0FE background=http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/bg/color/fe3d8240.jpg border=1><TBODY><tr><td width="50%" align="center">Blru滤镜:模糊效果</td><TD width="50%" align="center">ADD参数：TRUE（默认）或者FALSE。它指定图片是否被改变成印象派的模糊效果。<br>模糊效果是按顺时针的方向进行的，DIRECTIO”参数用来设置模糊的方向。其中0度代表垂直向上，然后每45度为一个单位。它的默认值是向左的270度。<br>STRENGTH值使用整数来指定，代表有多少像素的宽度将受到模糊影响。默认是5个。</td></tr><TR><TD width="50%" align="center">原图</td><td width="50%" align="center">使用滤镜后的图</td></tr><TR><TD width="50%" align="center"><TEXTAREA cols=40 rows=5>< img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg"></TEXTAREA></td><td width="50%" align="center"><TEXTAREA cols=40 rows=5>< img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg" style="filter:blur(add=ture,direction=135,strength=10)"></TEXTAREA></td></tr><TR><TD width="50%" align="center"><img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg"></td><td width="50%" align="center"><img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg"　style="filter:blur(add=ture,direction=135,strength=10)"></TD></TR></TABLE><br><br><TABLE cellSpacing=15 borderColorDark=#140076 cellPadding=20 width="80%" bgColor=#140076 borderColorLight=#D8D0FE background=http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/bg/color/fe3d8240.jpg border=1><TBODY><tr><td width="50%" align="center">Chroma滤镜:把指定的颜色设置为透明</td><TD width="50%" align="center">设置一个对象中指定的颜色为透明色，参数COLOR即要透明的颜色。</td></tr><TR><TD width="50%" align="center">原图</td><td width="50%" align="center">使用滤镜后的图</td></tr><TR><TD width="50%" align="center"><TEXTAREA cols=40 rows=5>< img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg"></TEXTAREA></td><td width="50%" align="center"><TEXTAREA cols=40 rows=5>< img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg" style="filter:chroma(color=white)"></TEXTAREA></td></tr><TR><TD width="50%" align="center"><img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg"></td><td width="50%" align="center"><img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg" style="filter:chroma(color=white)"></TD></TR></TABLE><BR><br><TABLE cellSpacing=15 borderColorDark=#140076 cellPadding=20 width="80%" bgColor=#140076 borderColorLight=#D8D0FE background=http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/bg/color/fe3d8240.jpg border=1><TBODY><tr><td width="50%" align="center">DropShadow滤镜：建立一种偏移的影象轮廓，即投射阴影</td><TD width="50%" align="center">Color代表投射阴影的颜色，<br>offx和offy分别是X方向和Y方向阴影的偏移量.Positive参数是一个布尔值，如果为"TRUE(非0)"，那么就为任何的非透明像素建立可见的投影。如果为"FASLE(0)"，那么就为透明的像素部分建立透明效果。</td></tr><TR><TD width="50%" align="center">原图</td><td width="50%" align="center">使用滤镜后的图</td></tr><TR><TD width="50%" align="center"><TEXTAREA cols=40 rows=5>< img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg"></TEXTAREA></td><td width="50%" align="center"><TEXTAREA cols=40 rows=5>< DIV style="FILTER: dropshadow(color=gray, offx=10, offy=10, positive=10);FONT-SIZE: 50pt; WIDTH: 400px">< img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg"> </div></TEXTAREA></td></tr><TR><TD width="50%" align="center"><img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg"></td><td width="50%" align="center"><DIV style="FILTER: dropshadow(color=gray, offx=10, offy=10, positive=10);FONT-SIZE: 50pt; WIDTH: 400px"><img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg"> </div></TD></TR></TABLE><br><br><TABLE cellSpacing=15 borderColorDark=#140076 cellPadding=20 width="80%" bgColor=#140076 borderColorLight=#D8D0FE background=http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/bg/color/fe3d8240.jpg border=1><TBODY><tr><td width="50%" align="center">FlipH滤镜;FlipV滤镜:水平反转;垂直反转</td><TD width="50%" align="center">图片分别是水平反转和垂直反转。</td></tr><TR><TD width="50%" align="center">原图</td><td width="50%" align="center">使用滤镜后的图</td></tr><TR><TD width="50%" align="center"><TEXTAREA cols=40 rows=5>< img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg"></TEXTAREA></td><td width="50%" align="center"><TEXTAREA cols=40 rows=5>< img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg" style="filter:fliph;"><br>< img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg" style="filter:flipv;"><br>< img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg" style="fliph()flipv()"></TEXTAREA></td></tr><TR><TD width="50%" align="center"><img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg"></td><td width="50%" align="center"><img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg" style="filter:fliph;"><TR><TD width="50%" align="center"><img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg"style="filter:flipv;"></td><td width="50%" align="center"><img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg" style="filter:fliph()flipv()"></TD></TR></TABLE><br><br><TABLE cellSpacing=15 borderColorDark=#140076 cellPadding=20 width="80%" bgColor=#140076 borderColorLight=#D8D0FE background=http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/bg/color/fe3d8240.jpg border=1><TBODY><tr><td width="50%" align="center">Glow滤镜:为对象的外边界增加光效</td><TD width="50%" align="center">COLOR指定发光的颜色.<br>STRENGTH是强度，从1到255之间任何整数。</td></tr><TR><TD width="50%" align="center">原图</td><td width="50%" align="center">使用滤镜后的图</td></tr><TR><TD width="50%" align="center"><TEXTAREA cols=40 rows=5>< img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg"></TEXTAREA></td><td width="50%" align="center"><TEXTAREA cols=40 rows=5>< DIV style="FILTER: glow(color=black,strength=20); WIDTH: 100%;">< img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg"> </div></TEXTAREA></td></tr><TR><TD width="50%" align="center"><img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg"></td><td width="50%" align="center"><DIV style="FILTER: glow(color=black,strength=20); WIDTH: 100%;"><img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg"> </div></TD></TR></TABLE><br><br><TABLE cellSpacing=15 borderColorDark=#140076 cellPadding=20 width="80%" bgColor=#140076 borderColorLight=#D8D0FE background=http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/bg/color/fe3d8240.jpg border=1><TBODY><tr><td width="50%" align="center">Gray滤镜:把一张图片变成灰度图</td><TD width="50%" align="center">降低图片的彩色度</td></tr><TR><TD width="50%" align="center">原图</td><td width="50%" align="center">使用滤镜后的图</td></tr><TR><TD width="50%" align="center"><TEXTAREA cols=40 rows=5>< img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg"></TEXTAREA></td><td width="50%" align="center"><TEXTAREA cols=40 rows=5>< img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg" style="filter:Gray"></TEXTAREA></td></tr><TR><TD width="50%" align="center"><img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg"></td><td width="50%" align="center"><img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg" style="filter:Gray"></TD></TR></TABLE><br><br><TABLE cellSpacing=15 borderColorDark=#140076 cellPadding=20 width="80%" bgColor=#140076 borderColorLight=#D8D0FE background=http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/bg/color/fe3d8240.jpg border=1><TBODY><tr><td width="50%" align="center">Invert滤镜:胶片底片</td><TD width="50%" align="center">将色彩、饱和度以及亮度值完全反转.</td></tr><TR><TD width="50%" align="center">原图</td><td width="50%" align="center">使用滤镜后的图</td></tr><TR><TD width="50%" align="center"><TEXTAREA cols=40 rows=5>< img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg"></TEXTAREA></td><td width="50%" align="center"><TEXTAREA cols=40 rows=5>< img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg" style="filter:Invert"></TEXTAREA></td></tr><TR><TD width="50%" align="center"><img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg"></td><td width="50%" align="center"><img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg" style="filter:Invert"></TD></TR></TABLE><br><br><TABLE cellSpacing=15 borderColorDark=#140076 cellPadding=20 width="80%" bgColor=#140076 borderColorLight=#D8D0FE background=http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/bg/color/fe3d8240.jpg border=1><TBODY><tr><td width="50%" align="center">Xray滤镜:X光片</td><TD width="50%" align="center">让对象反映出它的轮廓并把这些轮廓加亮.</td></tr><TR><TD width="50%" align="center">原图</td><td width="50%" align="center">使用滤镜后的图</td></tr><TR><TD width="50%" align="center"><TEXTAREA cols=40 rows=5>< img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg"></TEXTAREA></td><td width="50%" align="center"><TEXTAREA cols=40 rows=5>< img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg" style="filter:Xray"></TEXTAREA></td></tr><TR><TD width="50%" align="center"><img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg"></td><td width="50%" align="center"><img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg" style="filter:Xray"></TD></TR></TABLE><br><br><TABLE cellSpacing=15 borderColorDark=#140076 cellPadding=20 width="80%" bgColor=#140076 borderColorLight=#D8D0FE background=http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/bg/color/fe3d8240.jpg border=1><TBODY><tr><td width="50%" align="center">Mask滤镜:为一个对象建立透明膜</td><TD width="50%" align="center">color值为膜的颜色</td></tr><TR><TD width="50%" align="center">原图</td><td width="50%" align="center">使用滤镜后的图</td></tr><TR><TD width="50%" align="center"><TEXTAREA cols=40 rows=5>< img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg"></TEXTAREA></td><td width="50%" align="center"><TEXTAREA cols=40 rows=5>< img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg" style="filter:mask(color=red)"></TEXTAREA></td></tr><TR><TD width="50%" align="center"><img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg"></td><td width="50%" align="center"><img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg" style="filter:mask(color=red)"></TD></TR></TABLE><br><br><TABLE cellSpacing=15 borderColorDark=#140076 cellPadding=20 width="80%" bgColor=#140076 borderColorLight=#D8D0FE background=http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/bg/color/fe3d8240.jpg border=1><TBODY><tr><td width="50%" align="center">Shadow滤镜:建立一个对象的固体轮廓，即阴影效果</td><TD width="50%" align="center">COLOR是投影色，<br>DIRECTION是设置投影的方向。0度代表垂直向上，然后每45度为一个单位。它的默认值是向左的270度。</td></tr><TR><TD width="50%" align="center">原图</td><td width="50%" align="center">使用滤镜后的图</td></tr><TR><TD width="50%" align="center"><TEXTAREA cols=40 rows=5>< img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg"></TEXTAREA></td><td width="50%" align="center"><TEXTAREA cols=40 rows=5>< DIV style="FILTER: shadow(color=blue,direction=225);FONT-SIZE: 50pt; WIDTH: 400px">< img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg"> </div></TEXTAREA></td></tr><TR><TD width="50%" align="center"><img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg"></td><td width="50%" align="center"><DIV style="FILTER: shadow(color=blue,direction=225);FONT-SIZE: 50pt; WIDTH: 400px"><img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg"> </div></TD></TR></TABLE><br><br><TABLE cellSpacing=15 borderColorDark=#140076 cellPadding=20 width="80%" bgColor=#140076 borderColorLight=#D8D0FE background=http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/bg/color/fe3d8240.jpg border=1><TBODY><tr><td width="50%" align="center">Wave滤镜:在X轴和Y轴方向利用正弦波纹打乱图片</td><TD width="50%" align="center">wave属性把对象按垂直的波形样式打乱,默认是"TRUE(非0)"<br>ADD表示是否要把对象按照波形样式打乱<br>FREQ是波纹的频率，即指定在对象上一共需要产生多少个完整的波纹<br>LIGHTSTRENGTH参数可以对于波纹增强光影的效果，范围0----100<br>PHASE参数用来设置正弦波的偏移量<br>STRENGTH代表振幅大小</td></tr><TR><TD width="50%" align="center">原图</td><td width="50%" align="center">使用滤镜后的图</td></tr><TR><TD width="50%" align="center"><TEXTAREA cols=40 rows=5>< img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg"></TEXTAREA></td><td width="50%" align="center"><TEXTAREA cols=40 rows=5>< img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg" style="filter:wave(add=add,freq=2,lightstrength=90,phase=25,strength=5)" width="375" height="300"></TEXTAREA></td></tr><TR><TD width="50%" align="center"><img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg"></td><td width="50%" align="center"><img src="http://i17.photobucket.com/albums/b51/lyh_/6park/cad2bc44.jpg" style="filter:wave(add=add,freq=2,lightstrength=90,phase=25,strength=5)" width="300" height="362"></TD></TR></TABLE></DIV><BR><br></TD></TR></TBODY></TABLE><BR>

[ 本帖最后由 月儿 于 2006-6-22 16:12 编辑 ]

happy-yan 发表于 2006-6-22 11:51:41

这个很好 学习中 谢谢分享

绯舞 发表于 2006-6-22 13:13:08

谢谢月儿的好教程 好好学习 中

爱你是我的错 发表于 2006-6-22 13:15:18

这个是要好好学习呀~谢谢了

桑桑 发表于 2006-6-22 15:06:38

找了很久了。。。谢了先。。。。。。。。

月儿 发表于 2006-6-22 16:15:46

::~~~ 那 男 生 帥 嗎 ? <BR>
他 可 是 月 儿 的 大 哥 !! <BR>
假 如 被 他 發 現 那 我 必 會 死 得 很 難 看 ….15()ol

绯舞 发表于 2006-6-22 18:29:33

月儿的大哥哦 好帅嘘。。我们保密

小辣椒 发表于 2006-7-7 15:14:32

月儿的大哥啊...粉帅也~

哈哈,有点像谢庭峰的说呢~

查看完整版本: [06/22][教 程] CSS 濾 鏡