WordPress Gradient Text – 文字顏色漸層變化式樣

WordPress Gradient Text 在網頁展示文字顏色漸層變化式樣，讓活動頁面的效果更加精彩。

今天跟大家分享的一個式樣技巧，我個人非常喜歡。就是透過在 WordPress 網站的分頁，製作活動頁面時，活動頁面標題或是活動訊息，透過式樣設計變化字體的顏色，不是製作圖像，可以讓頁面更活潑，更吸引訪客的目光。另外透過式樣設計（CSS），檔案小執行效率也會好，不需要多增加網頁的圖檔，目前也適用多數的瀏覽器，所以分享給大家，您可以在下列看見展示的預覽圖片，有興趣的朋友可以參考一下。

 

WordPress Gradient Text

 

 

• 在上圖中，手機影像左側的文字，是透過式樣設計產生的漸層效果，不是製作的文字圖檔。字體漸層顏色使用的方式也很簡單，今天分享的技巧是參考 css-tricks 是的一篇教學文章，為了適合中文字體的展示修改部分式樣設計。
• 式樣修改的方式可以透過子佈景主題，或是直接在活動頁面行列置入。這次分享的內容我直接透過在分頁中修改。
• 首先，將頁面編輯模式切換到文字編輯模式，然後輸入式樣語法：

• 上述式樣設計中的語法，是將標示為 h1 的文字，做顏色漸層的變化設計，(#eee, #333); 標示的是顏色的設計，可以自行修改這裡的設計。舉例來說可以修改成 （#40E0D0, #FF0080），顏色之間需有 “，” 作為區隔。
• 對於式樣設計熟悉的朋友，這部分就不需要多加說明，可以自己任意設計變化。
• 對於比較不熟的朋友，可以試著加入字體大小的設計，字型的選擇，字寬的設計與文字行列間的高度等等。例如：

• 當然，在頁面中直接使用式樣設計時，記得要幫式樣設計前後將上式樣設計的定義。

• 接著標示您想要文字顏色鍵變式樣的文字，例如標題或是活動宣傳文字。

 

結論

使用 WordPress 來架設網站，不是單單只可以做部落格。很多精彩的活動頁面，也可以透過 WordPress 來輕鬆完成設計。當然，對於多數的新手朋友來說，首先需要搞清楚的是，網站建置的目的，與自己網站享要提供的功能是什麼，選擇正確的工具輔助，就可以建置出專業又漂亮的網站。

 

參考文章：Gradient Text

推薦文章：Subtle text gradient with CSS Webkits 這是一篇很棒的文章，對於 Gradient Text 有更多的使用說明。