【CSS3】素敵な演出!ぼかしを使用したWEBデザイン

こんにちは、ANAIです。

9月に入り、季節も徐々に秋へと色めいてきましたね♪
ANAIは秋物のお洋服が欲しくてたまりません。


今日は、CSS3で簡単にぼかし効果を行う方法を書いていきます。
背景を少しぼかすだけでサイトのイメージが全然違いますよね(*´ω`)


「CSS3って、まだよくわからない!」って方も、filterプロパティを利用すると、
ぼかしの効果を難しい記述をすることなく簡単に実装することができます。

では、実践していきましょう。
WEBデザイナーの卵さんなら、やりながら覚えるのも楽しいですよ!

もし、これからホームページをつくろうと思っている方が見られているならば、
これからつくる理想のサイトに素敵なぼかし効果を使ってみてください♪

●CSS3のfilterでblur効果を実装
filter
filter2

-webkit-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);


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

すばらしいですね~( *´`)

問題点はwebkitブラウザしか対応していないことです・・・。
ベンダープレフィックスで-webkit-をつけても動きます。
つけなくても動きますが。

webkitブラウザしか対応していないのは結構致命的・・・。
使うのもすこし注意が必要ですが、簡単にひと手間加えるだけで素敵な演出ができるのはうれしいですよね♪

スマホ向けであれば大丈夫なのでもしスマートフォンサイトをつくろうとお考えの方は試してみてください♪

下にデモページをつくっているので、見てみてくださいね。
ちなみにブラウザがIEの方は、GooglechromeかFIrefoxでご覧ください。

btn



それではANAIでした~(*’▽’)ノ