代碼學習群簡易教程(24)

  代碼學習群簡易教程(24)濾鏡2

代碼學習群簡易教程(24)

本節繼續講解css的常用濾鏡。

一、Blur濾鏡:模糊效果濾鏡。用於使元素產生模糊效果,運用得當可以產生高速移動的動感效果。

1、濾鏡樣式舉例:

style=”filter:blur(add=ture,direction=135,strength=10)”

blur濾鏡有三個屬性。

Add屬性意思是指定圖片是否被改變成模糊效果。有兩種屬值:true或者非0數表示要顯示模糊效果,false或者0表示不顯示模糊效果(實際上是另一種模糊效果)。默認值為顯示模糊效果。

Direction屬性用來設置模糊的方向。模糊的方向是按順時針方向旋轉的,45度為一個間隔,所以實際上只有八個方向值。0表示向上的方向。45表示右上,90表示向右,135表示右下,180表示向下。225表示左下,270表示向左,315表示左上。

Strength屬性:用來指定模糊效果的強度,單位是像素,默認值為5。取值範圍為自然數,該取值決定了模糊效果的延伸範圍。你也可以簡單地理解為陰影的長度。

2、blur濾鏡文字:

blur濾鏡文字有三種設置方法:

(1)用文字標籤與段落標籤(或者塊區標籤)組合應用,把濾鏡樣式設置在文字標籤中。段落標籤中要設置背景顏色或者背景圖片。

<P style=”BACKGROUND-COLOR: #00ff00″ align=center><FONT style=”FILTER: blur(add=ture,direction=45,strength=8); LETTER-SPACING: 7px; DISPLAY: inline-block; FONT-FAMILY: 微軟雅黑; COLOR: rgb(0,0,0); FONT-SIZE: 36pt”>歡迎您!加入代碼學習群!</FONT></P>

(2)只應用段落標籤(或者塊區標籤),把濾鏡樣式設置在段落(或者塊區標籤)標籤中,還要設置背景顏色或者背景圖片。

<P style=”FILTER: blur(add=ture,direction=45,strength=8); BACKGROUND-COLOR: #005050; LETTER-SPACING: 7px; DISPLAY: inline-block; FONT-FAMILY: 微軟雅黑; COLOR: rgb(255,255,0); FONT-SIZE: 36pt” align=center>歡迎您!加入代碼學習群!</P>

(3)只應用文字標籤,把濾鏡樣式設置在文字標籤中,還要設置背景顏色或者背景圖片。

<FONT style=”FILTER: blur(add=ture,direction=45,strength=8); BACKGROUND-COLOR: #00ff00; LETTER-SPACING: 7px; DISPLAY: inline-block; FONT-FAMILY: 微軟雅黑; COLOR: rgb(0,0,255); FONT-SIZE: 36pt” align=”center”>歡迎您!加入代碼學習群!</FONT>

用上面三種方法設置的濾鏡效果基本上是一致的。濾鏡的顏色與強度都可以根據自己的喜愛進行修改。

這裡要說明的是:如果把濾鏡的樣式設置在文字標籤中,屬性:DISPLAY: inline-block;不可省略。省略以後,濾鏡效果就顯示不出來了。

3、blur濾鏡圖片:

blur濾鏡圖片也有三種設置方法:

舉例如下:

(1)用圖片標籤與段落標籤(或者塊區標籤)組合應用,把濾鏡樣式設置在圖片標籤中,段落標籤(或者塊區標籤)要設置背景顏色或者背景圖片。

<P style=”BACKGROUND-COLOR: #0000ff; WIDTH: 500px” align=center><IMG style=”FILTER: blur(add=ture,direction=135,strength=5000)” id=Gray濾鏡圖片 title=”春天沒來 教你學濾鏡” src=”http://userimage3.360doc.com/13/0110/16/10892606_201301101619050934.jpg” width=500 height=750> </P>

(2)在表格標籤中設置背景顏色或者背景圖片(也可以設置在表格的列標籤中)。在單元格內放入圖片,把濾鏡樣式設置在圖片標籤中。

<TABLE style=”BACKGROUND-COLOR: #ff0000; WIDTH: 500px; HEIGHT: 750px” border=0 cellSpacing=0 cellPadding=0>

<TBODY>

<TR>

<TD><IMG style=”FILTER: blur(add=ture,direction=135,strength=5000); WIDTH: 500px; HEIGHT: 750px” title=”春天沒來 教你學濾鏡” border=0 src=”http://userimage3.360doc.com/13/0110/16/10892606_201301101619050934.jpg”> </TD></TR></TBODY></TABLE>

(3)在移動標籤中設置背景顏色或者背景圖片,把濾鏡樣式設置在圖片標籤中,用移動標籤控制圖片。

<MARQUEE style=”BACKGROUND-COLOR: #ffff00″ title=”春天沒來 教你學濾鏡” direction=up height=280 width=480 scrollAmount=3 scrollDelay=10><IMG style=”FILTER: blur(add=ture,direction=135,strength=5000); WIDTH: 500px; HEIGHT: 750px” title=”春天沒來 教你學濾鏡” border=0 src=”http://userimage3.360doc.com/13/0110/16/10892606_201301101619050934.jpg”></MARQUEE>

當然了,只用圖片標籤,把濾鏡樣式設置在圖片標籤中也是可以的,但是,效果不大好。

代碼學習群簡易教程(24)
  代碼學習群簡易教程(24)
  代碼學習群簡易教程(24)
  代碼學習群簡易教程(24)

代碼學習群簡易教程(24)
  代碼學習群簡易教程(24)
  代碼學習群簡易教程(24)
  代碼學習群簡易教程(24)

二、水平翻轉濾鏡

水平翻轉,也叫左右翻轉。水平翻轉濾鏡可以製作出對稱圖片效果。

水平翻轉濾鏡樣式:style=”FILTER: FlipH”

1、水平翻轉濾鏡文字:

水平翻轉濾鏡文字有三種製作方法。

(1)段落標籤(或者塊區標籤)中設置濾鏡樣式,設置寬度;文字標籤中設置文字的常用屬性。

代碼舉例:

<P style=”FILTER: FlipH; WIDTH: 560px”><FONT style=”COLOR: rgb(255,0,0); FONT-SIZE: 40pt” face=華文行楷><B>代碼學習群 歡迎您</B></FONT></P>

(2)把濾鏡樣式與文字屬性都設置在段落標籤或者塊區標籤中,還要設置寬度值。(請注意:文字屬性必須用css樣式設置,不能html用代碼設置。)

代碼舉例:

<P style=”FILTER: FlipH; WIDTH: 560px; COLOR: rgb(255,0,0); FONT-SIZE: 40pt; face: 華文行楷”><B>代碼學習群 歡迎您</B></P>

(3)把濾鏡樣式與文字屬性等都設置在文字標籤中。(請注意:別丟失了寬度值,別丟失了DISPLAY: inline-block屬性。)

代碼舉例:

<FONT style=”FILTER: FlipH; WIDTH: 560px; DISPLAY: inline-block; COLOR: rgb(255,0,0); FONT-SIZE: 40pt; face: 華文行楷”><B>代碼學習群 歡迎您</B></FONT>

2、水平翻轉濾鏡圖片:

水平翻轉濾鏡圖片有兩種設置方法:

(1)把濾鏡樣式設置在段落標籤(或者塊區標籤)中。這種設置方法有些瀏覽器不支持。

代碼舉例:

<P style=”FILTER: FlipH” align=center><IMG id=水平翻轉濾鏡圖片 title=水平翻轉濾鏡圖片 src=”http://userimage3.360doc.com/13/0110/16/10892606_201301101619050934.jpg” width=250 height=375> </P>

5

(2)把濾鏡樣式設置在圖片標籤:

代碼舉例:

<IMG id=原圖片 title=原圖片 src=”http://userimage3.360doc.com/13/0110/16/10892606_201301101619050934.jpg” width=250 height=375>

為了能夠比較出「水平翻轉圖片」與「原圖片」的不同顯示效果,我們常常需要把這兩種圖片放在同一行。其方法為:把這兩種圖片放置在一個段落標籤(或者塊區)中。要注意:應用這種方法,圖片的寬度最好不要超過330px。

舉例如下:

<P align=center><IMG id=原圖片 title=原圖片 src=”http://image73.360doc.com/DownloadImg/2014/06/0414/42301628_33.jpg” width=250 height=375> <IMG style=”FILTER: FlipH” id=水平翻轉濾鏡圖片 title=水平翻轉濾鏡圖片 src=”http://image73.360doc.com/DownloadImg/2014/06/0414/42301628_33.jpg” width=250 height=375> </P>

效果如下:

代碼學習群簡易教程(24)
  代碼學習群簡易教程(24)

如果圖片的寬度比較大,就應該把這兩種圖片放置到一行二列的表格中。

舉例如下:

<TABLE style=”TEXT-ALIGN: left; WIDTH: 500px; BORDER-COLLAPSE: collapse; HEIGHT: 27px” border=0 cellSpacing=0 cellPadding=3 width=500>

<TBODY>

<TR>

<TD><IMG id=原圖片 title=原圖片 src=”http://image59.360doc.com/DownloadImg/2013/02/2108/30438681_10.jpg” width=500 height=780></TD>

<TD><IMG style=”FILTER: FlipH” id=水平翻轉濾鏡圖片 title=水平翻轉濾鏡圖片 src=”http://image59.360doc.com/DownloadImg/2013/02/2108/30438681_10.jpg” width=500 height=780> </TD></TR></TBODY></TABLE>

代碼學習群簡易教程(24)
  代碼學習群簡易教程(24)
  代碼學習群簡易教程(24)
  代碼學習群簡易教程(24)

代碼學習群簡易教程(24)
  代碼學習群簡易教程(24)
  代碼學習群簡易教程(24)
  代碼學習群簡易教程(24)

三、垂直翻轉濾鏡:

垂直翻轉,也叫上下翻轉。垂直翻轉濾鏡可以製作出類似倒影的圖片效果。

垂直翻轉濾鏡樣式:style=”filter: FlipV”

1、垂直翻轉濾鏡文字:

垂直翻轉濾鏡文字有三種製作方法。

(1)段落標籤(或者塊區標籤)中設置濾鏡樣式,設置寬度;文字標籤中設置文字的常用屬性。

<P style=”FILTER: FlipV” WIDTH: 560px”><FONT style=”COLOR: rgb(255,0,0); FONT-SIZE: 40pt” face=華文行楷><B>代碼學習群 歡迎您</B></FONT></P>

(2)把濾鏡樣式與文字屬性都設置在段落標籤或者塊區標籤中,還要設置寬度值。(請注意:文字屬性必須用css樣式設置,不能html用代碼設置。)

代碼舉例:

<P style=”FILTER: FlipV; WIDTH: 560px; COLOR: rgb(0,0,255); FONT-SIZE: 40pt; face: 華文行楷”><B>代碼學習群 歡迎您</B></P>

(3)把濾鏡樣式與文字屬性等都設置在文字標籤中。(請注意:別丟失了寬度值,別丟失了DISPLAY: inline-block屬性。)

<FONT style=”FILTER: FlipV; WIDTH: 560px; DISPLAY: inline-block; COLOR: rgb(255,0,0); FONT-SIZE: 40pt; face: 華文行楷”><B>代碼學習群 歡迎您</B></FONT>

2、垂直翻轉濾鏡圖片:

垂直翻轉濾鏡圖片有兩種設置方法:

(1)把濾鏡樣式設置在段落標籤(或者塊區標籤)中。這種設置方法有些瀏覽器不支持。

代碼舉例:

<P style=”FILTER: FlipV” align=center><IMG id=垂直翻轉濾鏡圖片 title=垂直翻轉濾鏡圖片 src=”http://image.360doc.com/DownloadImg/2008/6/28/42071_1379336_13.jpg” width=400 height=375></P>

(2)把濾鏡樣式設置在圖片標籤中。

代碼舉例:

<IMG style=”FILTER: FlipV” id=垂直翻轉濾鏡圖片 title=垂直翻轉濾鏡圖片 src=”http://image.360doc.com/DownloadImg/2008/6/28/42071_1379336_13.jpg” width=400 height=375>

為了顯示出類似倒影的效果,最好把原圖片和垂直翻轉圖片放置到二行一列的表格中。

代碼舉例:

<TABLE style=”TEXT-ALIGN: center; WIDTH: 400px; BORDER-COLLAPSE: collapse; HEIGHT: 52px” border=0 cellSpacing=0 cellPadding=0>

<TBODY>

<TR>

<TD><IMG id=原圖片 title=原圖片 src=”http://image.360doc.com/DownloadImg/2008/6/28/42071_1379336_13.jpg” width=400 height=375></TD></TR>

<TR>

<TD><IMG style=”FILTER: FlipV” id=垂直翻轉濾鏡圖片 title=垂直翻轉濾鏡圖片 src=”http://image.360doc.com/DownloadImg/2008/6/28/42071_1379336_13.jpg” width=400 height=375></TD></TR></TBODY></TABLE>

代碼學習群簡易教程(24)
  代碼學習群簡易教程(24)
  代碼學習群簡易教程(24)
  代碼學習群簡易教程(24)

代碼學習群簡易教程(24)
  代碼學習群簡易教程(24)
  代碼學習群簡易教程(24)
  代碼學習群簡易教程(24)

作業:

一、寫出Blur濾鏡的表達方式。

二、寫出Blur濾鏡的三種屬性以及它們所表示的意義。

三、寫出Blur濾鏡文字的三種設置方法。

四、寫出Blur濾鏡圖片的三種設置方法。

五、寫出水平翻轉濾鏡的表達方式。

六、寫出水平翻轉濾鏡文字的三種設置方法。

七、寫出水平翻轉濾鏡圖片的兩種設置方法。

八、寫出垂直翻轉濾鏡的表達方式。

九、寫出垂直翻轉濾鏡文字的三種設置方法。

十、寫出垂直翻轉濾鏡圖片的兩種設置方法。

十一、應用本節講解的三種濾鏡,各製作一篇文字網頁與圖片網頁。

十二、如果原圖片與濾鏡圖片,不能在同一行顯示,有什麼處理的方法?

「春天沒來」編撰

2014年7月12日於北京