代码的魔术——CSS滤镜之旅

80酷酷网    80kuku.com

  css|滤镜  CSS 滤镜并不是一个新鲜的话题,况且它对浏览器还挺挑剔,但是谁也不能否认CSS 滤镜的确是一个很有趣的小东西,短短一行代码就可以变化出各种各样的滤镜特效。我们特意精心整理了这个专题,为了照顾使用低版本浏览器的朋友,我们同时使用CSS滤镜代码实现效果和效果拷屏记录以及代码显示三种方式向您详细讲述CSS 滤镜。

  CSS滤镜实际上是CSS一个新的扩展部分,使用这种技术简单的语法就可以把可视化的滤镜和转换效果添加到一个标准的HTML元素上,例如图片、文本、以及其他一些对象,为页面添加一些丰富的变化。如果您有一些脚本语言的基础,能够把滤镜效果与SCRIPT小程序做一些结合,就可以拥有一个CSS FILTER+ SCRIPT建立的强大的动态交互文档工具。 

  使用CSS滤镜的方法很简单,只要遵守下面的基本语法规则就行了:

??filter:filtername(parameters) 即 filter:滤镜名称(参数)

??下面我们将详细讲述每种滤镜的使用方法和精彩效果,大家还可以研究一下,将他们组合起来,得出各种曼妙的效果。

         滤镜效果 功能描述
         Alpha  设置不同的透明度变化效果 
         Blur 建立模糊效果
         DropShadow 建立一种偏移的影象轮廓,即投射阴影 
         FlipH 水平翻转 
         FlipV 垂直翻转
         Glow 为对象的边界增加色彩光效
         Gray 将图片以灰度形式显示
         Invert 将色彩、饱和度以及亮度值完全反转,类似底片效果
         Light 在一个对象上进行灯光投影
         Mask 为一个对象建立彩色透明遮罩
         Shadow 为对象建立轮廓的影效果
         Wave 在X轴和Y轴方向利用正弦波打乱图片 
         Xray 只显示对象的轮廓

??具体的应用有两种方法:

??1、 先定义好CSS ,再在页面中需要的对象上使用预先定义好的CSS,实际上CSS的设置对话框里已经预先将这些滤镜的语法设置好了,我们只需填上适合的具体参数即可:

  2、直接在支持CSS滤镜效果的HTML控件元素上编写CSS filter代码。

  所谓的HTML控件元素就是它们在页面上定义了一个矩形空间,浏览器的窗口可以显示这些空间。下面列出HTML合法的控件,相信大家都熟悉它们的用法,在这里就不赘述了。细心的朋友可以看到我们文中所举的实例都是使用这种方法实现的。

BODY BUTTON DIV IMG INPUT MARQUEE SPAN
TABLE TD TEXTAREA TFOOT TH THEAD TR
 



分享到
  • 微信分享
  • 新浪微博
  • QQ好友
  • QQ空间
点击: