Select Page

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

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

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

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

 

WordPress Gradient Text

 

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

 

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

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

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

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

 

結論

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

 

參考文章:Gradient Text

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

About The Author

max

使用 WordPress 架設網站不再是一件痛苦的工作。這裡跟大家分享使用WordPress的相關問題與研究。 並且提供有關WordPress外掛程式,佈景主題等等的使用經驗分享。 幫助想要建立網站的朋友,可以簡單,快速,無痛苦的建立與使用網站。

Leave a reply

你的電子郵件位址並不會被公開。 必要欄位標記為 *

網站架設

WordPress 虛擬主機免費安裝設定

網誌推薦聯播

我愛 WordPress 網誌推薦聯播