問題 × 解決策

cssでコンテンツをぼかす方法

問題

コンテンツを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はこちら

通常のテキスト

ぼかしの入ったテキスト

通常のブロック

ぼかしの入ったブロック

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

four × 4 =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧