【Blogger技術】只用CSS做出美麗的漸層顏色效果


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



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


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

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

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


CSS 程式碼
#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下載



▼以下是我找出一些常用好看的漸層
Sun Veggie
background: linear-gradient(-225deg, #20E2D7 0%, #F9FEA5 100%);
Tempting Azure
background: linear-gradient(120deg, #8fd3f4 0%, #84fab0 100%);
Sun Veggie
background: linear-gradient(to right, #00c9ff 0%, #92fe9d 100%);
Happy Fisher
background: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);
High Flight
background: linear-gradient(to right, #0acffe 0%, #495aff 100%);
Faraway River
background: linear-gradient(-20deg, #6e45e2 0%, #88d3ce 100%);
Dense Water
background: linear-gradient(to right, #3ab5b0 0%, #3d99be 31%, #56317a 100%);
Fruit Blend
background: linear-gradient(to right, #517fa4 0%, #243949 100%);
Premium Dark
background: linear-gradient(to right, #434343 0%, black 100%);
Fruit Blend
background: linear-gradient(to right, #f9d423 0%, #ff4e50 100%);
Peach Gradient
background: linear-gradient(40deg,#FFD86F,#FC6262);
Colorful Peach
background: linear-gradient(to right, #ed6ea0 0%, #ec8c69 100%);
New Life
background: linear-gradient(to right, #38f9d7 0%, #43e97b 100%);
Sand Strike
background: linear-gradient(to right, #c1c161 0%, #c1c161 0%, #d4d4b1 100%);


【Blogger技術】相關文章
滑動後浮動式固定選單,超簡單!
jQuery GoTop 按鈕讓網頁快速回到最上方


結論:
好用的CSS gradient為設計師解決了行動裝置的漸層顏色問題,捨棄圖片後,畫面不再因為解析度不同而被壓縮或變模糊。

Next
Previous
Click here for Comments

3 意見:

avatar

Hello 錦翔,

上次在麥點子轉載的扁平化設計的反應相當好呢!
https://www.mydesy.com/flat-design
https://www.mydesy.com/flat-design-2
謝謝您帶給大家詳細的分析!

這次希望轉載下面兩篇文章:
【BLOGGER技術】滑動後浮動式固定選單,超簡單!
【BLOGGER技術】只用CSS做出美麗的漸層顏色效果

祝 好點子源源不絕

MyDesy編輯Phoebe

avatar

哈哈~ 感謝MyDesy團隊,不敢當不敢當,
都是小弟野人獻曝罷了,歡迎轉載唷~ :D

avatar

Nice articel, This article help me very well. Thank you. Also please check my article on my site Know All About CSS Gradient Text And Examples.

留言經過版主審核後才會出現哦!
因為不這樣做會有很多垃圾留言,不好意思 > <