【BLOGGER 技術】只用 CSS 做出美麗的漸層顏色效果
台北網站設計 網頁設計公司 網站設計公司 設計 UI 別再用繪圖軟體製作漸層效果圖片了! 現在用 CSS 就可以做到美麗的漸層效果,還可以幫你省下不少圖片檔案的容量,增加效能。 隨著後扁平化時代的 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 種的效果就夠了,基本語