CSS filterを使って脱Photoshop

写真などのぼかし処理は、今までphotoshopで行っていました。ぼかし具合の変更があるたびにphotoshopで修正して、、、確認して、、修正して、、、いちいち面倒くさい!
それが、CSSで処理ができるようになったと!!!ぼかし具合もコードをいじるだけ!
現在、IEにだけは対応していないようです。(Edgeは対応)

リファレンスを参照したい方はこちら

スポンサーリンク

filterプロパティ

filterプロパティは、ぼかしだけではなく明るさ、コントラスト、グレースケール、彩度、セピア、色相回転などなど機能が豊富です。

/* ぼかし-値が大きいほどぼかしが強くなる。%指定は不可 */
filter: blur(5px);

/* 明るさ-0以上の値を使用。0は黒 */
filter: brightness(0.4);

/*コントラスト-0以上の値を使用。100%はオリジナル表示 */
filter: contrast(200%);

/* ドロップシャドウ-;画像の特定の色に対してアルファマスクのぼかしを適用 */
filter: drop-shadow(16px 16px 20px blue);

/* グレースケール-100%で完全にグレー */
filter: grayscale(50%);

/* 色相回転-画像全ての色に色相回転を加える。0degはオリジナル */
filter: hue-rotate(90deg);

/* 階調反転-画像全ての色に階調反転を加える。0%はオリジナル */
filter: invert(75%);

/* 透明度-opacityプロパティに近い。画像を半透明にする */
filter: opacity(25%);

/* 彩度-100%でオリジナル表示 */
filter: saturate(30%);

/* セピア-0%でオリジナル表示 */
filter: sepia(60%);

あくまでもコードでぼかしなどを指定しているだけなので、機密性のない画像に使って下さい。

タイトルとURLをコピーしました