カテゴリ：CSS3関連 2011年2月 7日 09:00
前回と合わせて連続でtext-shadowネタです。今回は、text-shdaow のぼかし部分を利用して、CSS のみでテキストをぼかすテクニックの紹介です。
今回のテクニックは text-shadow に対応しているブラウザであれば、CSS のみで実現可能です。
まずは下の jsdo.it のサンプルを見てください。（下の方にある「Play」ボタンを押すと実行されます）
スタイルをtextareaに設定しているので、ぼかし状態の文字が入力されるのが確認できると思います。
[Demo] Blur text for CSS3 - jsdo.it - share JavaScript, HTML5 and CSS
まずポイントとなるプロパティは当然、text-shadowです。
普通はテキストに影をつけるためのプロパティですね。
それを以下のようにすることでぼかし部分だけを表示することができます。
color が大事なポイントです。普通はカラーは色をつけるのが当たり前ですが、今回のテクニックの場合はこれを透明にしてしまいます。
つまり、影の上に乗っているテキストの色を透明にすることで、結果、影だけが表示されぼかし効果が残る、というわけです。
サンプルを WebKit 系ブラウザで見ている人は気づいていると思いますが、実はこのサンプルにはアニメーションを設定しています。
text-shadow のぼかし部分を 0 から 10px などに指定することで、プレゼンツールで表示されるような効果を得ることができます。ぜひ試してみてください。
この記事のカテゴリー一覧を見る⇒CSS3関連
トラックバックURL
カテゴリー
最近のエントリー
©2009-2011 CSS-EBLOG All Rights Reserved
