CSS3 網頁漸層背景顏色效果設計

網頁漸層背景顏色效果是現在網頁設計師經常使用的一種技巧,傳統的網頁設計必須使用漸層圖片來當作網頁背景圖片,才能呈現出網頁漸層背景顏色的效果,不過 CSS3 有推出一個新的 Gradients 漸層效果功能,透過這一個 Gradients 設定就能輕鬆的讓瀏覽器自動替網頁呈現出漸層背景效果,不需要準備漸層圖片就能做到這樣的視覺效果,而且還可以設定漸層所要呈現的顏色與方向,顏色可以設定多個不同的顏色去變化,方向也可以設定上下左右延伸以及透過角度呈現,甚至可以設計成徑向漸層效果,功能非常強大。

CSS3 的 Gradients 漸層效果功能語法
線性漸層語法:background: linear-gradient(方向,顏色1,顏色2, ......);
徑向漸層語法:background: radial-gradient(ellipse 或 circle,顏色1,顏色2, ......);
CSS3Gradients 漸層效果功能是直接套用在 background 屬性中的一個功能,我們這篇介紹的兩種漸層方式差別在於 gradient 的前綴,線性漸層的前綴是 linear,徑向漸層的前綴則是 radial,除此之外,為了可以獲得最佳的瀏覽器支援效果,我們會在 gradient 的最前面再加上瀏覽器的前綴,讓瀏覽器知道我們要顯示 gradient 的功能,這些前綴整理如下。

瀏覽器適用前綴
  • Google Chrome 與 Apple Safari 使用 -webkit-
  • Mozilla FireFox 使用 -moz-
  • Opera 使用 -o-
我們將以上的語法關念套用到範例看看設計出來的效果吧!

CSS3 網頁漸層背景顏色效果設計範例一、線性漸層
<style type="text/css">
body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#container{
height:1000px;
margin-top:0px;
background: -webkit-linear-gradient(yellow,red);
background: -o-linear-gradient(yellow,red);
background: -moz-linear-gradient(yellow,red);
background: linear-gradient(yellow,red);
}
</style>
<body>
    <div id="container">
        ...網站內容...
    </div>
</body>
範例呈現的效果
網頁線性漸層背景顏色圖片一
範例中的 HTML 網頁部份共有兩個結構,其中一個就是網頁本身的 body 標籤,中間包著一個名為 container 的 DIV 區塊,這樣設計的用意在於利用 container 區塊的寬度與高度來填滿整個網頁比較有彈性,如果單純的在 body 標籤設定 CSS3Gradients 漸層效果,會造成當網頁內容長度太長,超出預設的 body 標籤高度,超出的部份就不會有漸層背景顏色,所以我們在 body 標籤並未固定一個高度,而是在 container  區塊內設高度,隨著網頁內容的多寡再自己調整要顯示的漸層背景顏色範圍即可。

各位可以在範例中看到這個網頁的漸層背景顏色是由上往下發展,從第一個顏色黃色(yellow)開始漸漸變成紅色(yellow),你也可以設定更多不同的顏色、調整漸層的發展方向,更多變化請參閱《CSS3 Gradients 漸層效果》篇的詳細介紹。

CSS3 網頁漸層背景顏色效果設計範例二、徑向漸層
<style type="text/css">
body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#container{
height:500px;
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>
<body>
    <div id="container">
        ...網站內容...
    </div>
</body>
範例呈現的效果
網頁線性漸層背景顏色圖片二
範例二所呈現的就是 CSS3 Gradients 漸層效果功能中的徑向漸層,我們設計的顏色是白色(white)漸層至橘色(orange),預設的效果是從中心開始向外漸層,所以會看到像範例的這種效果,顏色一樣可以自己選擇,值得一提的是 CSS3 Gradients 預設的徑向漸層效果是橢圓形的,參數為 ellipse,允許網頁設計師調整為正圓形,只要使用參數 circle 即可,就像範例這樣。

以上兩個範例呈現了 CSS3 網頁漸層背景顏色效果設計的技巧,其實 Gradients 的功能很強大,可以做許多項的細微調整,關於更詳細的用法請各位詳細閱讀《CSS3 Gradients 漸層效果》篇的內容,對於設計出其它變化效果會有幫助。

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012
PHP Smarty MySQL JQuery Apache W3C