CSS, CSS3, 網頁設計

[CSS3] drop-shadow與box-shado大不同,讓CSS也可為透明圖片加上陰影

梅干2018/03/13
梅問題-[CSS3]drop-shadow與box-shado大不同,讓CSS也可為透明圖片加上陰影
  上星期曾與大家分享instagram.css的相片濾鏡特效套件,讓圖片完全不用透過Photoshop,就能套用各種不同的相片風格,這一切都是歸功於CSS3的Filter屬性,而Filter就像Photoshop中的濾鏡特效一樣,同時這個Filter屬性中,共包含了十種的特效,像是灰階、懷舊、負片、模糊.....等,且只要在網頁中加入這個Filter屬性後,立即就會針對網頁的元素進行渲染與套用,讓相片立即產生不一樣的變化,其效果就像套用了Photoshop中的濾鏡效果一般的自然。
  而今天要來介紹的,一樣是CSS3的Fliter濾鏡中的drop-shadow,而什麼是drop-shadow,或許有些朋友,可能會感到陌生,但提到box-shadow,各位應該就很熟悉了,而drop-shadow與box-shadow,都是用來將元素加入陰影,但比較不同的是box-shadow加入的陰影只有矩形,因此當使用的是去背影像,套用box-shadow並不會因為透明背景,而沿著元素的四周加入陰影,所以這時候就可透過drop-shadow來實現,在透明的png檔中的影像四周,加入陰影,其效果就像在Photoshop一模一樣,甚至Filter的濾鏡,還可加疊,所以就可在一個元素中,加入多個不同的Filter特效,因此現在就一塊來看看CSS3的Filter屬性吧!
Step1
首先,先將影像去背,並儲存為png或svg檔,而這邊梅干上網抓了一張Android娃娃的透明背景的圖片。
梅問題-[CSS3]drop-shadow與box-shado大不同,讓CSS也可為透明圖片加上陰影
Step2
這時當使用box-shadow:0px 0px 10px rgba(0,0,0,.5);的語法時,可看到影子只會以矩形的方式呈現。
梅問題-[CSS3]drop-shadow與box-shado大不同,讓CSS也可為透明圖片加上陰影
Step3
這時將box-shadow更改為,filter:drop-shadow(0px 0px 10px rgba(0,0,0,.5));,影子立即就會沿著,影像四周產生出陰影,是不是超酷的呀!
梅問題-[CSS3]drop-shadow與box-shado大不同,讓CSS也可為透明圖片加上陰影
Step4
而濾鏡效果是可疊加的,因此當要加入多個特效時,只需要空一格,再加入特效名稱,像梅干就加了二個,一個是影子,一個是對比,filter:drop-shadow(0px 0px 10px rgba(0,0,0,.5)) contrast(200%);而這時它就會套用影子,再套用對比,因此有了這概念,就可套用多個不同的濾鏡特效啦!是不是超方便的呀!
梅問題-[CSS3]drop-shadow與box-shado大不同,讓CSS也可為透明圖片加上陰影
#範例預覽

查看更多的filter特效
梅問題講堂-2018/5/26-WordPress佈景主題設計入門-實體課程