写真などのぼかし処理は、今まで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%);
あくまでもコードでぼかしなどを指定しているだけなので、機密性のない画像に使って下さい。
