本文位置:首页 > > 大陆新闻 >

代码入门教程(26)

文章发布时间:2015/5/27 10:06:27



【人生哲理】《做人百图(三)》颜真卿__《多宝塔感应碑》(资料汇编+精彩大图)6E城学艺归来。。韩式泡菜原来可以如此简单治腰椎间盘突出一偏方让“烤鱼”更香的三种方法

[转载]学八字要重视传统的命理基础知识图文:特效药方揭秘之久治不愈的胃病祖传秘方比黄金更珍贵的语言2012,真正的崩溃在滞胀中开场回味茶--驼色休闲开衫巧用暂停原则:磨刀不误砍柴工葱油胡萝卜丝2012.12.21果然很罕见的图图五分钟面部按摩动作防止衰老纪录片专题专场36部企业人要学会“换位思考”![装修风格]小居室大世界53平匠心独特家!小而精致郑金洲:我们需要什么样的课堂(1)请帖、介绍信、约会书信的写法和礼貌用语陆波谈作文技巧视频:印度称其航母可秒杀辽宁号威胁北京上海...风水常识关于分开离别的伤感个性签名一切的甜言蜜语终究抵不过一句再见当您计算成功成本的时候,怎么办?误诊率=死亡率,谁在变相杀人?国内外道德性的研究和理论Excel中计算工龄和年龄的方法总结大全倒走锻炼的正确方法人体存在寒气的秘密解读韩兴娥的课内海量阅读教学模式

记忆中的宣传画…【绘画欣赏】中医精髓:左病右治,右病左治中国特色社会主义理论体系的文化蕴含解读韩兴娥的课内海量阅读教学模式

第 二 章 标 签 应 用

第三十七节 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、认识上面讲解的五种滤镜的名称及其代码,了解各种滤镜各自的显示效果。
2、认识上面讲解的五种滤镜各自的属性与数值(也就是参数),懂得它们所代表的意义。
3、认真阅读代码解析,深刻理解设置方法。
4、应用上面讲解的五种滤镜各制作一篇文章。
 
201 3年2月 4 日于北京
 
 
第 二 章 标 签 应 用

第三十八节 css样式表应用(4)
“春天没来”欢迎您
  本节继续讲解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)"
  代码举例:
例1:<img style="width: 551px; filter: alpha(opacity=100,style=2);" src="/pic-htc/2015/04/25/12986726_16" width="450" height="450">
例2:<p style="width: 375px; height: 553px; filter: Alpha(opacity=50,finishOpacity=0,style=0);"> <img src="/pic-htc/2015/04/25/24115099_1.jpg" width="375" height="553" > </p>
  代码注释:
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,取值范围为自然数,该取值决定了模糊效果的延伸范围。你也可以简单地理解为阴影的长度。
  代码举例:
<P style="FILTER: blur(add=1,direction=45,strength=100); WIDTH: 375px; HEIGHT: 553px"><IMG src="/pic-htc/2015/04/25/24115099_1.jpg" width=375 height=553></P>
  效果:

  三、Gray滤镜图片(灰色效果):
gray滤镜:将对象中的颜色去除,以变成黑白效果,gray滤镜无参数。
表达代码举例:
<IMG style="FILTER: Gray" id=Gray滤镜图片 src="/pic-htc/2015/04/25/28193664_1.jpg" width=375 height=553>
  效果:
  四、Xray滤镜图片(X光效果)
Xray滤镜是让对象反映出它的轮廓并把这些轮廓加亮,就像所谓的“X”光片。该滤镜没有参数。
  表达方式:Filter:Xray
  代码举例:
<img style="filter: Xray;" id="Xray滤镜图片" src="/pic-htc/2015/04/25/10892606_201301101619050934.jpg" width="375" height="553">
  效果:
  五、Glow滤镜图片:(光晕效果
  表达方式:
filter: Glow(strength=30,color=#4A7AC9)
  代码解析:
Glow滤镜:光晕效果滤镜。 设置对象边缘产生光晕的模糊效果,类似于边框效果。
Glow滤镜一般有两个参数:Color和strength
Color:设置边缘光晕的颜色。
strength: 设置边缘光晕的强度大小,值为 1~255的整数。Glow滤镜的背景颜色应设为透明,否则难以看出阴影效果。
  代码举例:
<div style="width: 430px; height: 330px; filter: Glow(strength=30,color=#4A7AC9);"><img style="border-width: 0px; margin: 10px 20px 20px 10px; width: 400px; height: 300px;" title="图片外边距--。春天没来。" alt="" src="/pic-htc/2015/04/25/29434364_1.gif"></div>
  设置说明:
  块区标签(或者段落标签)中的宽度≥图片标签中的宽度+左右外边距的宽度,块区标签(或者段落标签)中的高度≥图片标签中的高度+上下外边距的高度。不然的话,显示不出光晕效果。
  效果:

  六、Invert滤镜图片:
Invert滤镜可以把对象的可视化属性全部翻转,包括色彩、饱和度、和亮度值等(即颜色越浅的部位,会变得越深;颜色越深的部位,会变得越浅。)。当这个滤镜作用于彩色照片上,就会产生像照片底片一样的效果。这个滤镜无参数。
  表达方式:filter: Invert
  代码举例:
<img style="filter: Invert;" alt="色彩对换" src="/pic-htc/2015/04/25/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:代表波的振幅大小,取值为自然数。
  代码举例:
<IMG style="FILTER: Wave(freq=7,strength=12,lightstrength=5,phase=0); WIDTH: 327px; HEIGHT: 496px" border=0 src="/pic-htc/2015/04/25/28193664_1.jpg">
  效果:
  八、FlipH滤镜图片:(左右翻转效果)
  FlipH滤镜:左右翻转。此滤镜无参数。
  表达方式:filter: FlipH
   代码举例1:
<div><img style="filter: fliph;" alt="水平反转" src="
/pic-htc/2015/04/25/28193664_1.jpg" width="327" height="496"><img alt="正常图片" src="/pic-htc/2015/04/25/28193664_1.jpg" width="327" height="496"></div>
   代码举例2:左右复制图片与原图片要在同一行显示,最好把图片放入一行二列的表格中)
<table border="0" cellSpacing="0" cellPadding="0" width="640" height="280">
<tbody>
<tr>
<td>
<img style="border-width: 0px; margin: 0px; width: 320px; height: 280px; filter: FlipH;" src="
http://image58.360doc.com/DownloadImg/2013/01/2515/29834606_1.gif">
</td>
<td><img style="border-width: 0px; margin: 0px; width: 320px; height: 280px;" src="
http://image58.360doc.com/DownloadImg/2013/01/2515/29834606_1.gif">
</td>
</tr></tbody></table>
  代码2效果:
正常图片水平反转
  说明:
1、FlipH滤镜图片与原来的正常图片放置在同一行。既可以通过两个图片的对比观察FlipH滤镜图片的效果,又能够制作成为精美的对称图片。
2、如果图片宽度较大,就把图片放入表格的单元格中。设置一个一行二列的表格,每个单元格中放入一个图片。
3、应用左右翻转滤镜,可以制作精美的对称图片。
  九、FlipV滤镜图片:(上下翻转效果)
    FlipV滤镜:上下翻转滤镜,也叫垂直翻转滤镜。此滤镜没有参数。
  表达方式: style="filter: FlipV ;"
  代码举例:
<p><img alt="垂直翻转" src="/pic-htc/2015/04/25/20858282_1.jpg" width="440" height="228"><img style="filter: FlipV;" alt="垂直反翻转" src="/pic-htc/2015/04/25/20858282_1.jpg" width="440" height="228"></p>
  效果:

垂直翻转
垂直反翻转

  说明:
1、“上下翻转滤镜”图片与原图片最好分行显示。这样制作的网页有类似于倒影的效果。
2、如果图片的宽度较小,要在第一个图片标签的后面添加一个换行标签<br>,否则,两个图片就在同一行显示了。
  作业:
1、认识上面讲解的九种滤镜的名称及其代码,了解各种滤镜各自的显示效果。
2、认识上面讲解的九种滤镜各自的属性与数值(也就是参数),懂得它们所代表的意义。
3、认真阅读代码解析,深刻理解设置方法。
4、应用上面讲解的九种滤镜各制作一篇文章。
 


(2014-06-23 08:49:11) 咸阳武功的挂面村在陕西享有盛名,在这个以面食为傲的地界儿,以做手工面为生的村子不在少数。手工挂面自古就是秦地的特产,有人说,没吃过手工挂面的人肯定不是地道的老陕。我不是这片土地土生土长的人,但在西安十余载,对这筋斗爽滑的手工挂面也如同老陕般有了深厚的感情,甚至上了瘾。 《舌尖Ⅱ》让陕北榆林的空心挂面走进人们的视野,爱吃面的老

(2014-06-23 08:49:11) 咸阳武功的挂面村在陕西享有盛名,在这个以面食为傲的地界儿,以做手工面为生的村子不在少数。手工挂面自古就是秦地的特产,有人说,没吃过手工挂面的人肯定不是地道的老陕。我不是这片土地土生土长的人,但在西安十余载,对这筋斗爽滑的手工挂面也如同老陕般有了深厚的感情,甚至上了瘾。 《舌尖Ⅱ》让陕北榆林的空心挂面走进人们的视野,爱吃面的老



不存在相应的目录