網頁設計

關於網頁設計的技術或相關資訊分享

css3 gradient

CSS3 漸層特效教學

在做網頁設計時,如果要使用漸層的背景,通常會使用的做法是利用軟體將整個背景製作出來,例如左邊那樣,是做好之後再插入到網頁中的,現在新的CSS3出來了之後,可以直接使用語法就產生一模一樣的背景。

甚麼?你說你不知道CSS 3的語法嗎?沒關系,可以使用下面的網站,只要點一點拉一拉,他會自動生成個瀏覽器對應的CSS 3的語法,再直接套用就可以拉。

網站1:Ultimate CSS Gradient Generator
網站2:CSS Gradient Background Maker

  不過...有點遺憾的事情是,到小編寫這篇文章為止,最新的IE 9.0,還是沒有辦法完整支援CSS 3的漸層效果,所以在產生的CSS 3的語法之後,可以利用之前提過的CSS HACK,讓IE系列的瀏覽器使用原本的方法呈現,不過從網站產生的語法註解中,看到了IE 10 的蹤影,讓我們期待一下IE 10可以對CSS 3.0 有更完整的支援。

 

 

  左邊的是使用CSS的語法產生的,不過如果讀者你是用IE瀏覽器的話,恩你應該會看到一塊空白,這個是因為IE還沒有完全支援,請換個瀏覽器來看看,你就會看到有個用CSS 產生的漸層圓圈在旁邊的。

語法

/* IE10 */
background-image: -ms-radial-gradient(center, circle closest-side, #00A3EF 0%, #FFFFFF 100%);
/* Mozilla Firefox */
background-image: -moz-radial-gradient(center, circle closest-side, #00A3EF 0%, #FFFFFF 100%);
/* Opera */
background-image: -o-radial-gradient(center, circle closest-side, #00A3EF 0%, #FFFFFF 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(radial, center center, 0, center center, 143, color-stop(0, #00A3EF), color-stop(1, #FFFFFF));
/* Webkit (Chrome 11+) */
background-image: -webkit-radial-gradient(center, circle closest-side, #00A3EF 0%, #FFFFFF 100%);
/* Proposed W3C Markup */
background-image: radial-gradient(center, circle closest-side, #00A3EF 0%, #FFFFFF 100%);

 

這邊說明一下圓形語法,各個瀏覽器的語法稍稍有點不同,不過大致上如下面的規則:

radial-gradient( 圓心位置,形狀 形狀參數,顏色 顏色停止位置,顏色 顏色停止位置 ...)

  • radial-gradient:表示要使用的是圓形漸層。
  • 圓心位置:起始位置,例如上面的範例寫的是center,表示從div的中間開始,指定的方法就和一般我們在設定CSS background的方法一樣。
  • 形狀:circle(正圓) | ellipse(橢圓) ,可省略,預設值是ellipse
  • 形狀參數:closest-side | closest-corner | farthest-side | farthest-corner | contain | cover,可省略,預設值是cover
    1. closest-side:漸變的半徑長度為從圓心到離圓心最近的邊。
    2. closest-corner:漸變的半徑長度為從圓心到離圓心最近的角。
    3. farthest-side:漸變的半徑長度為從圓心到離圓心最遠的邊。
    4. farthest-corner:漸變的半徑長度為從圓心到離圓心最遠的角。
    5. contain:包含,漸變的半徑長度為從圓心到離圓心最近的點。類似於closest-side。
    6. cover:覆蓋,漸變的半徑長度為從圓心到離圓心最遠的點。類似於farthest-corner。
  • 顏色:顏色就如同本來CSS的指定顏色方法。
  • 顏色停止位置:顏色停止的位置,可用長度或百分比顯示。

  下次再來介紹如何讓旁邊討厭的白邊,變成透明的顏色,請期待囉。

 

Reference: CSS Image Values and Replaced Content Module Level 3

Please enable the javascript to submit this form