部落格已經風行多年,筆者使用過奇摩的部落格、Blogger、痞客邦,到最後選擇 wordpress ,剛開始使用NAS架設,頻寬與管理問題接踵而來,最後租用虛擬主機架設WordPress,然而文章中的圖片可以讓網站更多采多姿,提升訪客閱讀效果,以達增加網站的流量。因此許多網站會在圖片上的外框動些手腳,讓圖文並茂的閱讀介面更清爽舒適,當然這類外掛程式不少,不過此文使用簡單的 CSS 技巧,讓圖片更活潑有趣。
Bloggerads載入中~
圖片邊框是最常使用的效果之一,方法很簡單,就是先透過文字編輯器開啟佈景主題的式樣檔(style.css)填入CSS語法,較新的佈景主題都有支援自訂CSS的方式,下圖是筆者使用的佈景主題來選擇自訂的「附加CSS」功能。
進入編輯CSS的畫面,輸入紅色框內的文字,「.it-shadow-03」是一個新的類別定義,「.」字元後面是類別名稱,儘量輸入好記得用詞。「border-radius: 6px」是圓角的弧度指定,數值越大弧度越大,筆者使用6px。「border: 1px solid #ddd」是邊框粗細與線條樣式,邊框線條筆者指定ipx,數值越大當然越粗;而soid 表示實體線(dotted 則會變虛線);#ddd 則是線的顏色代碼(可參考這裡)。
在編輯區上點選圖片出現圖示選單,選擇紅色框內的編輯圖示。
接著我們為圖片的 CSS 類別設定一個定義過的類別名稱,如筆者之前設定的 it-shadow-03,記住要點選〔更新〕才能生效喔!
回到網頁瀏覽隨即看到剛剛指定的圖片出現了邊框與圓角的效果。
其實讓不懂CSS程式碼的朋友也可以享受網頁設計的樂趣,網路這麼發達的今天,資源相當豐富,這裡介紹 一個相當棒的線上式樣產生器網站 CSSmatic,例如進入網頁選「Box Shadow」來產生陰影效果。
網站左邊是調整的項目,只要利用滑鼠移動,右側馬上就可以預覽效果,且CSS語法也隨即產生。
將CSS的語法複製下來。
進入編輯CSS的畫面,並定義一個類別名稱(如it-shadow-01),並將語法貼上如下圖紅色框所示。
一樣在編輯區上點選圖片選擇編輯圖示後, CSS 類別設定之前定義的it-shadow-01類別名稱,點選〔更新〕即完成。
下圖顯示有設定過it-shadow-01類別名稱的圖片呈現陰影,沒有設定的圖片遇到圖片是白色底時,與文字間容易產生閱讀的干擾。不懂CSS語法不用擔心,利用樣式產生器網站 CSSmatic 讓你輕鬆製作圖片陰影的效果。
延伸閱讀:
留言 0