iT邦幫忙

DAY 21
4

CSS沒有極限系列 第 17

CSS沒有極限 - CSS3 Fliter 效果

本篇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等瀏覽器在不久的未來都會支援這些效果。


上一篇
CSS沒有極限 - Web-font & icons 3連發 - 自製web font icons
下一篇
CSS沒有極限 - Checkbox的妙用
系列文
CSS沒有極限41

尚未有邦友留言

立即登入留言