filterを使って画像にエフェクトをかける

LastModified
Category CSS

概要

ぼかす・輝度・コントラスト・影・グレースケール・色相・反転・透過・彩度・セピア

参考

https://developer.mozilla.org/ja/docs/Web/CSS/filter

対応ブラウザ

https://caniuse.com/#feat=css-filters

2019/12/12 現在ではIEを除けば比較的使えそう

対象の画像

Photo by David Edelstein on Unsplash

Photo by David Edelstein on Unsplash

画像にエフェクトをかける

ぼかす (blur)


.filter-blur{
    filter: blur(5px);
}

明度・輝度を変える (brightness)


.filter-brightness{
    filter: brightness(0.4);
}

コントラストを変える (contrast)


.filter-contrast{
    filter: contrast(200%);
}

影をつける (drop-shadow)


.filter-drop-shadow{
    filter: drop-shadow(16px 16px 20px blue);
}

グレースケール化 (grayscale)


.filter-grayscale{
    filter: grayscale(50%);
}

色相の変更 (hue-rotate)


.filter-hue-rotate{
    filter: hue-rotate(90deg);
}

階調・ネガポジの反転 (invert)


.filter-invert{
    filter: invert(75%);
}

透過率の変更 (opacity)


.filter-opacity{
    filter: opacity(25%);
}

彩度の変更 (saturate)


.filter-saturate{
    filter: saturate(30%);
}

セピア化 (sepia)


.filter-sepia{
    filter: sepia(60%);
}

複数のフィルターを適用する


.filter-multi{
    filter: contrast(200%) sepia(60%) invert(75%);
}

アニメーション(transition)

マウスオーバーでエフェクトを変化させる


.filter-anim01 img{
    filter: sepia(80%);
    transition-duration: 0.5s;
}
.filter-anim01 img:hover{
    filter: sepia(0);
}

アニメーション(animation)

ループで色相と明度の値を変える


.filter-anim02 {
    animation: 3s infinite alternate anim02;
}

@keyframes anim02 {
    from {
        filter: hue-rotate(0deg) brightness(1.4);
    }

    to {
        filter: hue-rotate(360deg) brightness(1);
    }
}