iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 14
1
自我挑戰組

30 天 CSS 隨手筆記系列 第 14

30 天 CSS 隨手筆記 - 第 14 天 - filter~!!

filter 主要是套用在圖片上的,我們可以藉由這個屬性,達到簡易的濾鏡效果;各個 filter function 之間配合得好的話,也可以玩出很多變化。

其實用看的就很有感覺了:http://bennettfeely.com/filters/

支援度也還算不錯 (# ̄▽ ̄)/‧☆"'


( 來源:http://caniuse.com/#feat=css-filters )


  1. blur - 模糊效果

    img {
        /* <length> 是高斯模糊的半徑,預設為 0px */
        filter: blur(<length>);
    }
    

  2. brightness - 亮度調整

    img {
        /* <number-percentage> 預設為 1 */
        filter: brightness(<number-percentage>);
    }
    

  3. contrast - 調整對比度

    img {
        /* <number-percentage> 預設為 1 */
        filter: contrast(<number-percentage>);
    }
    

  4. grayscale - 灰階效果

    img {
        /* <number-percentage> 預設為 0,需要是 0 到 1 之間的值 */
        filter: grayscale(<number-percentage>);
    }
    

  5. hue-rotate

    img {
        /* <angle> 為旋轉的角度,預設為 0 */
        filter: hue-rotate(<angle>);
    }
    

  6. invert - 負片效果

    img {
        /* <number-percentage> 預設為 0,需要是 0 到 1 之間的值 */
        filter: invert(<number-percentage>);
    }
    

  7. sepia - 懷舊效果

    img {
        /* <number-percentage> 預設為 0,需要是 0 到 1 之間的值 */
        filter: sepia(<number-percentage>);
    }
    

  8. saturate - 調整飽和度

    img {
        /* <number-percentage> 預設為 1,需要是 0 到 1 之間的值 */
        filter: saturate(<number-percentage>);
    }
    

  9. opacity
    跟 opacity 的效果一樣,略~

  10. drop-shadow

    img {
        /* <length> 是高斯模糊的半徑,預設為 0px */
        filter: blur(<length>);
    }
    


    用 box-shadow 的話,影子會在整個 img 的外框;用 drop-shadow 則會自動判斷非透明的像素點來呈現陰影,超級方便的~!!


這次看了後就覺得,其實很多事情可以用 filter 就做到了 ( 如果允許放生 ie 的話... XD )

之後有機會可以再改寫一下本來的寫法 =D


上一篇
30 天 CSS 隨手筆記 - 第 13 天 - transform~!!
下一篇
30 天 CSS 隨手筆記 - 第 15 天 - Shapes ~!!
系列文
30 天 CSS 隨手筆記30

尚未有邦友留言

立即登入留言