Select Page

Custom Colored Underline – 自訂底線效果式樣設計

Custom Colored Underline – 自訂底線效果式樣設計

Custom Colored Underline 透過自訂底線效果的式樣設計,讓重點文字或是連結有了焦點效果。

漸層顏色效果一直是我個人很喜歡的一種網頁設計效果,除了可以提供訪客不同的視覺感受,更進一步可以達到推廣頁面內容的作用,這兩年也被大量的運用在網頁設計上。今天分享的內容是示範如何建立漸層效果的底線,來增加重點文字的關注效果,提升訪客的注意力,同樣也可以套用在連結上,創造出不同的式樣感覺。接下來就跟大家分享這式樣設計的語法,有興趣的朋友可以參考一下。

 

Custom Colored Underline

Custom Colored Underline – 自訂底線效果式樣設計

 

  • 今天分享的式樣設計語法是參考 Will King 在 codepen.io 上的設計內容,他的設計內容可以機的產生不同漸層顏色的底線,我們只擷取其中關於底線漸層厭色設計的部分與大家分享。
  • 程式參考網址:https://codepen.io/Wking/pen/BdmpVx
  • 漸層顏色的顏色參考網址:https://uigradients.com,網站有很多漸層顏色搭配可以參考,同時提供色彩式樣編碼可以使用。
  • 在 WordPress 網頁中的文字要產生這個底線效果,我們可以在子佈景主題的 style.css 檔案中加上以下式樣語法。

  • 式樣設計簡單說
    • underline–magical:式樣選擇器的名稱,保留作者的設計。所以在我們自己的文字或是連結要套用時,就需要注意這個式樣選擇器的設計。
    • 上面式樣設計中的 #FFEDBC 0%, #F0CB35 100%,分別代表顏色從一開始(0%)的 #FFEDBC 漸變到最後(100%)的 #F0CB35,所以想要替換顏色設計可以調整這兩個值。
    • background-size 這裡設計的是一開始底線的線條高度與寬度,可以自行測試修改。
    • background-position 這裡設計的是底線線條出現的位置,也可以自行調整測試。
    • transition 指的是漸變時的時間感,數值越大越慢,以秒為單位。
    • underline–magical:hover 指的是滑鼠移到到文字時的效果。
  • 以上完成。

 

示範影片

 

結論

今天分享的式樣設計,語法很短,很容易就可以套用到指定文字上,對於重點提示文字,提供很不錯的效果,希望大家也會喜歡。

About The Author

max

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

Leave a reply

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

虛擬主機推薦

虛擬主機推薦

網站架設

WordPress 虛擬主機免費安裝設定