Dreamweaver MX 2004 CSS使用教程之滤镜介绍2

css|dreamweaver|教程|滤镜

  本站原创内容,转载请注明出处网页教学网

  十一.CSS 滤境的详细介绍2

  GLOW 属性

  【glow属性】对象应用glow 滤镜后,这个对象的边缘就会产生类似发光的效果,这种效果在图像处理软件中做起来比较麻烦,而在DW MX 2004中用CSS的“glow”滤镜来制作却是很简单,而且节约不少字节。

  “glow”滤镜只有两个参数,一个是“color”是指定发光的颜色,另一个参数是 “strength”是发光的强度,也可理解为光芒的长度。取值范围1~255之间的任何整数。下面 我们来做几个应用实例。

  【glow滤镜在图片上的应用】

  “glow”滤镜加载到一般图片无效,但若是把图片放到表格中,再给表格的< td >加上“glow”滤镜,却能使图片产生一个渐变颜色的边框。

  glow滤镜的参数不多,使用简单,效果明显。在具体应用时关键的问题是光芒颜色的选择,要与整个页面色彩协调。给图片和< td >可以用多种方式加载,配合背景的设置,可产生一些奇特的效果。

  GRAY 属性

  【Gray 属性】 Gray 滤镜可把一张彩色图片转变为灰度图,即黑白图片。可应用于创意特殊题材,Gray为无参数滤镜,功能单一,操作简单,效果明显。

  INVERT属性

  【Invert 属性】 Invert 滤镜可把一张图片转变为负片,好像相片的底片。可应用于创意特殊题材,Invert为无参数滤镜,功能单一,操作简单,效果明显。

  LIGHT 属性

  【Light属性】Light滤镜能产生一个模拟光源的效果。可应用于特殊场合,营造奇特的气氛。Light滤镜是无参数滤镜,使用它要通过Javascrpt调用来实现模拟光源的效果。

  MASK 属性

  【Mask 属性】Mask滤镜可以为网页元件对象产生一个矩形遮罩效果,实际也可以理解为用一块有色布把物件盖起来,但内容却被挖去了。

  【Mask滤镜应用】

  在页面适当位置插入1行1列表格,在表格里输入文字,选择表格的单元格<td>,然后,在属性面板“样式”菜单中选“Mask”。

  REVEALTRANS 属性

  RevealTrans是动态滤镜,它能产生23种动态效果,更为奇妙的是它还能在23种动态效果中随机抽取其中一种。

  RevealTrans滤镜只有两个参数,Duration:是切换时间,以秒为单位;Transition:是切换方式,它有23种方式,详见下图:


  你只要改变“Transition"的值,就能获得不同的效果。它必须借助于Javascript才能实现,Javascript的设置方法请参考【BlendTrans属性】。

  SHADOW 属性

  【Shadow 属性】利用“Shadow”滤镜可以在指定的方向建立物体的投影。投影的颜色可以指定。

  WAVE 属性

  【Wave属性】 是把对象按照垂直的波形样式扭曲,而产生一种特殊的效果。 把“wave”滤镜加载到文字上,就可得到波形文字的效果。

  提示:Wave滤镜共有5个参数:

  “add”:表示是否要把对象按照波形式样扭曲,它只有两个值,即"true"和"false",默认值是"true(非0)",当然你也可以修改它的值为"false"("0")。

  “freq”:是波纹的频率,也就是指定在这个对象上面一共需要产生多少个完整的波纹。

  “lightstrength”:参数可以对于波纹增强光影的效果。它的参数值范围是从0到100的整数值。

  “phase”:参数用来设置正弦波开始的偏移量。这个偏移量的通用值为0,但是你可以改变它。它的值从0到100之间,这个数值代表开始时的偏移量取自波长的百分比值。 例如如果值为25那么正弦波就从90度的方向开始。

  “strength”:表示波形的振幅大小,也可以简单的理解为扭曲的程度。

  XRAY 属性

  【Xray 属性】 Xray 滤镜可把对象的轮廓显现出来并将其加亮。就象“X光片”一样。可应用于创意特殊题材,Xray为无参数滤镜,功能单一,操作简单,效果明显。

  应用类样式

  【应用类样式】是唯一可以应用于文档中任何文本的 CSS 样式类型。与当前文档关联的所有类样式都显示在“CSS 样式”面板中和文本属性检查器的“样式”弹出式菜单中。

  提示:当预览外部 CSS 样式表中定义的样式时,务必要保存该样式表以确保所做的更改。

  【应用自定义 CSS 样式】

  在文档中,选择要应用 CSS 样式的文本。

  将插入点放在段落中将样式应用于整个段落。

  如果在单个段落中选择一个文本范围,则 CSS 样式只影响所选范围。

  若要指定要应用 CSS 样式的确切标签,请在位于“文档”窗口左下角的标签选择器中选择标签。

  请执行下列操作之一:

  在“CSS 样式”面板(“窗口”>“CSS 样式”)中,右键单击要应用的样式的名称,然后从上下文菜单选择“套用”。

  在文本属性检查器中,从“样式”弹出式菜单中选择要应用的类样式。

  在“文档”窗口中,右键单击所选文本,在上下文菜单中选择“CSS 样式”,然后选择要应用的样式。

  选择“文本”>“CSS 样式”,然后在子菜单中选择要应用的样式。

  【将自定义样式从选定内容中删除】

  选择要删除样式的对象或文本。 执行下列操作之一:

  在文本属性检查器中,从“样式”弹出式菜单中选择“无”。

  在“相关 CSS”选项卡中右键单击要删除的已应用规则,然后从上下文菜单中选择“设置类”>“无”。

  【关于 CSS 样式的冲突】将两个或更多的 CSS 样式应用于同一文本时,这些样式可能发生冲突并产生意外的结果。浏览器根据以下规则应用样式属性:

  如果将两种样式应用于同一文本,浏览器显示这两种样式的所有属性,除非特定的属性发生冲突。例如,一种样式可能将蓝色指定为文本颜色,而另一种样式可能指定红色作为文本颜色。

  如果应用于同一文本的两种样式的属性发生冲突,则浏览器显示最里面的样式(离文本本身最近的样式)的属性。因此,如果外部样式表和内联 CSS 样式同时影响文本元素,则应用内联样式。

  如果有直接冲突,则 CSS 样式(使用 class 属性应用的样式)中的属性将取代 HTML 标签样式中的属性。

  更多有关CSS滤境应用的知识请去CSS教学频道去查看

时间: 2024-08-29 16:50:32

Dreamweaver MX 2004 CSS使用教程之滤镜介绍2的相关文章

Dreamweaver MX 2004 CSS使用教程

css|dreamweaver|教程 1.Dreamweaver MX 2004 CSS使用教程之滤镜介绍2 [2005-03-06]     2.Dreamweaver MX 2004 CSS使用教程之CSS滤镜介绍 [2005-03-06]     3.Dreamweaver MX 2004 CSS使用教程之CSS扩展属性 [2005-03-06]     4.Dreamweaver MX 2004 CSS使用教程之CSS定位属性 [2005-03-06]     5.Dreamweaver

Dreamweaver MX 2004 CSS使用教程概述

css|dreamweaver|教程 本站原创内容,转载请注明出处网页教学网. 一.CSS概述 如今网页的排版格式越来越复杂,很多效果需要通过CSS来实现,Dreamweaver MX 2004在CSS功能设计上做了很大的改进.今天给大家具体谈谈如何使用Dreamweaver MX 2004 CSS功能,我相信当你看完这个教程之后你会觉得CSS使用是那样的简单,而创作出来的效果却是惊人的. 现代网页制作离不开 CSS技术,采用CSS技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加

Dreamweaver MX 2004 CSS使用教程之边框属性

css|dreamweaver|教程 本站原创内容,转载请注明出处网页教学网. 六.定义 CSS 样式边框属性 使用"CSS 样式定义"对话框的"边框"类别可以定义元素周围的边框的设置(如宽度.颜色和样式). 设置边框样式:在"CSS 样式定义"对话框中,选择"边框"(如下图),然后设置所需的样式属性. 请注意:下列任意属性如果您认为不重要可以保留为空. 样式:设置边框的样式外观.样式的显示方式取决于浏览器.DW MX 200

Dreamweaver MX 2004 CSS概述

css|dreamweaver · 一.CSS概述 如今网页的排版格式越来越复杂,很多效果需要通过CSS来实现,Dreamweaver MX 2004在CSS功能设计上做了很大的改进.今天给大家具体谈谈如何使用Dreamweaver MX 2004 CSS功能,我相信当你看完这个教程之后你会觉得CSS使用是那样的简单,而创作出来的效果却是惊人的. 现代网页制作离不开 CSS技术,采用CSS技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制. 用CSS不仅可以做出美观工整令

Dreamweaver MX 2004视频宝典教程(19)

dreamweaver|教程 第 19 集:Dreamweaver设计面板组 课程目标:学会Dreamweaver设计面板组的使用. 课程要点:Dreamweaver MX 2004设计面板组包括CSS样式面板和层面板.本节将简要介绍两个面板的使用方法. [全屏观看] | [下载视频] |

Dreamweaver MX 2004视频宝典教程(15)

dreamweaver|教程 第 15 集:Dreamweaver HTML工具栏使用 课程目标:学会Dreamweaver HTML工具栏中工具的使用. 课程要点:在Dreamweaver MX 2004的HTML工具栏中可以插入水平线,文件头,脚本编制,框架集,脚本等元素. [全屏观看] | [下载视频]

Dreamweaver MX 2004视频宝典教程(8)

dreamweaver|教程 第 08 集:Dreamweaver文档使用 课程目标:学会创建,打开,编辑文档 课程要点:学习在Dreamweaver MX 2004中创建,打开网页文件的方法. [全屏观看] | [下载视频]

Dreamweaver MX 2004 CSS使用教程之CSS滤镜介绍

css|dreamweaver|教程|滤镜 本站原创内容,转载请注明出处网页教学网. 十.CSS 滤境的详细介绍1 ALPHA 属性 [Alpha滤镜属性]这个名字,在Flash和Photoshop经常见到.它们的作用基本类似,就是把一个目标元素与背景混合.你可以指定数值来控制混合的程度.这种"与背景混合"通俗地说就是一个元素的透明度.通过指定坐标,可以指定点.线.面的透明度.由于"Alpha"滤镜的参数多,我们先来看一下下图: "opacity"

Dreamweaver MX 2004 CSS使用教程之CSS扩展属性

css|dreamweaver|教程 本站原创内容,转载请注明出处网页教学网. 九.定义 CSS 样式扩展属性 "扩展"样式属性包括过滤器.分页和光标选项,它们中的大部分效果仅受 Internet Explorer 4.0 和更高版本的支持. 指定扩展属性:在"CSS 样式定义"对话框中,选择"扩展"(如下图),然后设置所需的样式属性. 分页:在打印期间在样式所控制的对象之前或者之后强行分页.选择要在弹出式菜单中设置的选项.此选项不受任何 4.0