|
 第 二 章 标 签 应 用
第三十七节 css样式表应用（3） 
本节继续讲解css样式表的应用。本节讲解的内容为应用CSS样式制作滤镜文字。具体讲解五个方面的内容：一、DropShadow滤镜文字，二、alpha滤镜文字，三、shadow滤镜文字，四、glow滤镜文字，五、wave滤镜文字。
滤镜是CSS样式的亮点之一。本节讲解应用CSS样式滤镜设置文字。应用CSS样式滤镜可以制作出多种漂亮的文字来。
一、DropShadow滤镜：（重叠阴影效果）
DropShadow滤镜为各种对象添加投影。阴影算法基于模糊滤镜，使用同一个框型滤镜。投影样式有3个选项，包括内缘或外缘阴影和挖空模式。
语法：
filter: dropshadow(color=#01f000,offX=-2,offY=-2,Positive=1) 代码解析：
filter：滤镜。dropshadow：重叠阴影效果。color=#01f000：阴影颜色。offX=-2：阴影相对于原始对象的水平位移量。值为整数，单位为像素。若水平往右移，则正数；反之为负数。offY=-2
： 阴影相对于原始对象的垂直位移量。值为整数，单位为像素。若垂直往下移，则正数；反之为负数。Positive=1： 设置阴影的透明度。 0代表透明，
1代表不透明。 注：阴影的透明度设置为Positive=0时，阴影颜色呈现为长方形的小方块，阴影呈现为透明的白色阴影。 代码举例： 例1：<p style="width: 560px; filter:
dropshadow(color=#01f000,offX=2,offY=2,Positive=0);"><font
style="line-height: normal; font-size: 40pt; font-style: normal; font-variant:
normal; font-weight: normal;" color="#ff0000"
face="华文行楷"><b>“春天没来”欢迎您</b></font></p>
例2：<p style="width: 560px; filter:
dropshadow(color=#01f000,offX=2,offY=2,Positive=1);"><font
style="line-height: normal; font-size: 40pt; font-style: normal; font-variant:
normal; font-weight: normal;" color="#ff0000"
face="华文行楷"><b>“春天没来”欢迎您</b></font></p> 二、alpha滤镜：（透明效果）
Alpha滤镜，它的作用基本就是把一个目标元素与背景混合。你可以指定数值来控制混合的程度。这种“与背景混合”，通俗地说就是一个元素的透明度。通过指定坐标，可以指定点、线、面的透明度。由于“Alpha”滤镜的参数比较多，所以我们先来了解一下参数，各参数含义分别如下：
opacity：代表透明度水准。范围是从0~100，他们其实是百分比的形式。也就是说，0代表完全透明，100代表完全不透明。
finishopacity：是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来指定结束时的透明度。范围也是0 到 100。
style：指定了透明区域的形状特征。其中0代表统一形状、1代表线形、2代表放射状、3代表长方形。
StartX和StartY：代表渐变透明效果的开始X坐标和Y坐标。
“FinishX”和“FinishY”：代表渐变透明效果结束X坐标和Y 坐标。
在使用“Alpha”滤镜时要注意：
1、由于“Alpha”滤镜使当前元素部分透明，该元素下层的内容的颜色对整个效果起着重要作用，因此颜色的合理搭配相当重要；
2、透明度的大小要根据具体情况仔细调整，取一个最佳值。
语法： filter: alpha(opacity=100,finishOpacity=0,style=3)或者 filter: Alpha(Opacity=10, FinishOpacity=90, Style=3, StartX=0, StartY=0, FinishX=100, FinishY=100)
代码举例：
例1：<p style="width: 400px; filter: alpha(opacity=100,finishOpacity=0,style=3);"><font style="line-height: normal; font-size: 30pt; font-style: normal; font-variant: normal; font-weight: normal; background-color: rgb(0, 0, 0);" color="#00ff00" face="华文行楷"><b>“春天没来”欢迎您</b></font></p>
效果：
例2、<p style="width: 400px; filter: Alpha(Opacity=10, FinishOpacity=90, Style=3, StartX=0, StartY=0, FinishX=100, FinishY=100)；;"><font style="line-height: normal; font-size: 30pt; font-style: normal; font-variant: normal; font-weight: normal; background-color: rgb(0, 0, 0);" color="#00ff00" face="华文行楷"><b>“春天没来”欢迎您</b></font></p>
效果：
三、shadow滤镜
1、代码解析：
shadow滤镜，是投射阴影滤镜。这种滤镜，一般有三个参数。
Direction是指投影方向 。设置投影方向，按照顺时针方向进行，0度（或者360度）代表垂直向上，然后每45度为一个单位，共8个方向。
strength是指阴影散布的强度。该值越高，印记的颜色越深，而且阴影与背景之间的对比度也越强。有效值为 0 到 255。默认值为 1。
color：颜色。颜色的取值，可以应用十进制颜色，也可以应用十六进制颜色或者英语颜色名称取值。
2、表达方式：（下面的两种表达方式，都可以添加居中标签，使阴影文字居中。）
（1）<p style="width: 560px; height: 106px; color: rgb(255, 0, 0); line-height: 150%; font-family: 华文彩云; font-size: 40pt; filter: shadow(color=#00ff00,strength=60,direction=135);"><b>“春天没来”欢迎您</b></p>
把有关参数都设置在段落标签中。如上面的例子，调用了CSS样式。在样式中，设置了滤镜文字的宽度、颜色、行高、字体、字号、shadow滤镜的阴影颜色、投影强度和投影方向。还可以给文字内容添加粗体标签<b>。
（2）<font style="line-height: normal; font-size: 40pt; font-style: normal; font-variant: normal; font-weight: normal;" color="#ff0000" face="宋体">
<p style="width: 560px; height: 106px; filter: shadow(color=#ffff00,strength=60,direction=225);">
<b>“春天没来”欢迎您</b></p></font>
上面的代码，分两个标签设置样式。文字标签，调用了CSS样式。在样式中，设置了文字的行高、字号、风格、小型大写字母、粗细、颜色和字体。段落标签，调用了CSS样式。在样式中，设置了宽度、高度、shadow滤镜的阴影颜色、投影强度和投影方向。
效果：
3、要观察投影方向direction的效果，必须设置投影强度strength的数值，因为投影强度的默认值为 1，效果不明显。
4、在表达方式（1）中，前面的颜色color: red是文字颜色，后面的颜色color=black是阴影颜色。在表达方式（2）中，文字标签中的颜色color="#ff0000"是文字颜色，段落标签中的颜色color=black是阴影颜色。
5、投影方向的值以direction=225和direction=135效果最佳。
四、glow滤镜
glow滤镜：使设置对象边缘产生光晕的模糊效果 。
Color参数：设置边缘光晕的颜色。
strength参数：设置边缘光晕的强度大小，设置值为1~255的整数。
语法： style= “filter: glow(color=#000fff,strength=10)”要在图片上设置文字或对象的阴影效果时，背景颜色设为透明。
代码举例：
例1：<p style="width: 100%; color: rgb(0, 200, 0); line-height: 150%; font-family: 华文行楷; font-size: 30pt; filter: glow(color=#000fff,strength=4);"><b>相隔千里遥望你</b></p>
效果：
段落标签解析：
<段落 css样式＝“宽度：100％ 文字颜色：十进制颜色（红色值，绿色值，蓝色值）；行高：150％；文字字体：华文行楷；字号：30pt；滤镜：光晕滤镜（光晕颜色=#000fff，光晕强度＝4）；”>
例2：
<CENTER>
<P style="FILTER: glow(color=#000fff,strength=200); LINE-HEIGHT: 150%; WIDTH: 80%; FONT-FAMILY: 华文行楷; COLOR: rgb(0,200,0); FONT-SIZE: 30pt"><B>相隔千里遥望你</B></P></CENTER>
效果：
五、wave滤镜
wave滤镜：（波形效果）
语法： filter: wave(add=0,lightstrength=50,strength=4,freq=2,phrase=30)
代码解析：
Wave滤镜一共有五个参数。
Add：设置是否显示原对象。有两个参数值：True（或者为0）代表把对象按照波纹样式打乱，也就是不显示原对象；False（或者为非0）代表不打乱，也就是显示原对象。
LightStrength：使生成的波纹增强光的效果。参数值可以从0到100。
Freq：指生成波纹的频率，也就是指定在对象上共需要产生多少个完整的波纹。
Phase：用来设置正弦波开始的偏移量。这个值的通用值为0，它的可变范围为从0到100。这个值代表开始时的偏移量占波长的百分比。比如该值为25，代表正弦波从90度（360×25%）的方向开始偏移。
代码举例：
<center><p style="width: 60%; color: red; line-height: 150%; font-family: 华文行楷; font-size: 40pt; filter: wave(add=0,lightstrength=50,strength=4,freq=2,phrase=30) ;"><b>我爱北京天安门</b></p></center>
作业：
１、认识上面讲解的五种滤镜的名称及其代码，了解各种滤镜各自的显示效果。
２、认识上面讲解的五种滤镜各自的属性与数值（也就是参数），懂得它们所代表的意义。
３、认真阅读代码解析，深刻理解设置方法。
４、应用上面讲解的五种滤镜各制作一篇文章。
２０1 3年２月 4 日于北京
 第 二 章 标 签 应 用 
第三十八节 css样式表应用（４）
本节继续讲解css样式表的应用。本节讲解的内容为应用CSS样式制作滤镜图片。具体讲解九个方面的内容：一、Alpha滤镜图片、二、Blur滤镜图片、三、Gray滤镜图片（灰色效果）、四、Xray滤镜图片、五、Glow滤镜图片、六、Invert滤镜图片、七、wave滤镜图片、八、FlipH滤镜图片、九、FlipV滤镜图片。
一、Alpha滤镜图片：（渐变效果）
Alpha滤镜的作用，就是把一个目标元素与背景混合。你可以指定数值来控制混合的程度。这种“与背景混合”通俗地说就是一个元素的透明度。通过指定坐标，可以指定点、线、面的透明度。
表达方式：
style="filter:Alpha(style=1,opacity=100,finishopacity=0,startX=0,startY=0,finishX=50,finishY=50)"
代码举例：
代码注释：
opacity:开始处的透明度 。取值为0—100。0：表示完全透明；100：表示完全不透明。（这里设置的数值，实际上是不透明度的数值。）
finishOpacity:结束处的透明度。取值为0—100。0：表示完全透明；100：表示完全不透明。（这里设置的数值，实际上是不透明度的数值。）
style:样式或者风格。0：表示平均透明； 1：表示线状透明； 2：表示圆形透明； 3：表示菱形透明或者是方形透明。
startX：渐变开始时的X坐标，度量单位为图片宽度的百分比。X轴的开始处在图片的左边。
startY：渐变开始时的Y坐标，度量单位为图片高度的百分比。Y轴的开始处在图片的上边。
finish：渐变结束时的X坐标，度量单位为图片宽度的百分比。X轴的结束处在图片的右边。
finishY：渐变结束时的Y坐标，度量单位为图片高度的百分比。Y轴的结束处在图片的下边。
注意事项：
1、由于“Alpha”滤镜使当前元素部分透明，该元素下层的内容的颜色对整个效果起着重要作用，因此颜色的合理搭配相当重要。
2、透明度的大小要根据具体情况仔细调整，取一个最佳值。
★完全透明：就是只能看到下层的背景颜色，而看不到图片本身；完全不透明：就是看不到下层的背景颜色，只能看到图片本身。
四种类型的透明效果如下：
平均透明：style=0
线状透明：style=1
圆形透明：style=2
菱形透明：style=3
二、Blur滤镜图片：（模糊效果）
BLUR滤镜使元素产生模糊效果，运用得当可以产生高速移动的动感效果。
表达方式： style= “filter: blur(add=1,direction=90,strength=400)” （显示原来的图片，且以90度的方向模糊400px。）
代码解析：
add：设置图片是否要显示原来的对象。0为不显示，1为显示，缺省时默认值为1。模糊效果是按顺时针的方向进行的。
direction 用来设定模糊方向。模糊效果是按顺时针方向起作用的，45度为一个间隔，所以实际上只有八个方向值。0表示零度，代表 向上的方向。45表示向右上，90表示向右，135表示向右下，180表示向下。225表示向左下，270表示向左，315表示向左上。默认值为270度。
strength用来指定模糊半径的大小，单位是象素，默认值为5，取值范围为自然数，该取值决定了模糊效果的延伸范围。你也可以简单地理解为阴影的长度。
效果：
三、Gray滤镜图片（灰色效果）：
gray滤镜：将对象中的颜色去除，以变成黑白效果，gray滤镜无参数。
表达代码举例：
四、Xray滤镜图片（X光效果）
Xray滤镜是让对象反映出它的轮廓并把这些轮廓加亮，就像所谓的“X”光片。该滤镜没有参数。
表达方式：Filter:Xray
代码举例：
效果：
五、Glow滤镜图片：（光晕效果）
表达方式：
filter: Glow(strength=30,color=#4A7AC9)
代码解析：
Glow滤镜：光晕效果滤镜。 设置对象边缘产生光晕的模糊效果，类似于边框效果。
Glow滤镜一般有两个参数：Color和strength
Color：设置边缘光晕的颜色。
strength： 设置边缘光晕的强度大小，值为 1~255的整数。Glow滤镜的背景颜色应设为透明，否则难以看出阴影效果。
代码举例：
设置说明： 块区标签（或者段落标签）中的宽度≥图片标签中的宽度＋左右外边距的宽度，块区标签（或者段落标签）中的高度≥图片标签中的高度＋上下外边距的高度。不然的话，显示不出光晕效果。
六、Invert滤镜图片：
Invert滤镜可以把对象的可视化属性全部翻转，包括色彩、饱和度、和亮度值等（即颜色越浅的部位，会变得越深；颜色越深的部位，会变得越浅。）。当这个滤镜作用于彩色照片上，就会产生像照片底片一样的效果。这个滤镜无参数。
表达方式：filter: Invert
代码举例：
<img style="filter: Invert;" alt="色彩对换" src="http://userimage3.360doc.com/12/1113/17/10875950_201211131726340084.jpg" width="327"height=496>
效果：
| Invert滤镜图片 |
正常图片 |
七、wave滤镜图片（波形效果）：
wave滤镜可以让指定元素在垂直方向产生波纹状的变形。
表达方式：
style="FILTER: Wave(freq=7, strength=12, lightstrength=5, phase=0); 或者
style="filter:wave(add=0, freq=4, lightstrength=10, phase=45, strength=6)
代码解析：
Add：设置是否显示原对象。取 0 值（或者False值）表示不显示原对象，代表不打乱；取非 0 值（或者Ture值）显示原对象，代表把对象按照波纹样式打乱。
Freq：设置波动的个数，既波纹的频率，通过该值来指定一个对象要产生多少个完整的波纹。
LightStrength：设置对波浪的光照强度，取值从 0 到 100，数值越大表示光照越强。
Phase：设置波浪的起始相角，从 0 到 100 的百分数值。
Strength：代表波的振幅大小，取值为自然数。
代码举例：
效果：
八、FlipH滤镜图片：（左右翻转效果）
FlipH滤镜：左右翻转。此滤镜无参数。
表达方式：filter: FlipH
代码举例2：（左右复制图片与原图片要在同一行显示，最好把图片放入一行二列的表格中）
代码２效果：
说明：
1、FlipH滤镜图片与原来的正常图片放置在同一行。既可以通过两个图片的对比观察FlipH滤镜图片的效果，又能够制作成为精美的对称图片。
2、如果图片宽度较大，就把图片放入表格的单元格中。设置一个一行二列的表格，每个单元格中放入一个图片。
3、应用左右翻转滤镜，可以制作精美的对称图片。
九、FlipV滤镜图片：（上下翻转效果）
FlipV滤镜：上下翻转滤镜，也叫垂直翻转滤镜。此滤镜没有参数。
表达方式： style="filter: FlipV ;"
代码举例：
效果：
说明：
1、“上下翻转滤镜”图片与原图片最好分行显示。这样制作的网页有类似于倒影的效果。
2、如果图片的宽度较小，要在第一个图片标签的后面添加一个换行标签<br>，否则，两个图片就在同一行显示了。
作业：
１、认识上面讲解的九种滤镜的名称及其代码，了解各种滤镜各自的显示效果。
２、认识上面讲解的九种滤镜各自的属性与数值（也就是参数），懂得它们所代表的意义。
３、认真阅读代码解析，深刻理解设置方法。
４、应用上面讲解的九种滤镜各制作一篇文章。
|
