首页
精品网站
艺术设计
网络学院
信息中心
求职招聘
网站综合
服装网站
编程开发
设计论坛
投稿
我要上榜
设计资源站
Dreamweaver
Flash
Photoshop
其它周边
web标准
asp
php
.net
CSS
WAP网站攻略
专题
上海网站建设
网站建设
域名注册
虚拟主机
广州网站设计
域名注册
广州网站建设
上海网站建设
虚拟主机
广州网页设计
虚拟主机
域名注册
acg
ACG玩家
品牌设计
当前位置:
网络学院首页
>>
设计教程
>>
web标准
>> CSS:Blur滤镜
CSS:Blur滤镜 (1)
网站色彩搭配讲解
跟我探索网站排名的捷径
网页banner设计欣赏
网站装饰图标设计欣赏
设计赛事集合
ACG王国
来源:
中国设计秀
作者:
点击:
948
加入收藏
Blur是CSS的滤镜之一,把它加载到文字上,可产生立体字的 效果,这将为你在网页上使用立体字做标题带来了极大的方便,也为你的网页减轻了分量;把Blur滤镜加载到图片上,能使你的图片增色不少,虽然用图象处理 软件也能达到同样效果,但用Blur滤镜可方便多了。我将一一向你介绍,先请看下面把Blur滤镜加载到文字上的效果:
图1 原文字 图2 加载Blur滤镜后的效果
上图的效果还可以吧?!制作起来也很简单,具体方法如下:
1、点击DW3快速启动面板上的CSS图标,在弹出的对话框中点击编辑按钮,再在弹出的对话框中按“New"按钮,在弹出的对话框中输入你要新创建的 Class名称,在这里我们输入“Blur1",然后按“OK",这些操作我想你总会吧?因它同定制普通的CSS是一样的。在弹出的“Style define for -blur1"对话框中,我们在“Category"中选择“Extensions",在“Filter"(滤镜)中选择“Blur"并按括号中的滤镜参 数值设置好参数(Blur(Add=true, Direction=135, Strength=10)),按“OK"结束。若是操作无误的话,在你网页代码的< head >与< /head >之间,会有如下所示的代码:
< style type="text/css" >
< !--
.blur1 { filter: Blur(Add=true, Direction=135, Strength=10)}
-- >
< /style >
假如你实在对滤镜设置不好的话,把上面这段代码复制到< head >与< /head > 之间也行。
2、上面做好的CSS滤镜,你可以把它加载到文字。加载的方法与加载普通的CSS Class相同,什么?你不会!那我告诉你吧!
1)在网页上插入一个1*1的表格,根据你的网页版面情况加上表格的背色,然后输入一些文字。
2)在DW3的状态栏中选取有文字的那个单元格,然后点击快速启动面板上的CSS图标(一般在DW3状态栏的右半边上),在弹出的CSS面板上选择blur1滤镜即可。此时,你可看到< td >的源代码是这样的:< td class="blur1" > 。若你对DW3不太熟悉,你在源代码的< td >中直接加上“class="blur1"”也一样。
就这么简单!
下面我们来看一看Blur滤镜加载到图片上的效果:
图3 Blur滤镜加载到图片上的效果
加载到图片上的Blur滤镜与加载到文字上的滤镜的制作方法相同。加载的方法更加简单,具体操作如下:
1)点击对象面板上的图片插入图标,插入一张图片。
2)选取图片,用鼠标点一下图片就行了;
3)点击快速启动面板上的CSS图标,在弹出的对话框中选择“blur1"即可。
在图片加载Blur滤镜是非曲直不是也很简单?!
下面解释一下Blur滤镜的参数,以便你灵活应用:
Add:是否使Blur滤镜起作用,Add=False(或“0”)时Blur滤镜不起作用,取True(或非“0”值)时Blur滤镜起作用,它实际上是一个布尔参数,只有两个值,即true和false;
Direction:阴影的方向,取值范围0~360度,45度一个间隔,所以实际上只有八个方向值;
Strength:它代表有多少个像素的宽度成为阴影,你也可以简单地理解为阴影的长度。它只能用整数来指定,默认值是5个像素,你可以根据实际需要 来指定阴影的长度。我上面的两个例子是用的同一个滤镜,Strength是10个像素。同一网页中可以使用不同参数的Blur滤镜,你只要给它们取不同的 名称就行了,如象下面这样:
0
顶一下
[1]
[
2
]
2007-10-22 12:41:00 出处:
输入您的搜索字词
提交搜索表单
本文引用地址:
http://www.cnwebshow.com/edu/html/article_1430.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号