設計 UI 別再用繪圖軟體製作漸層效果圖片了! 現在用 CSS 就可以做到美麗的漸層效果,還可以幫你省下不少圖片檔案的容量,增加效能。

作者/ 鄒錦翔

這幾年扁平化設計的興起成為 UI 界的首選設計原則,讓整個網頁、手機 APP 的介面走向色彩豐富的單一色塊設計,想知道什麼是扁平化設計(Flat Design)的,我有寫一篇詳細的介紹文

設計師必懂的趨勢,淺談扁平化設計優缺點與發展(上)

設計師必懂的趨勢,淺談扁平化設計優缺點與發展(下)

然而,隨著後扁平化時代的 Material Design 崛起,單一色塊不能滿足外觀的需求,美麗的漸層效果也開始流行了起來,不過以前設計師只能用 Photoshop 等設計軟體來做出漸層圖片後再放到網頁上,這在行動裝置上就沒辦法達到響應式效果。

所以在 2013 年以後,主流的瀏覽器都都開始有支援 CSS 漸層語法,自此刻起,設計師便只要使用簡易的 Gradients 即可做出美麗的漸層效果,不再需要設計圖檔了。

不過值得注意的是,在一些小型的元件上盡量使用左右漸層,而不是上下漸層,因為不同螢幕大小的裝置原則上是寬度變化,若是使用上下漸層,會顯得十分擁擠,而左右漸層或斜角漸層則可以讓視覺延展出去。

CSS 程式碼

1
2
3
4
5
6
7
#grad {
  background: red;                    /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left, red , yellow); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, red, yellow);      /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, red, yellow);    /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, red , yellow);     /* Standard syntax */
}

要有漸層效果至少要 2 種顏色,一般來說 2 種的效果就夠了,基本語法就是 linear-gradient,其他的都是為一些特定舊版的瀏覽器設定的。

儘管網路上有許多 Gradient Generator,但是對於許多沒有美學概念的工程師、或是想省時間不想每次都自己配色的人來說,使用別人配好的漸層就會是最佳選擇。

不錯的漸層提供網站:
uiGradients
WebGradients 這個真的很棒,還提供 PSD 下載

▼以下是我找出一些常用好看的漸層

文章出處/ 咖尼馬管家的筆記

Related Posts