本篇CSS效果發表於http://ashareaday.wcc.tw/#2013-10-06 (建議使用Chrome瀏覽器)
假日都來介紹些單篇的主題吧~,今天要介紹的是filter。
box-shadow
filter: drop-shadow
box-shadow
圖片來源:火影忍者
box-shadow在先前介紹過,他是"盒狀"元素的陰影,所以稱作為"box" shadow,所以應用在圖片上,它自然就是以整個圖片的外框做陰影,這固然是正確的,但不一定是我們所想要的;上面這一張是png圖片,如果想要只在人物外框增加陰影,勢必要另外做一張圖了。
Filter
filter是一種濾鏡效果,就像是繪圖軟體的濾鏡,他會以目前畫面上的圖形來套用效果,因此透明的區域就不會有效果。
參考:http://devdocs.io/css/filter
drop-shadow
//sass code
img
+filter(drop-shadow(5px 5px 5px rgba(black,.5)))
我們把類似box-shadow效果的drop-shadow同樣套用在這張圖上,它不再是以圖片外框來做陰影,而是以圖片的內容套用濾鏡陰影效果。
contrast
img
+filter(contrast(300%))
目前他提供約10種的濾鏡,像這就是提高對比。
grayscale
img
+filter(grayscale(100%))
很多圖片預覽也可以像這樣做成灰色的,然後在滑鼠hover時在轉換為彩色,在過去須配合js或是兩張的圖片,如果使用filter也可以達到這樣的效果。
hue-rotate
img
+filter(hue-rotate(180deg))
這簡直就像簡易版的photoshop,旋轉色相這效果也有!
blur
img
+filter(blur(10px))
如果大家是用-webkit-瀏覽器,應該就能感受到這些豐富的效果,如果是firefox、IE10等等瀏覽器,如果沒看到以上效果應該就能了解到了吧,這些效果固然非常有趣,但目前只有-webkit-有支援,相信firefox等瀏覽器在不久的未來都會支援這些效果。