WordPress Gradient Background – 漸層背景式樣設計

今天要分享的是樣技巧是如何在網站建立漸層背景式樣設計 WordPress Gradient Background，漸層顏色的設計式樣常常被許多 WordPress 網站使用到，因為只需要一些式樣 CSS 的設計語法，就可以創建出效果很好的視覺感受。如果您有興趣漸層背景式樣設計，不需要會 CSS 式樣設計的語法，透過這篇文章的內容，您也可以輕鬆的建置出漸層背景效果的。

 

WordPress Gradient Background

 

• 首先請先開啟 Gradient Generator 漸層背景線上製作網址 http://www.cssmatic.com/gradient-generator。
• 這是一個提供線上製作漸層背景式樣檔（CSS）的網站，可以在網頁的左側調整自己喜歡的漸層式樣，調整的過程您會注意到左側的 CSS 語法變動，全部式樣確認完畢以後，請將這些式樣（CSS）語法複製下來。
• 以這篇文章為範例，我們將 Suite 佈景主題頁首上方的底色設計變更為漸層色設計，方法如同我們在 WordPress Theme Suite – 時尚部落客佈景主題這一篇文章分享的一樣，可以在外觀/自訂/附加的 CSS 裡面設計，或是編輯子佈景主題的式樣檔 style.css。
• 填入以下的漸層式樣語法（式樣的語法就是在前面步驟自己設計後的式樣檔複製下來）。

• 以上完成，可以看見如附（圖一）與（圖二）頁首背景顏色上的差異。

 
 

 
 

 
 

結論

有些時候網頁的設計，適時的使用式樣（CSS）設計來取代圖片影像，除了不會增加網站載入負擔，也可以創出不同的使用者感受。每一位網站設計師在利用這麼多的網路工具時，都可以好好的思考什麼樣的設計模式，是對自己網站最好的設計方案，這一切還是需要網站設計師多看多聽多學才能累積到的經驗，分享給有志於網站設計的朋友。