首页
精品网站
艺术设计
网络学院
信息中心
求职招聘
网站综合
服装网站
编程开发
设计论坛
投稿
我要上榜
设计资源站
Dreamweaver
Flash
Photoshop
其它周边
web标准
asp
php
.net
CSS
WAP网站攻略
专题
上海网站建设
网站建设
域名注册
虚拟主机
广州网站设计
域名注册
广州网站建设
上海网站建设
虚拟主机
广州网页设计
虚拟主机
域名注册
acg
ACG玩家
品牌设计
当前位置:
网络学院首页
>>
设计教程
>>
web标准
>> CSS:无参数滤镜
CSS:无参数滤镜 (1)
网站色彩搭配讲解
跟我探索网站排名的捷径
网页banner设计欣赏
网站装饰图标设计欣赏
设计赛事集合
ACG王国
来源:
中国设计秀
作者:
点击:
193
加入收藏
CSS的无参数滤镜共有六个(FlipH、FlipV、 Invert、Xray、Gray和Light),虽然它们没有参数,相对来讲,灵活性要差点,但它们用起来更方便,效果也相当明显。用它们可以使文字或 图片“翻翻身”、获得图片的“底片”效果,甚至可以制作图片的“X光片”效果。下面分别加以介绍。
一、FlipH和FlipV滤镜
把这两个滤镜放在一起讲,主要是因为这两个滤镜的作用类似,用法相同。FlipH是一个水平翻转对象的滤镜,当把FlipH加载到一个对象上,该对象 将产生一个水平镜象,以此来创造水平翻转的效果;FlipV是一个垂直翻转对象的滤镜,当把FlipH加载到一个对象上,该对象将产生一个垂直镜象,以此 来创造垂直翻转的效果。这两个滤镜都没有参数,可直接使用,在Dreamweaver3可以同前面介绍的滤镜一样设置和使用。下面来做几个实例看看其效 果。
1、水平“翻身”的文字
请看下面的效果图:
要产生上面的效果,只要在Dreamweaver3中设置滤镜时选择“FlipH”就行了,设置好后在网页源代码的< head >与< /head >之间可看到这样几行代码:
< style type="text/css" >
< !--
.fliph1 { filter: FlipH }
-- >
< /style >
然后,在文字所在的< td >上加载Flip滤镜,一切OK。这时的< td >代码是这样的:< td class="fliph1" >。
当然,对于象FlipH这样的无参数滤镜,采用内嵌式CSS也非常方便,即在< td >直接加上“style="fliter:fliph"”,也能产生同样的效果。上面方法的好处是不用操作源代码,只是点点鼠标就行了。
2、垂直“翻身”的文字
请看下面的效果图:
上面是使用了FlipV滤镜的效果,方法和操作步骤与上例完全相同,仅仅只是换了一个滤镜而已,在网页源代码的< head> 与< /head >之间可看到这样几行代码:
< style type="text/css" >
< !--
.flipv1 { filter: FlipV }
-- >
< /style >
在Dreamweaver3中把FlipH、FlipV直接加载到文字上有困难,一般我们把它加载到文字所在的< td >上,这样比较方便,但有一点请你注意:这时滤镜是把对象(< td >)翻转,当然也就包括表格中的空余部分,所以我在上面的例子里采用了“居中”,否则左、右、上、下正好换了个位置,看起来不怎么美观。
在图片上可以直接加载FlipH、FlipV滤镜,只要选取图片加载上滤镜就行了。请看下面的效果:
二、Invert滤镜
Invert滤镜可以把对象的可视化属性全部翻转,其中包括色彩、饱和度和亮度值,从而产生我们平时见到的“底片”或负片的效果。你可能因为要得到一 张“负片”图象而束手无策吧?,有了Invert滤镜,就可以高忱无忧了,它可以得到任何图片的“负片”。其实,有时负片也可获得一种别具一格的风格。请 看下面的效果:
怎么样?看上去有一种特殊的风格吧?!由于本例及后面介绍的几个滤镜的操作步骤同上例相同,故不再重复。对于Invert滤镜及后面的几个滤镜对文字无效!
三、Xray 滤镜
正如这个名称所反映的一样,使用Xray滤镜可以使用权对象反映出它的轮廓并把这些轮廓加亮,就象“X光片”一样。请看下面的效果:
怎么样?有点象黑白的雪景图片吧?!
0
顶一下
[1]
[
2
]
2007-10-22 12:31:00 出处:
输入您的搜索字词
提交搜索表单
本文引用地址:
http://www.cnwebshow.com/edu/html/article_1422.html
热点文章/相关文章
素材下载
矢量
潮流素材
背景素材
模板
最新文章
·
css代码:网页圆角的做法
·
@import在IE下的闪烁BUG
·
用符合标准的html代码编写专题...
·
工作中常用的高效的CSS代码
·
首页前端技术分享:清除浮动
·
IE下绝对定位的元素不能响应鼠...
·
XHTML+CSS兼容性解决方案小集
·
WEB标准中如何优化你的CSS代码?
·
CSS样式表文件的优化及其技巧
·
网页设计中CSS加载方式对页面优...
艺术设计秀最新图片
国外优秀图形插画...
Valding Deborah包...
Children's Aid S...
国外Joseph Willi...
日本著名插画设计...
Kedar Chavan平面...
推荐文章
·
css代码:网页圆角的做法
·
用符合标准的html代码编写专题...
·
首页前端技术分享:清除浮动
·
IE下绝对定位的元素不能响应鼠...
·
XHTML+CSS兼容性解决方案小集
·
!important在ie7.0的hack方法
·
web标准:CSS clear的属性及使...
·
CSS三栏布局中最先显示中栏的方法
音乐
嫁衣
画心
放生
天亮了
牡丹江
那滋味
擦肩而过
怀念过去
北京欢迎你
突然好想你
吻的太逼真
说好的幸福呢
坐上火车去拉萨
没有人比我更爱你
愚爱
心碎
稻香
带我走
醉赤壁
魔杰座
我还想她
明天过后
一定要爱你
等爱的玫瑰
原谅我一次
越单纯越幸福
最后一次的温柔
给我一首歌的时间
白狐
光荣
降临
下雨天
小酒窝
樱花草
恋爱新手
说唱脸谱
红色高跟鞋
寂寞才说爱
深深爱过你
爱上你是个错
即使知道要见面
不是因为寂寞才想你
城府
假如
花海
兰亭序
棉花糖
舍不得
最后一次
女人如烟
外滩十八号
我们的纪念
我们的无奈
心在跳情在烧
爱上你是我的错
爱情里没有谁对谁错
网站地图
|
关于我们
|
联系我们
|
网站建设
|
广告服务
|
版权声明
|
免责声明
|
网站公告
|
友情链接
|
留言
|
旧版入口
Copyright © 2005-2008
中国设计秀_网页设计秀_艺术设计秀_网页设计教程_网站建设作品_平面设计欣赏_包装设计欣赏_品牌网站建设
All Right Reserved.
做最专业的设计服务网站,秀出自我,秀出精彩!
中国设计秀,秀---无处不在!!
交流群:9107036 3848215 8850631
粤ICP备05067046号