CSS滤镜应用集锦

来源:互联网   编辑:思良  发表时间:2015-07-13  关注度:1239  

在网页制作中使用CSS,这已是众所周知,而关于CSS滤镜使用的却介绍得不多。其实,CSS的滤镜在Dreamweaver 3中用起来也很方便,且能使文字产生一种类似图象的效果,但比起图片来可就瘦小多了。而在CSS滤镜中,又分为静态滤镜与动态滤镜。多的不说了,让我们跟随下边的滤镜效果一起学习吧!GO!!

Mask滤镜可以为网页上的HTML元件对象作出一个矩形遮罩,关于什么是遮罩?如果你用过Flash中的遮罩,你就会知道了,就是那个样子了。实际上对于遮罩你也可以这样来理解,相当于用一块有色布把物件盖起来,但内容却被挖去了……巧用CSS的Mask滤镜

Blur是CSS的滤镜之一,把它加载到文字上,可产生立体字的效果,这将为你在网页上使用立体字做标题带来了极大的方便,也为你的网页减轻了分量;把Blur滤镜加载到图片上,能使你的图片增色不少,虽然用图象处理软件也能达到同样效果,但用Blur滤镜可方便多了……巧用CSS的Blur滤镜 

“DropShadow”顾名思义就是添加对象的阴影效果。它的实际效果看上去就象是原来的对象离开了页面,然后在页面上显示出该对象的投影。其工作原理是建立一个偏移量,然后加上颜色……巧用CSS的Dropshadow滤镜

“Alpha”滤镜,听到这个名字,你可能会想到Flash里有,Photoshop里也似乎见过。一点不错,它们的作用基本类似,就是把一个目标元素与背景混合。你可以指定数值来控制混合的程度。这种“与背景混合”通俗地说就是一个元素的透明度……巧用CSS的Alpha滤镜

对一个对象使用“glow”滤镜后,这个对象的边缘就会产生类似发光的效果,这种效果在PHTOSHOP中做起来都比较麻烦,而在DW3中用CSS的“glow”滤镜来制作却是如此地简单,而且节约不少字节……巧用CSS的Glow滤镜

"wave"滤镜,看它的名称你可能就能想到其效果,正如你想的那样,它的作用是把对象按照垂直的波形样式扭曲,从而产生一种特殊的效果……巧用CSS的Wave滤镜

CSS的无参数滤镜共有六个(FlipH、FlipV、Invert、Xray、Gray和Light),虽然它们没有参数,相对来讲,灵活性要差点,但它们用起来更方便,效果也相当明显。用它们可以使文字或图片“翻翻身”、获得图片的“底片”效果,甚至可以制作图片的“X光片”效果……巧用CSS的无参数滤镜

Light滤镜能产生一个模拟光源的效果,但使用它要通过调用它的“方法(Method)”来实现,这就要用到一些Javascrpt知识,虽然有一点难度,但产生的效果也是奇特的……巧用CSS的Light滤镜

CSS的RevealTrans动态滤镜是一个神奇的滤镜,它能产生23种动态效果,更为奇妙的是它还能在23种动态效果中随机抽用其中的一种。用它来进行网页之间的动态切换,简直方便极了……巧用CSS的RevealTrans滤镜

BlendTrans滤镜比起上一篇介绍的Revealtrans滤镜来要简单一些,它只有一个参数:Duration 变换时间,它的功能也比较单一,就是产生一种淡入淡出的效果,不过它的这种效果比起RevealTrans滤镜的淡入淡出效果来要精细的多……巧用CSS的BlendTrans滤镜
原文:http://www0.ccidnet.com/school/web/2001/04/30/70_4096.html

    支付宝扫码领红包,不用多说,用过的人都知道,双赢的,你得红包,我得到同等推广红包,比如你扫到1元,我也得1元,大家得到的红包可以去实体店消费!新用户至少10元以上哦,每天都有!希望大家每天来本站扫码!感谢感谢!

    把打赏改成扫码红包了!支持本站就扫码下!


下一篇:CSS滤镜详解


上一篇:HTML+CSS+JAVAscript详细手册大全


小提示:按 回车[Enter]键 返回,按 ←键 返回上一页, 按 →键 进入下一页。

网友评论(0条评论)

选择头像
     

新闻评论(共有 0 条评论)

手机访问

本站APP

联系我

加我微信