2014年1月27日

將網頁文章的圖片全部套用立體陰影效果__CSS技巧

A+

(設計: +Totoa Hari, 素材: goo.gl/x6WzZC)
如能善用 CSS 語法,不需要使用影像編輯軟體,也能讓圖片輕鬆做出「外框 + 陰影」的效果。不過使用 CSS 做出簡單的陰影很容易,要做出不錯的立體感就稍微困難一些。

另外,要在單一圖片使用 CSS 效果很容易,要找出特定範圍來一併套用 CSS 效果就麻煩一些(例如指定文章區塊);又,文章內可能不是每張圖都適合加框、上陰影,這也得另外來處理。

以下先舉例沒使用 CSS 的情形,再簡單示範一個效果不錯的立體陰影 CSS 效果,並說明如何排除特定圖片、不使用陰影效果的方式。



一、使用影像編輯軟體


1. 若是對 CSS 不熟,一些立體陰影效果只能藉由影像編輯軟體才能完成,這樣處理部落格圖文的時間就會拉長,例如下面這張圖的效果,就是使用後製完成的──



上圖左下、右下角模擬紙張翹起的立體陰影,其實可以利用 CSS3 語法做到,不過較為複雜,會在下一篇介紹。


2. 本站文章開頭的示意圖,使用了模擬紙張下方凸起的立體陰影效果,例如下面這張圖──

這就不是使用影像編輯軟體後製,而是使用 CSS3 語法。只要對著圖片按下、另開視窗就可看到原始圖片,沒有任何陰影效果。由於較為複雜,一樣在下一篇文介紹。


3. 本站內文使用的圖片,效果類似下圖──



這也是使用 CSS 語法產生的立體陰影,可另開視窗看原始圖片,本文將以此效果舉例。



二、找出要套用 CSS 的區塊


如果為圖片標籤 img 設定 CSS 陰影,將會導致全網頁圖片都套用此效果,例如以下:

<style>
img {
box-shadow: 1px 1px 1px #ddd;
}
</style>


因此必須限定特定區域的圖片標籤 img 才套用 CSS 陰影。以 Blogger 的為例,在範本中內文區塊的 class 為 "post-body",所以可以設定如下:

<style>
.post-body img {
box-shadow: 1px 1px 1px #ddd;
}
</style>


如此將只有內文區塊的圖片,才會套用此 CSS。如果非 Blogger 平台,可參考這篇文章「Chrome 開發人員工具」的操作方法,來找出內文區塊的 class 或 id,就能設定 CSS 了。



三、不錯的立體陰影 CSS 設定


接著以下圖為例,將這個效果的 CSS 放入範本中。(請注意:IE8(含)以下不支援CSS陰影語法,建議參考這篇文章、並在部落格宣導建議避免使用 IE8(含)以下瀏覽器」)




以 Blogger 來說明,要將效果套用到內文區塊的所有圖片,請到後台範本 → 編輯 HTML → 搜尋字串 .post-body img 。由於每個範本都不一樣,說不定預設已經有一些內容,例如像下面的程式碼:

.post-body img {
padding: 8px;
background: $(image.background.color);
border: 1px solid $(image.border.color);
-moz-box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2);
box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2);
-moz-border-radius: $(image.border.radius);
-webkit-border-radius: $(image.border.radius);
border-radius: $(image.border.radius);
}


如果不想用預設效果,想使用本文效果,請改為以下:


以上黑色字串為原程式碼,有顏色的字串為新增的程式碼。儲存後,所有在文章中的圖片將自動套用此立體陰影效果。

以下說明請參照程式碼行號──

B、L:B 行的紅色字串 "/*" 與 L行的紅色字串 "*/" 代表將中間的黑色字串(預設程式碼)註解掉,使其不執行。範本中的所有預設程式碼都不建議刪除,方便將來還原之用,請參考這篇「Blogger 範本__(一)各種註解方式及區塊的修改」→「一、範本註解方式」的說明。

N~P:藍色字串為外部陰影的語法、綠色字串為內襯陰影的語法;一般只使用藍色字串的語法,不過本文的效果使用綠色字串後,立體效果更佳,可模擬紙張邊緣的光線效果。

Q:設定紙張邊緣(外框)的寬度,8px 可改為自訂數值。

R:設定背景色為 "白色"(#fff) 時的光線效果,也可自訂為其他顏色。

S:不使用框線



四、放在自訂區塊的 CSS 程式碼


「三、不錯的立體陰影 CSS 設定」的說明是使用 "修改" 範本程式碼的方式,不過如果在範本沒有搜尋到 ".post-body img" 這樣的字串,或是想要將 CSS 程式碼套用到自訂的區塊,那就得用 "新增" 程式碼的方式。

請在範本中搜尋 </head> 字串,然後在其前一行,新增以下程式碼即可:

.post-body img {
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, .2), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 0 15px rgba(0, 0, 0, .2), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 0 15px rgba(0, 0, 0, .2), 0 0 40px rgba(0, 0, 0, 0.1) inset;
padding: 8px;
background: #fff;
border: none;
}

以上紅字 ".post-body" 可改為自訂區塊的 class 名稱。

修改說明請參照「三、不錯的立體陰影 CSS 設定」。如果對程式碼熟悉的話,以上程式碼請自行放到範本中的 CSS 區段比較利於管理。



五、特定圖片排除陰影效果的方式


有的時候某些內文圖片是不需要加特效的,例如一行文字裡面穿插小圖示(參考這篇「Blogger 網誌清單的妙用+網站小圖示的調校」)、使用圖片式標題(參考這篇「為健康把關的57堂課__飲食篇」)等等。對於出現頻率比較低的情境,可以為這些圖片另外設定 class 來套用,以下為步驟:

1. 在範本中 </head> 之前插入以下程式碼──

<style>
.no-shadow {
padding: 0px;
box-shadow: none;
background: transparent;
border: none;
}
</style>

以上 "no-shadow" 可改為自訂的 class 名稱,套用這個 class 的圖片將消除所有陰影效果、背景顏色、邊框等等。


2. 接著在文章中不想使用陰影的圖片,記得在 img 標籤內加入 "no-shadow"(或自訂字串) 這個 class 名稱,例如以下範例:

<img class="no-shadow" src="http://4.bp.blogspot.com/-9aoXd1tS9cA/UqKQoSBPbqI/AAAAAAAAIWM/p9kZ3LemOu8/s1600/blogger-community-xmas-one-year.jpg"/>
如此這張圖片將沒有任何額外效果,如下圖:





六、小結


以上看起來內容很多,其實要操作的步驟並不多,而且只要做一次便可以一勞永逸,所有文章內的圖片都可自動套用陰影效果。本文是比較簡單、入門的範例,下一篇將介紹更立體的 CSS 語法,操作上更進階,但效果絕對令人炫目。


CSS 技巧相關文章:

4 則留言:

  1. 原來可以這樣.......不過我都是用 Lightroom 後制多

    回覆刪除
  2. <6441812516318709845>(以上內容請勿刪除,從括號之後開始留言)您比較專業,美術方面我是苦手..XD

    回覆刪除
  3. <8390447216544352285>(以上內容請勿刪除,從括號之後開始留言)

    我不是專業,我美術完完全全不行,我只是用 lightroom 處理相片而已
    不過 lightroom 做不到兩邊陰影的效果。
    我遲些日子都會寫一篇如何用 lightroom 加相框的教學文,之前我爬文都很辛苦呢,加相框並不是 lightroom 內建的功能哦

    回覆刪除
  4. <6969499136167630178>(以上內容請勿刪除,從括號之後開始留言)google 了一下,會使用 lightroom 的話已經比我專業很多了(photoshop之類的我不太會用),我只會使用 photoimpact 這種入門級的,哈哈~

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。