CSS3 網頁漸層背景顏色效果設計
網頁漸層背景顏色效果是現在網頁設計師經常使用的一種技巧，傳統的網頁設計必須使用漸層圖片來當作網頁背景圖片，才能呈現出網頁漸層背景顏色的效果，不過 CSS3 有推出一個新的 Gradients 漸層效果功能，透過這一個 Gradients 設定就能輕鬆的讓瀏覽器自動替網頁呈現出漸層背景效果，不需要準備漸層圖片就能做到這樣的視覺效果，而且還可以設定漸層所要呈現的顏色與方向，顏色可以設定多個不同的顏色去變化，方向也可以設定上下左右延伸以及透過角度呈現，甚至可以設計成徑向漸層效果，功能非常強大。
CSS3 的 Gradients 漸層效果功能語法
CSS3 的 Gradients 漸層效果功能語法
線性漸層語法：background:
linear-gradient(方向,顏色1,顏色2, ......);
徑向漸層語法：background: radial-gradient(ellipse 或 circle,顏色1,顏色2, ......);
徑向漸層語法：background: radial-gradient(ellipse 或 circle,顏色1,顏色2, ......);
CSS3 的 Gradients 漸層效果功能是直接套用在 background 屬性中的一個功能，我們這篇介紹的兩種漸層方式差別在於 gradient 的前綴，線性漸層的前綴是 linear，徑向漸層的前綴則是 radial，除此之外，為了可以獲得最佳的瀏覽器支援效果，我們會在 gradient 的最前面再加上瀏覽器的前綴，讓瀏覽器知道我們要顯示 gradient 的功能，這些前綴整理如下。
瀏覽器適用前綴
瀏覽器適用前綴
- Google
Chrome 與 Apple Safari 使用 -webkit-
- Mozilla
FireFox 使用 -moz-
- Opera
使用 -o-
我們將以上的語法關念套用到範例看看設計出來的效果吧！
CSS3 網頁漸層背景顏色效果設計範例一、線性漸層
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>
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 標籤設定 CSS3 的 Gradients 漸層效果，會造成當網頁內容長度太長，超出預設的 body 標籤高度，超出的部份就不會有漸層背景顏色，所以我們在 body 標籤並未固定一個高度，而是在 container 區塊內設高度，隨著網頁內容的多寡再自己調整要顯示的漸層背景顏色範圍即可。
各位可以在範例中看到這個網頁的漸層背景顏色是由上往下發展，從第一個顏色黃色（yellow）開始漸漸變成紅色（yellow），你也可以設定更多不同的顏色、調整漸層的發展方向，更多變化請參閱《CSS3 Gradients 漸層效果》篇的詳細介紹。
CSS3 網頁漸層背景顏色效果設計範例二、徑向漸層
各位可以在範例中看到這個網頁的漸層背景顏色是由上往下發展，從第一個顏色黃色（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>
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 漸層效果》篇的內容，對於設計出其它變化效果會有幫助。
以上兩個範例呈現了 CSS3 網頁漸層背景顏色效果設計的技巧，其實 Gradients 的功能很強大，可以做許多項的細微調整，關於更詳細的用法請各位詳細閱讀《CSS3 Gradients 漸層效果》篇的內容，對於設計出其它變化效果會有幫助。
沒有留言:
張貼留言