cssfilter:精通CSS滤镜（filter）来源: 发布时间:星期四, 2009年2月12日 浏览:167次 评论:0
由于学校   个小网站WebSite老师需要网站WebSite整体为绿色风格 但是他们又不能提供相关素材这个项目就直拖着需求也定不下来 后台基本功能都已经哦了就等页面了本来是想好好学学别东西巩固下Java些基础 但是这事拖着还是够不爽security框架例子也不好弄于是还是决定整理总结下最近学习CSS滤镜Css滤镜比较帅可以取代部分PS才能实现效果但是缺点也比较明显浏览器并不是都支持但考虑到IE67...占市场份额还是挺很大所以有学习必要网上不缺CSS滤镜知识但是大多是长篇大论或不够全面现在结合自己做例子和网上资料自己学习心得体会整理总结如下毕竟我不是专业搞美工所以这篇随笔是基本是面向初学者并使其快速掌握也了解现在CSS都能做什么为了充实内容顺便给出jQuery实现弹出层特效源码 CSS(Cascading Style Sheets) 层叠样式表单 1998年5月12日Cascading Style Sheets,level 2 成为了W3C新标准同时,”W3C CoreStyles '和CSS2 Validation Service' 以及“CSS Test Suite' 宣布成立它是组样式样式中属性在HTML元素中依次出现并显示在浏览器中样式可以定义在HTML文档标志(TAG)里也可以在外部附加文档作为外加文档此时个样式表单可以作用于多个页面---甚至整个站点因此具有更好易用性和扩展性 对于滤镜和渐变效果前者是基础 后者就是滤镜效果不断变化和演示更替当滤镜和渐变效果结合到个基本SCRIPT小 中后网页设计者就可以拥有个建立动态交互文档强大工具也就是CSS FILTER+ SCRIPT 这就介绍说明想要建立动态文档还要些SCRIPT (脚本语言)基础 可视化滤镜属性只能用在HTMLControl控件元素上 不能使用divid 定义所谓HTML空间元素就是它们在页面上定义了个矩形空间浏览器窗口可以显示这些空间下面列出了HTML合法Control控件和它们介绍说明 元素 介绍说明 BODY 网页文档 主体元素所有可见范围都在元素内 BUTTON 表单域 按钮可以有“发送(submit)”、“重置(re )”等形式 DIV 定义了网页上 个区域这个区域高度、宽度或者绝对位置都是以知 IMG 图片元素 通过指定“src'属性来指定图片来源 INPUT 输入表单域 MARQUEE 移动字幕效果 SPAN 定义了网页上 个区域这个区域高度、宽度或者绝对位置都是以知 TABLE 表格 TD 表格数据单元格 TEXTAREA 文本区域 TFOOT 多行输入文本框 TH 表格标题单元格 THEAD 表格标题 TR 表格行 //////////////////////////////////////// IE4.0以上支持 滤镜属性表 滤镜效果 描述 : Alpha 设置透明度 Blru 建立模糊效果 Chroma 把指定 颜色设置为透明 DropShadow 建立 种偏移影象轮廓即投射阴影 FlipH 水平反转 FlipV 垂直反转 Glow 为对象 外边界增加光效 Grayscale 降低图片 彩色度 Invert 将色彩、饱和度以及亮度值完全反转建立底片效果 Light 在 个对象上进行灯光投影 Mask 为 个对象建立透明膜 Shadow 建立 个对象固体轮廓即阴影效果 Wave 在X轴和Y轴方向利用正弦波纹打乱图片 Xray 只显示对象 轮廓 下面分别阐述: 1、Alpha 滤镜 语法:{FILTER:ALPHA(opacity=opacity,finishopacity=finishopacity,style=style,startx=startx, starty=starty,finishx=finishx,finishy=finishy)} 'Alpha'属性是把 个目标元素和背景混合设计者可以指定数值来控制混合程度这种“和背景混合”通俗地说 就是 个元素透明度通过指定坐标可以指定点、线、面透明度他们参数含义分别如下: “opacity'代表透明度水准 默认范围是从0 到 100他们其实是百分比形式也就是说0代表完全透明 100代表完全不透明 ”finishopacity'是个可选参数如果想要设置渐变透明效果就可以使用他们来指定 结束时 透明度范围也是0 到 100“style' 参数指定了透明区域形状特征其中0代表统形状、1代表线形、2代表放射状 、3代表长方形 ”STARTX“和”STARTY“代表渐变透明效果开始X和Y坐标” FINISHX“和”FINISHY“代表渐变透明效果结束X和Y 坐标 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; char =utf-8" /> <title>css滤镜</title> <style> body{FILTER:ALPHA(opacity=50,finishopacity=80,style=2} </style> </head> <body> <div ="try"><font color="#CC33C2">施杨de编程世界</font></div> <div><img src="image/ch2.g  " /></div> </body> </html> 2、Blur 滤镜 语法:对于HTML:{filter:blur(add=add,direction=direction,strength=strength)} 对于Script语言: [oblurfilter=] object.filters.blur 用手指在 幅尚未干透油画上迅速划过时画面就会变得模糊”Blur'就是产生同样模糊效果 “ADD”参数是 个布尔判断“TRUE(默认)”或者“FALSE”它指定图片是否被改变成印象派模糊 效果 模糊效果是按顺时针方向进行“DIRECTION”参数用来设置模糊方向其中0度代表垂直
向上 然后每45度为个单位它默认值是向左270度“STRENGTH“值只能使用整数来指定 她代表有多少像素 宽度将受到模糊影响默认是5个 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; char =utf-8" /> <title>css滤镜</title> <style> body{filter:blur(add=ture,direction=135,strength=200)} </style> </head> <body> <div ="try"><font color="#CC33C2">施杨de编程世界</font></div> <div><img src="image/ch2.g " /></div> </body> </html> 效果: 3、FlipH, FlipV 滤镜 语法:{filter:filph} ,{filter:filpv} 分别是水平反转和垂直反转 4、Chroma 滤镜 语法:{filter:chroma(color=color)} 使用”Chroma'属性可以设置 个对象中指定颜色为透明色参数COLOR即要透明颜色 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; char =utf-8" /> <title>css滤镜</title> <style> body{filter:chroma(color=#CC33C2)} </style> </head> <body> <div ="try"><font color="#CC33C2">施杨de编程世界</font></div> <div><img src="image/ch2.g " /></div> </body> </html> 可以屏蔽颜色 大有用处 5、DropShadow 滤镜 语法:{filter:dropshadow(color=color,offx=ofx,offy=offy,positive=positive)} “DropShaow'顾名思义就是添加对象 阴影效果其工作原理是建立个偏移量加上较深 'Color'代表投射阴影 颜色'offx'和'offy'分别是X方向和Y方向阴影饿偏移量 'Positive'参数是 个布尔值如果为“TRUE(非0)”那么就为任何非透明像素建立可见投影 如果为“FASLE(0)” 那么就为透明像素部分建立透明效果 代码如下: dropshadow(color=gray,offx=5,offy=5.positive=0) 效果: 6、Glow 滤镜 语法:{filter:glow(color=color,strength)} 当对 个对象使用'glow'属性后这个对象边缘就会产生类似发光效果“COLOR”是指定 发光 颜色“STRENGTH”则是强度表现可以从1到255的间任何整数来指定这个力度 filter:glow(color=red,strength=10) 后 效果 filter:glow(color=#ffff00,strength=5) 后 效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; char =utf-8" /> <title>css滤镜</title> <style> body{filter:glow(color=red,strength=10)} .try{ margin-left:30px;} </style> </head> <body> <br /><br /> <div ="try"><font color="#CC33C2">施杨de编程世界</font><br /> <br /> <div><img src="image/ch2.g " /></div><br /><br /></div> </body> </html> 7、Gray ,Invert,Xray 滤镜 语法:{filter:gray} ,{filter:invert},{filter:xray} Gray滤镜是把 张图片变成灰度图；(汶川大地震后很多网站WebSite色调都变灰色就是用这点代码实现) Invert滤镜是把对象 可视化属性全部翻转包括色彩、饱和度、和亮度值； Xray滤镜是让对象反映出它 轮廓并把这些轮廓加亮也就是所谓“X”光片 效果: 效果: 8、Light 滤镜 语法:Filter{light} 这个属性模拟光源 投射效果旦为对象定义了“LIGHT'滤镜属性那么就可以 它“思路方法(Method)'来设置或者改变属性“LIGHT'可用思路方法有: ·AddAmbient 加入包围 光源 ·AddCone 加入锥形光源 ·AddPo  加入点光源 ·Changcolor 改变光 颜色 ·Changstrength 改变光源 强度 ·Clear 清除所有 光源 ·MoveLight 移动光源 addAmbient (iRed,iGreen,iBlue,iStrength) : 为滤镜添加环境光 环境光是无方向并且均匀洒在页面表面环境光有颜色和强度值可以为对象田家更多颜色它通 常和其他光 起使用无返回值参数见下表
iRed : 必选项 整数值(Integer) 指定红色值取值范围为 0 - 255 iGreen : 必选项 整数值(Integer) 指定绿色值取值范围为 0 - 255 iBlue : 必选项 整数值(Integer) 指定蓝色值取值范围为 0 - 255 iStrength : 必选项 整数值(Integer) 指定光强度取值范围为 0 - 100 changeColor (iLightNumber,iRed,iGreen,iBlue,fAbsolute) : 改变光 颜色无返回值参数见下表 iLightNumber : 必选项 整数值(Integer) 指定光标识符 iRed : 必选项 整数值(Integer)指定红色值取值范围为 0 - 255 iGreen : 必选项 整数值(Integer)指定绿色值取值范围为 0 - 255 iBlue : 必选项 整数值(Integer)指定蓝色值取值范围为 0 - 255 fAbsolute : 必选项 布尔值(Boolean)指定改变是替换当前设置绝对值还是加到当前设置相对值此参数不等于零表示采用绝对值否则表示采用相对值 可以定义光源 虚拟位置以及通过调整X轴和Y轴数值来控制光源焦点位置还可以调整光源形式(点光源或者锥形光源)指定光源是否模糊边界、光源颜色、亮度等属 性 如果动态设置光源可能回产生些意想不到效果 实现图片自动变色效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; char =utf-8" /> <title>css滤镜</title> <style> body{} .try{ margin-left:30px;} </style> </head> <body> <br /><br /> <div ="try"><font color="#CC33C2">施杨de编程世界</font><br /> <br /> <div><img src="image/ch2.g " style="filter:light ; width:400; height:300" _disibledevent=>onmousemove="javascript:this.filters.light.changeColor(0,150,100,50,0)"/></div><br /><br /></div> </body> </html> 9、Mask 滤镜 语法:{filter:mask(color=color)} 使用'MASK'属性可以为对象建立 个覆盖于表面膜其效果就象戴者有色眼镜看物体样 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; char =utf-8" /> <title>css滤镜</title> <style> body{ filter:mask(color=yellow);} #try{ margin-left:30px;} </style> </head> <body> <br /><br /> <div id="try"><font color="#CC33C2">施杨de编程世界</font><br /> <br /> <div><img src="image/ch2.g " /></div><br /><br /></div> </body> </html> 虽然实现 但是效果并不想想象那样帅不好用 10、Shadow 滤镜 语法:{filter:shadow(color=color,direction=direction)} 利用“Shadow”属性可以在指定 方向建立物体投影COLOR是投影色DIRECTION是设置投影方向其中0度代表垂直向上然后每45度为个单位它默认值是向左270 度 filter:shadow(color=red,direction=225) filter:shadow(color=blue,direction=225) filter:shadow(color=gray,direction=225) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; char =utf-8" /> <title>css滤镜</title> <style> body{ filter:shadow(color=red,direction=225);} #try{ margin-left:30px;} </style> </head> <body> <br /><br /> <div id="try"><font color="#CC33C2">施杨de编程世界</font><br /> <br /> <div><img src="image/ch2.g " /></div><br /><br /></div> </body> </html> 效果: 11、Wave 滤镜 语法:{filter:wave(add=add,freq=freq,lightstrength=strength,phase=phase,strength=strength)} 'wave' 属性把对象按垂直 波形样式打乱默认是“TRUE(非0)” “ADD”表示是否要把对象按照波形样式打乱 “FREQ”是波纹 频率也就是指定在对象上共需要产生多少个完整波纹 “LIGHTSTRENGTH”参数可以对于波纹增强光影 效果范围0----100 “PHASE”参数用来设置正弦波 偏移量 “STRENGTH”代表振幅大小 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; char =utf-8" /> <title>css滤镜</title> <style> body{ filter:wave(add=add,freq=freq,lightstrength=strength,phase=phase,strength=20);} #try{ margin-left:30px;} </style> </head> <body> <br /><br /> <div id="try"><font color="#CC33C2">施杨de编程世界</font><br /> <br /> <div><img src="image/ch2.g " /></div><br /><br /></div> </body> </html> 效果: jQuery弹出层源码: 页面: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <!-- saved from url=(0045)http:// erface.eyecon.ro/demos/windows.html --> <HTML xmlns="http://www.w3.org/1999/xhtml"> <HEAD><TITLE>Resizeable demo - Interface plugin for jQuery</TITLE> <META http-equiv=Content-Language content=en> <META http-equiv=Content-Type content="text/html; char =utf-8"> <SCRIPT src="js/jquery.js" type=text/javascript></SCRIPT> <SCRIPT src="js/ erface.js" type=text/javascript></SCRIPT> <link href="css/div_show.css" rel="stylesheet" type="text/css" media="all"> <META content="MSHTML 6.00.6000.16735" name=GENERATOR> </HEAD> <BODY><A id=windowOpen>管理员登陆</A> <DIV id=window> <DIV id=windowTop> <DIV id=windowTopContent>登陆界面</DIV> <IMG id=windowMin src="css/images/window_min.jpg"> <IMG id=windowMax src="css/images/window_max.jpg"> <IMG id=windowClose src="css/images/window_close.jpg"> </DIV> <DIV id=windowBottom> <DIV id=windowBottomContent></DIV></DIV> <DIV id=windowContent> <P></P> <P></P> <P></P> <P></P> <P></P> <P></P> <P></P> <P></P> <P></P> <P></P></DIV><IMG id=windowResize src="css/images/window_resize.g "> </DIV> <P></P> <P></P> <P></P> <P></P> <P></P> <P></P> <P></P> <P></P> <P></P> <P></P> <SCRIPT type="text/javascript" src="js/div_show.js"></SCRIPT> <SCRIPT language=JavaScript type=text/javascript>var client_id = 1;</SCRIPT> </BODY></HTML> css源码: BODY { BACKGROUND: #fff; HEIGHT: 100% } #window { DISPLAY: none; LEFT: 200px; OVERFLOW: hidden; WIDTH: 400px; POSITION: absolute; TOP: 100px; HEIGHT: 300px } #windowTop { BACKGROUND-POSITION: right top; BACKGROUND-IMAGE: url(images/window_top_end.png); OVERFLOW: hidden; CURSOR: move; BACKGROUND-REPEAT: no-repeat; POSITION: relative; HEIGHT: 30px } #windowTopContent { BACKGROUND-POSITION: left top; FONT-WEIGHT: bold; FONT-SIZE: 14px; BACKGROUND-IMAGE: url(images/window_top_start.png); OVERFLOW: hidden; COLOR: #6caf00; TEXT-INDENT: 10px; LINE-HEIGHT: 30px; MARGIN-RIGHT: 13px; BACKGROUND-REPEAT: no-repeat; FONT-FAMILY: Arial, Helvetica, sans-ser ; HEIGHT: 30px } #windowMin { RIGHT: 25px; CURSOR: po er; POSITION: absolute; TOP: 10px } #windowMax { DISPLAY: none; RIGHT: 25px; CURSOR: po er; POSITION: absolute; TOP: 10px } #windowClose { RIGHT: 10px; CURSOR: po er; POSITION: absolute; TOP: 10px } #windowBottom { BACKGROUND-POSITION: right bottom; BACKGROUND-IMAGE: url(images/window_bottom_end.png); BACKGROUND-REPEAT: no-repeat; POSITION: relative; HEIGHT: 270px } #windowBottomContent { BACKGROUND-POSITION: left bottom; BACKGROUND-IMAGE: url(images/window_bottom_start.png); MARGIN-RIGHT: 13px; BACKGROUND-REPEAT: no-repeat; POSITION: relative; HEIGHT: 270px } #windowResize { RIGHT: 3px; CURSOR: se-resize; BOTTOM: 5px; POSITION: absolute } #windowContent { BORDER-RIGHT: #6caf00 1px solid; BORDER-TOP: #6caf00 1px solid; FONT-SIZE: 11px; LEFT: 10px; OVERFLOW: auto; BORDER-LEFT: #6caf00 1px solid; WIDTH: 375px; MARGIN-RIGHT: 10px; BORDER-BOTTOM: #6caf00 1px solid; FONT-FAMILY: Arial, Helvetica, sans-ser ; POSITION: absolute; TOP: 30px; HEIGHT: 255px; BACKGROUND-COLOR: #fff
} #windowContent * { MARGIN: 10px } .transferer2 { BORDER-RIGHT: #6baf04 1px solid; BORDER-TOP: #6baf04 1px solid; FILTER: alpha(opacity=30); BORDER-LEFT: #6baf04 1px solid; BORDER-BOTTOM: #6baf04 1px solid; BACKGROUND-COLOR: #b4f155; -moz-opacity: 0.3; opacity: 0.3 } js源码: $(document).ready( function { $('#windowOpen').bind( 'click', function { ($('#window').css('display')  'none') { $(this).TransferTo( { to:'window', Name:'transferer2', duration: 400, complete: function { $('#window').show ; } } ); } this.blur ;  false; } ); $('#windowClose').bind( 'click', function { $('#window').TransferTo( { to:'windowOpen', Name:'transferer2', duration: 400 } ).hide ; } ); $('#windowMin').bind( 'click', function { $('#windowContent').SlideToggleUp(300); $('#windowBottom, #windowBottomContent').animate({height: 10}, 300); $('#window').animate({height:40},300).get(0).isMinimized = true; $(this).hide ; $('#windowResize').hide ; $('#windowMax').show ; } ); $('#windowMax').bind( 'click', function { var windowSize = $.iUtil.getSize(document.getElementById('windowContent')); $('#windowContent').SlideToggleUp(300); $('#windowBottom, #windowBottomContent').animate({height: windowSize.hb + 13}, 300); $('#window').animate({height:windowSize.hb+43}, 300).get(0).isMinimized = false; $(this).hide ; $('#windowMin, #windowResize').show ; } ); $('#window').Resizable( { minWidth: 200, minHeight: 60, maxWidth: 700, maxHeight: 400, dragHandle: '#windowTop', handlers: { se: '#windowResize' }, onResize : function(size, position) { $('#windowBottom, #windowBottomContent').css('height', size.height-33 + 'px'); var windowContentEl = $('#windowContent').css('width', size.width - 25 + 'px'); (!document.getElementById('window').isMinimized) { windowContentEl.css('height', size.height - 48 + 'px'); } } } ); } ); 再下载两个jquery 文件分别是: erface.jsjquery.js 哦了 0
相关文章读者评论发表评论 |
 |
专注于互联网--专注于架构 |
最新标签 网站地图 文章索引 Rss订阅 |
