[CSS]テキストに面白いエフェクトを与えたデモと実装の注意点

Post on:2011年4月27日

テキストにブラー効果を与える方法と注意点

テキストにぼんやりとさせるブラー効果を与えるのは、簡単です。テキストのcolorを透明にし、text-shadowを使用します。

.blurry-text {
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

しかし、このままでは危険です。colorには対応していて、text-shadowには対応していないブラウザでは、何も見えない状態になってしまいます。
これを解決するには、「modernizr」を使用して、対応ブラウザかどうか確認して適用します。

.textshadow .blurry-text {
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

[ad#ad-2]

HTMLは、全てのデモでテキストをh2要素で実装しているだけです。
下記は、4番目の「modernizr」を使ったデモのものです。

<section>
	<h2 class="foreverblur">Modernizblur</h2>
</section>

「Letter.js」を使用して一文字ずspan要素で括り、順番にブラー効果を与えています。

これも同様に「Letter.js」を使用して一文字ずspan要素で括り、CSS animationで異なるタイミングでブラー効果を与えています。

ユーザーのマウスホバーに合わせて、ブラー効果を与えます。

「modernizr」を使用して、text-shadowに対応したブラウザのみブラー効果を適用します。

「jQuery」を使用して、ランダムに異なるブラー効果を与えています。