CSS3 所提供的許多新功能真的可以幫我們節省許多時間與精力。對於我這種沒有美工基礎的程式設計師來說, 如果想幫 HTML 元件做個可以看的背景圖, 雖然不是辦不到, 但是如果自己畫, 可能花了許多工夫, 還是覺得難看; 如果上網路去找, 除了隨時有侵權的疑慮, 同樣要花掉許多時間。後來轉念一起, 為何不使用 CSS 本來就提供的功能? 東西是自己做的, 高興怎麼用就怎麼用, 改起來也容易...
CSS3 所提供的許多新功能真的可以幫我們節省許多時間與精力。對於我這種沒有美工基礎的程式設計師來說, 如果想幫 HTML 元件做個可以看的背景圖, 雖然不是辦不到, 但是如果自己畫, 可能花了許多工夫, 還是覺得難看; 如果上網路去找, 除了隨時有侵權的疑慮, 同樣要花掉許多時間。後來轉念一起, 為何不使用 CSS 本來就提供的功能? 東西是自己做的, 高興怎麼用就怎麼用, 改起來也容易。
首先, 先來看看成果, 再來做技術性的說明:
上述的條紋都是使用 CSS 產生的。雖然這幾張圖看起來都不同, 但它們使用的語法都是同一個, 亦即 linear-gradient 這個 CSS 屬性。如果你想深入研究 Gradient 這個屬性, 可以在上面 W3School 的連結中看到, 我就不深入說明了。在這裡, 我只介紹我以下會用到的 linear-gradient 屬性和其用法。
和一般人對 linear-gradient 的用法的認知可能略有不同, 我是把 linear-gradient 寫在 background-image 之下。換句話說, 我是讓 CSS 做出來的漸層色當做背景圖片來使用的。在此同時, 我還套用了 background-size 以及 background-color; 所以 linear-gradient 這個屬性在本例中並不是單獨存在的:
.stripes0 {
background-size: 25px 25px;
background-color: rgba(31, 2, 30, .3);
background-image:
linear-gradient(
0deg,
transparent 50%,
rgba(200, 0, 0, .2) 50%);
}
設定 background-size: 25px 25px; 的目的, 當然就是因為我們下面使用了 background-image 的關係。所以在這裡我把這個背景圖 (不是真的圖) 的大小設定為 25 X 25 pixel。
接著, 我又設定了 background-color 屬性。如果你使用在 background-image 中使用了真的圖片, 那麼設定 background-color 屬性就沒什麼意義了; 但是因為我們使用的是 CSS 描出來的圖, 我又用了許多透明色, 所以設定背景色是有意義的。
接著, 我們來看 linear-gradient 的語法。我在上列程式中已經做了排版, 所以你可以看得很清楚。它的第一個參數是角度; 如此, 我們可輕易以做出直的 (90deg)、橫的(0deg) 與斜的 (45deg) 這幾種條紋。
從第二個參數之後, 就是顏色與相對位置了。例如 "transparent 50%" 指的是在 50% 的地方使用透明色的意思。你不一定要使用百分比, 你也可以使用 px 之類的單位。此外, 如果你前面指定 0deg, 那麼它是從下面起算的。這是一個通常讓人誤會的地方。
在上面的範例中, 你可能已經看到我既指定了 "transparent 50%", 後面又跟了一個 "rgba(200, 0, 0, .2) 50%"。為什麼在同一個地方指定了兩種顏色呢? 因為該語法的基本邏輯是「從... 到...」的意思, 用白話來講, 瀏覽器遇到這種語法時, 它會「從第 0% 處 (在這裡是單位背景圖的最下方) 到第 50% 處什麼都不畫, 然後從第 50% 處到第 100% 處 (最上方) 填入 rgba(200, 0, 0, .2) 這個顏色」。
因此, 上面那段程式的語法也可以寫成如下:
.stripes0 {
background-size: 25px 25px;
background-color: rgba(31, 2, 30, .3);
background-image:
linear-gradient(
0deg,
transparent 0%,
transparent 50%,
rgba(200, 0, 0, .2) 50%,
rgba(200, 0, 0, .2) 100%);
}
雖然第二種寫法比較正式, 也比較直覺, 但是像最上面的那種省略式的寫法很普遍, 你不能不知道。
我把我寫的幾個背景圖放上 jsFiddle, 有興趣的朋友可以親自操作試試:
值得一提的是, 當製作斜條紋的時候, 由於精確度的問題, 斜線其實畫得並不直; 這並不是瀏覽器的問題, 我在 Chrome 和 IE 都發現相同的問題。所以我把單位背景圖調整成 26 X 26 pixel, 看起來就比較自然。把顏色的透明度降低也略有幫助。
此外, 我在最後一個背景圖 (模糊條紋) 中讓顏色的區間放大了, 如此漸層就看得出來。圖片的模糊感就是這樣做出來的。
如果你覺得我做的這幾個背景圖不夠好, 你可以自己把各種值拿去修改, 也許可以創作出更棒的效果!但是如果你想直接看看別人現成的作品, 我找到這個另人驚艷的 CSS3 Patterns Gallery, 各位不妨參考參考。
以下是幾個套用以上各樣式的實際範例。