問題
コンテンツをcssだけでぼかしたい。
解決策
「filter: blur();」を使用する。
cssのみでのぼかしの実現
コンテンツをぼかすことが出来ると、色々な表現・演出が可能になりますよね。
このぼかしをcssのみで実現する方法をご紹介します。
まず、HTMLの構築を行います。
便宜上、クラス「blur」を用意します。
<p>通常のテキスト</p>
<p class="blur">ぼかしの入ったテキスト</p>
<div class="box-type01">
<p>通常のブロック</p>
</div>
<div class="box-type01 blur">
<p>ぼかしの入ったブロック</p>
</div>次にCSSの構築を行います。
クラス「switch」とクラス「target」に、適宜cssを設定します。
.blur{
-webkit-filter: blur(4px);
-moz-filter: blur(4px);
-ms-filter: blur(4px);
filter: blur(4px);
}
DEMOはこちら
通常のテキスト
ぼかしの入ったテキスト
通常のブロック
ぼかしの入ったブロック
コメント