DropShadow屬性、Chroma屬性和blur屬性效果

來源:互聯網
上載者:User
ado

    DropShadow屬性


  DropShadow屬性是為了添加對象的陰影製作效果的。它實現的效果看上去就像使原來的對象離開頁面,然後在頁面上顯示出該對象的投影。看一看它的運算式:
  Filter:DropShadow(Color=color,Offx=Offx,Offy=offy,
            Positive=positive)
  該屬性一共有四個參數: Color代表投射陰影的顏色。 Offx和offy分別X方向和Y方向陰影的位移量。位移量必須用整數值來設定。如果設定為正整數,代表X軸的右方向和Y軸的向下方向。設定為負整數則相反。
  Positive參數有兩個值:True為任何非透明像素建立可見的投影,False為透明的像素部分建立可見的投影。
  同樣,我們先來看一個例子(見下圖):



  看,圖中的文字就像是從頁面上飛出來一樣,並且留下了一層淡淡的影子。
  實際上在這裡應用的就是CSS的DropShadow屬性,我們來看一下它的代碼:
  <html>
   <head>
   <title>dropshadow </title>
   <style>//*定義CSS樣式*//
   <!--
   div {position:absolute;top:20;width:300;
   filter:dropshadow(color=#FFCCFF,offx=15,offy=10,positive=1);}
    -->
   file://*定義DIV範圍內的樣式,絕對位置,投影的顏色為#FFCCFF,
    投影座標為向右位移15個像素,向下位移10個像素*//
   </style>
   </head>
   <body>
   <div>
   <p style=“font-family:matisse itc;font-size:64;
        font-weight:bold;color:#CC00CC;”>
   file://*定義字型名稱、大小、粗細、顏色*//
   Love Leaf </p>
   </div>
   </body>
   </html>
  和chroma屬性一樣,Dropshadow屬性對圖象的支援不好,我指的是JPEG、GIF格式的圖象檔案。不能支援的原因與Chroma一樣,因為這種圖象的顏色很豐富,很難找到一個投射陰影的位置。

    Chroma屬性
  Chroma屬性可以設定一個對象中指定的顏色為透明色,它的運算式如下:
  Filter:Chroma(color=color)
  這個屬性的運算式是不是很簡單,它只有一個參數。只需把您想要指定透明的顏色用Color參數設定出來就可以了。比如下面這幅圖:



  圖中顯示兩種字型,兩種顏色,我們現在對“leaves”字型添加chroma屬性,使其透明。代碼如下:
  <html>
   <head>
   <title>chroma filter</title>
   <style>
   <!--
    div{position:absolute;top:70;width:200;
      filter:chroma(color=green)}
   file://*定義DIV範圍內綠色為透明色,另外設定DIV的位置*//
   p{font-family:bailey;font-size:48;font-weight:bold;
   color:green} file://*設定P的字型名稱、大小、粗細、顏色*//
   em{font-family:lucida handwriting italic;font-size:48;
   font-weight:bold;color:rgb(255,51,153)}
   file://*設定EM的字型名稱、大小、粗細、顏色*//
   -->
   </style>
   </head>
   <body>
   <div>
   <p>LEAVES <em>LOVE</em></p>
   </div>
   </body>
  </html>
  通過上面代碼中對chroma的屬性設定,使綠色透明。顯示效果如下圖:



  我們看到綠色的leaves字型不見了,實際上它是透明了,在IE下點擊它所在的地區,它還是會顯示出來(見下圖):



  另外,需要注意的是,chroma屬性對於圖片檔案不是很適合。因為很多圖片是經過了減色和壓縮處理(比如JPG、GIF等格式),所以它們很少有固定的位置可以設定為透明。

   blur屬性

    通過blur屬性還可以設定頁面中的字型。如果把字型的blur屬性add參數值定義為1,得出來的字型效果是這樣的(如下圖):



  怎麼樣,是不是有些印象派的意思,這種效果的實現代碼如下:


  <html>
   <head>
   <title>filter blur</title>
   <style>//*CSS樣式定義開始*//
   <!--
   div{width:200;
   filter:blur(add=true,direction=90,strength=25);}
   file://*設定DIV樣式,濾鏡blur屬性*//
    -->
   </style>
   </head>
   <body>
   <div style=“width:702; height: 288”>
   <p style=“font-family:lucida handwirting italic;
    font-size:72;font-style:bold;color:rgb(55,72,145);” >
    LEAF</p>
   file://*定義字型名稱、大小、樣式、前景色彩*//
   </div>
   </body>
  </html>


  我們看到strength設定為25,如果把其值再改大一些,就會達到非常誇張的效果,同時把Direction參數值為180,顯示效果如下圖:



  用blur屬性設定字型可以達到很多效果,把direction和strength再做修改,還能達到多種效果,您可以自己修改試一試。



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。