CSS3 Gradients 漸層效果

CSS3 Gradients 是用來設計漸層效果的新功能,在傳統的網頁設計中,如果要設計出一個漸層的背景顏色或一個具有漸層色彩的區塊,需要透過圖片的設計來處理,但是到了 CSS3 的發展,這樣的傳統設計思維有所改變,CSS3 推出了一個名為 Gradients 的功能,可以設計出不同的漸層效果,僅需透過 Gradients 的調整,例如漸層方向、漸層所呈現的顏色、漸層的呈現形狀,就可以很輕易的讓瀏覽器自己產生出漸層效果,可以應用在網頁本身的背景漸層效果或是區外的漸層視覺效果,優點是不用先設計漸層圖片、減少頻寬的浪費,而且漸層放大後的效果也比傳統的圖片式漸層效果好,因為是用瀏覽器自動產生的漸層,優點自然不在話下。

CSS3 Gradients 目前有兩種漸層效果,分別是線性漸層(Linear Gradients)以及徑向漸層(Radial Gradients),這兩者的設定方式不太一樣,實際的視覺效果當然也不一樣,本篇會依序提供它們的實際範例給各位讀者朋友參考。

瀏覽器對 CSS3 Gradients 的支援程度
  • IE 10.0 及以上的版本支援。
  • Google Chrome 26.0 及以上的版本支援。
  • FireFox 16.0 及以上的版本支援。
  • Apple Safari 6.1 及以上的版本支援。
  • Opera 12.1 及以上的版本支援。
以上整理的是各家主流瀏覽器對 CSS3 Gradients 的支援程度,幾乎最新版本的瀏覽器都已經支援,不過在設計 Gradients 的時候,還是建議多找幾個瀏覽器實際測試效果,為了讓效果表現成功率更高,建議使用各種瀏覽器適用前綴,整理如下。

瀏覽器適用前綴
  • Google Chrome 與 Apple Safari 使用 -webkit-
  • Mozilla FireFox 使用 -moz-
  • Opera 使用 -o-
線性漸層(Linear Gradient)與徑向漸層(Radial Gradients)的語法規則
線性漸層語法:background: linear-gradient(方向,顏色1,顏色2, ......);
徑向漸層語法:background: radial-gradient(ellipse 或 circle,顏色1,顏色2, ......);
線性漸層的方向可以是由上而下漸層、由下而上漸層、由左而右或由右而左漸層,甚至可以設定漸層角度,徑向漸層的部份則可以使用預設的橢圓形(ellipse)或自定為圓形(circle)漸層效果,這些都會在以下的範例中呈現給各位看。

CSS3 Gradients 的線性漸層 Linear Gradients 效果範例

Gradients 可以設定線性漸層的方向,預設值為由上而下,也允許網頁設計師設定為由左而右、由右而左甚至是對角線的線性表現,分別表現如下範例語法。

由上而下的線性漸層效果(預設值)
<style type="text/css">
#T2B{
width:200px;
height:150px;
background: -webkit-linear-gradient(yellow,red);
background: -o-linear-gradient(yellow,red);
background: -moz-linear-gradient(yellow,red);
background: linear-gradient(yellow,red);
}
</style>
<div id="T2B"></div>
範例的實際效果
此範例設定的是由黃色開始漸層至紅色的效果,預設由上而下漸層。

由左而右的線性漸層效果
<style type="text/css">
#L2R{
width:200px;
height:150px;
background: -webkit-linear-gradient(left,yellow,red);
background: -o-linear-gradient(right,yellow,red);
background: -moz-linear-gradient(right,yellow,red);
background: linear-gradient(to right,yellow,red);
}
</style>
<div id="L2R"></div>
範例的實際效果
雖然預設的 CSS3 Gradients 的線性漸層的預設效果是由上而下,但是也允許設計師採用橫向的漸層,例如此範例的由左而右漸層,值得注意的是適用於 Google Chrome 與 Apple Safari 使用的前綴 -webkit- 第一個方向參數要用"從哪個方向開始"的概念,像語法中寫 left 就代表第一個顏色 yellow 是從左方開始向右漸層為 red,其它的瀏覽器則是用"向哪個方向漸層"的概念,所以第一個方向參數寫成 right 代表"向右漸層"的意思。

對角線的線性漸層效果(由左下向右上
<style type="text/css">
#B2R{
width:200px;
height:150px;
background: -webkit-linear-gradient(left top,yellow,red);
background: -o-linear-gradient(bottom right,yellow,red);
background: -moz-linear-gradient(bottom right,yellow,red);
background: linear-gradient(to bottom right,yellow,red);
}
</style>
<div id="B2R"></div>
範例的實際效果
如果由上而下漸層或由左而右水平方向的漸層無法滿足實際需求,也可以像此範例採用對角線的漸層方式,同樣的,適用於 Google Chrome 與 Apple Safari 使用的前綴 -webkit- 第一個方向參數要用"從哪個方向開始漸層",而其他的瀏覽器則使用"向哪個方向漸層"的概念。

利用角度調整的線性漸層效果
<style type="text/css">
#UA{
width:200px;
height:150px;
background: -webkit-linear-gradient(90deg,yellow,red);
background: -o-linear-gradient(90deg,yellow,red);
background: -moz-linear-gradient(90deg,yellow,red);
background: linear-gradient(90deg,yellow,red);
}
</style>
<div id="UA"></div>
範例的實際效果
我們在這個範例中採用角度來決定漸層的方向,CSS3 Gradients 的預設漸層方向是由上而下,不過在此我們利用 gradients 的第一個參數並設定為 90deg,也就是轉 90 度的意思,讓原本由上而下漸層的效果變成由左而右漸層,轉的角度允許設計師自己決定。

CSS3 Gradients 的徑向漸層 Radial Gradients 效果範例
<style type="text/css">
#ellipse{
width:200px;
height:100px;
background: -webkit-radial-gradient(ellipse,white,orange);
background: -o-radial-gradient(ellipse,white,orange);
background: -moz-radial-gradient(ellipse,white,orange);
background: radial-gradient(ellipse,white,orange);
}
#circle{
width:200px;
height:100px;
background: -webkit-radial-gradient(circle,white,orange);
background: -o-radial-gradient(circle,white,orange);
background: -moz-radial-gradient(circle,white,orange);
background: radial-gradient(circle,white,orange);
}
</style>
<div id="ellipse">ellipse</div>
<div id="circle">circle</div>
範例的實際效果
ellipse
circle
CSS3 Gradients 不僅可以設計出線性漸層效果,還可以設計出徑向漸層 Radial Gradients 效果,所謂的徑向漸層就是像範例這樣圓形的漸層,Gradients 預設的 Radial 漸層是橢圓形(ellipse)的,允許網頁設計師修改為圓形(circle)漸層效果,從範例的呈現效果可以很明顯得看出橢圓形(ellipse)與圓形(circle)漸層的效果差異。

更多 CSS3 設計
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012