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

テキストにぼんやりとさせるブラー効果を与えたさまざまなデモと、実装の注意点を紹介します。

サイトのキャプチャ

Fun With Blurred Text
デモページ

[ad#ad-2]

下記は各ポイントを意訳したものです。

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

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

CSS

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

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

CSS

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

[ad#ad-2]

テキストにブラー効果を与えたデモ

HTML

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

<section>
	<h2 class="foreverblur">Modernizblur</h2>
</section>
デモのキャプチャ

デモページ

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

デモのキャプチャ

デモページ

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

デモのキャプチャ

デモページ

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

デモのキャプチャ

デモページ

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

デモのキャプチャ

デモページ

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

sponsors

top of page

©2018 coliss