Yijen's blog

關於部落格
繪圖 | 食記 | Web前端技術 | HTML | CSS | JavaScript 研究
  • 324196

    累積人氣

  • 60

    今日人氣

    0

    訂閱人氣

CSS3 漸層背景 (background linear gradient) 實作練習

用 CSS3 Background linear gradient 的好處在哪裡?

這個嘛,我想想噢... 哈!想到了,最大的優點就是可以突顯自己很利害,因為 Code 很多?(大誤)XDD,哈,沒有啦~ 其實,不管是今天講的 CSS linear gradient 漸層背景也好,先前講的 css transition 動畫也好,最大的優點都是效能。

怎麼說勒,就是以前你想要用一些特殊的或漂亮的背景,是不是都會請 ART(設計師)設計圖片,然後再用單純的 css background image 屬性來拼貼嵌入?或是像一些簡單的動態效果,然後請設計師疊疊疊,疊出一張 Gif 來給你用或甚至是作出一個 flash 來嵌。但時代不同了,那些東西現在可以用 CSS 僅僅幾行 code 即可取代掉。不但能降低 server 的 requests, 又可以讓效果更好,像是如果你使用的是 Apple 的 Retina 螢幕瀏覽網頁,圖片的背景放大後就糊掉了,但 css 的背景可是不會糊的喔 ^_^

Linear Gradient attribute 格式

background-image: linear-gradient: (角度或方向, 開始色, 結束色);

開始色和結束色,除了色碼外,以 space 隔開可填入範圍的值,範例2 CSS Code 的意思是從左上"至右下(設定值),前面70% 填入紫色,後面30%(70% ~ 100%)填入黃色"

範例3 除了開始色與結束色以外,中間還多填了5個色一共7色;且在沒有設置每一個色彩的範圍情形下,(Browser)會自動以100% 平分 7 種色彩的比例平均畫出,因此該範例code 代表 由下"至上(to top)" 填入七種色彩(紅橙黃綠藍靛紫。

/* Basic Sample1 */
background-image: linear-gradient( 45deg, blue , red );

/* Basic Sample2 */
background-image: linear-gradient( to bottom right, purple 70%, yellow 100%);

/* Basic Sample3 - Rainbow */
background-image: linear-gradient( to top, red, orange, yellow, green, blue, indigo, violet );
sample1
sample2
Rainbow Sample



利用多組色彩來作斑馬紋背景

剛才1-3練習了基本的 CSS3 漸層,再來要透過另一個 相似的屬性 來達成條紋背景效果

background-image: repeating-linear-gradient: (角度或方向, 開始色, 結束色);
/* Sample4 黑白紋 with linear-gradient */
background-image: linear-gradient( #000, #000 10px, #FFF 10px, #FFF 20px);
/* Sample4 黑白紋 with repeating-linear-gradient */
background-image: repeating-linear-gradient( #000, #000 10px, #FFF 10px, #FFF 20px);
 
 

有沒有發現,二個範例使用的填色設定都是一樣的,但結果卻不同?但其實二者都是正確的,上一段 3 個範例中,可以了解 linear-gradient 填色的範圍都是100%的,最後一個色彩設置代表的是:到最後為止都用該色去塗滿(即使你寫的是20px,但 20px ~ 100% 的範圍還會是白色;然而我們想要的結果是條紋,但又不可能連續撰寫 色1,色1,色2,色2,色1,色1 無限下去。於是這個屬性就因應而生了

repeating-linear-gradient

該屬性代表的是,將我們設定出來的局部背景塊,以拼貼的方式填滿整個 container,有點類似 background-repeat: repeat 的使用方式。所以說,我們雖然只設定前10px為黑,後10px為白,但因為重覆貼入的關係,整個區塊就可以變成我們最終想要的條紋了。

下面的 Live Demo 是篇頭那五種色塊的 CSS + HTML Code,有興趣的人可以進去玩玩(PS: click 色塊可以將 BG 套用至下方大矩形喔),待基礎打好玩熟了,將來想要作出一些像是 CSS女神 Lea Verou 其中一個 Project 那樣更酷的 CSS3 background pattern 也不是甚麼難事了。

Live Demo

瀏覽器相容性 (browser capability check)

http://caniuse.com/#search=linear-gradient
http://caniuse.com/#feat=css-repeating-gradients

參考資料:

相簿設定
標籤設定
相簿狀態