CSS3の「text-shadow」を使用したクールなテキストエフェクト
スポンサードリンク
CSS3エフェクトを取り入れたWebサイトも一般的になり、結構なサイトで実装されています。なかでも、テキストに影をもたせるエフェクトをよく見かけます。最近では、最新ブラウザの発展により実装が簡単になりました。
そこで今回は、CSS3のtext-shadowを使用してカッコいいテキストエフェクトのかけ方を紹介します。まずテキストエフェクトのCSSスニペットを発表する前に、text-shadowの基本記述の方法を解説いたします。
テキストシャドウの使い方
text-shadowの基本
h1 { text-shadow: 3px 5px 10px #000; }
ご覧のように、h1要素にtext-shadowを適用しています。text-shadowプロパティには、4つの値があります。
最初の値(3px)はX座標、第二の値(5px)はY座標、第三の値(10px)はぼかし半径、最後の値(#000)はテキストシャドウのカラーコードです。
以上でtext-shadowの簡単な使い方を示しました。では、引き続きクールなテキストエフェクトの記述方法をご覧くださいませ。
INSET
h1 { text-shadow: 0px -2px 0px #333, 0px 2px 3px #666; }
3D Text
h1 { text-shadow: 0 1px 0 #bbb, 0 2px 0 #bbb, 0 3px 0 #aaa, 0 4px 0 #aaa, 0 5px 0 #999, 0 6px 1px #000, 0 0px 3px #000, 0 1px 3px #000, 0 3px 5px #000, 0 5px 10px #000, 0 5px 20px #000; }
Neon Lights
h1 { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de; }