Select Page

WordPress CSS Shadow Effects – 陰影式樣技巧

WordPress CSS Shadow Effects – 陰影式樣技巧

不懂程式碼,也可以享受設計的樂趣!

讓不懂程式碼的朋友也可以享受網頁設計的樂趣,一直是我努力的目標。在我開始使用 WordPress 以後,這個理想的網站設計夢設計又往前邁進一大步了。很多朋友問到不會式樣(CSS)設計的技巧,要怎麼修改網站內容的設計呢?很幸運的在網路這麼發達的今天,有非常多的網路資源可以參考,而我們只需要如何的將這些技巧,運用在我們自己的網站就好了。

 

WordPress CSS Shadow Effects

  • 今天要介紹的就是 CSSmatic 這個很棒的線上式樣產生器網站。
  • 以今天分享的陰影技巧來說,你可以在網站上看到左邊的設計項目,隨著你的滑鼠移動,右側馬上就可以看見效果,挑選你喜歡的式樣設計完成以後,式樣語法也同時完成,記得將它複製下來,我們等等會用上。
  • 前往陰影式樣設計網頁:請點選

 

CSSmatic

 

  • 回到我們文章編輯頁面,通常預設的情況下,佈景主題沒有對文章內的圖片作特別的式樣設計。
  • 今天我們希望讓圖片可以有陰影效果,這樣子網頁看起來會比較有質感,圖片也比較有立體感。
  • 為圖片設計式樣的方法是,在編輯區塊點選圖片然後進行編輯。
  • 接著我們為圖片的 CSS 類別設定一個特別的值,這裡舉例為 max-shadow-01,您可以自行決定這個數值,不需要依我的設定。設定完成以後請記得點選更新。

 

編輯圖片式樣(CSS)

 

設定圖片的 CSS 類別

 

  • 接著我們要將一開始在 CSSmatic 網站設計的陰影語法加到我們自己的網站上使用。
  • 式樣(CSS)語法加到網站的方法很多,這裡常常提到的透過子佈景主題的方式來編輯。
  • 或是您也可以到外觀/自訂/附加的 CSS,貼上我們在 CSSmatic 網站設計取得的式樣語法,並記得在頭尾加上圖片的 CSS 類別定義語法即可。

 

附加的 CSS / CSS 代碼

 

  • 式樣語法設計完成以後,可以很明顯看到網頁內容圖片的陰影效果了。

 

圖片陰影式樣效果

 

 

結論

圖片的式樣設計在 WordPress 網站上是經常被使用到的一個效果,如何運用可以取得的資源,幫助自己建置更好的網站內容,這是每一個網站設計朋友一定要學會的功課。

 

About The Author

max

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

Leave a reply

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

網站架設

WordPress 虛擬主機免費安裝設定