4月ももう後半に入りましたね。
つい先日まで咲いていた桜があっという間に葉桜になってしまいましたが、
それと同時に気温もあたたかくなり、春物の洋服がどんどんほしくなっている今日この頃。

クリエイターノートは、サイト作成時に使用したcssやJQueryの備忘録にしていこうと考えています。
自分で作成したcss3を使用したアニメーションなども載せていきたいな…

今回は、CSS3で簡単にぼかし効果を行う方法を書いていきます。
もう結構前から使用されている手法ですが、いざ使うとなると「なんだっけ…」となるので備忘録。
サイトを淡くしたいとおきなどにおしゃれに使用できます。
ぼかした背景のうえに文字を載せるとかっこよくなるので好きです。

filterプロパティを利用すると、ぼかしの効果を難しい記述をすることなく簡単に実装することができます。
たった3行で終わってしまうので本当にcss3さまさまです。

コードは以下。

See the Pen JNdPNO by sayuri (@giraffeweb) on CodePen.0

 

ぼかすのに必要な部分はここだけ。

.bokashi {
-webkit-filter: blur(6px);
-ms-filter: blur(6px);
filter: blur(6px);
}

これをスタイルシートに記述するだけで簡単に指定した画像や背景がぼけてくれます。

すばらしいですね～。

問題点はwebkitブラウザしか対応していないことです…。
ベンダープレフィックスで-webkit-をつけても動きます。
つけなくても動きますが。
※IEでの表示はご想像の通りです。IE専用のコードを記述すれば同じような表示は可能ですのでお試しあれ！

IEでは未対応となっております。
ただし、 jQueryとvintageというJSを使用すれば同じようなことがIEでも可能です。
問題がまったくないというわけではないのですが…ChromeやFirefoxとエフェクトが若干違うと思います。
（デザイナーなら気になるはず…）
ただ、近い再現はできるのでIEで実装したい方は導入してみて下さい。
2017年10月29日修正

使うのは少し注意が必要ですが、簡単にひと手間加えるだけで素敵な演出ができるのはうれしいですよね。

スマホには対応しているのでそちらはご心配なく。

背景をぼかすと以下のようなこともできます。

See the Pen ぼかし＋ by sayuri (@giraffeweb) on CodePen.0

素敵すぎる…!!

ぜひ皆さんもサイト作成の際に使用してみてください。

• css3,
• web