CSS3の「text-shadow」を使用したクールなテキストエフェクト

スポンサードリンク

CSS3エフェクトを取り入れたWebサイトも一般的になり、結構なサイトで実装されています。なかでも、テキストに影をもたせるエフェクトをよく見かけます。最近では、最新ブラウザの発展により実装が簡単になりました。

そこで今回は、CSS3のtext-shadowを使用してカッコいいテキストエフェクトのかけ方を紹介します。まずテキストエフェクトCSSスニペットを発表する前に、text-shadowの基本記述の方法を解説いたします。

テキストシャドウの使い方

f:id:blaireau:20150226174327j:plain

text-shadowの基本

h1 {
  text-shadow: 3px 5px 10px #000;
}

ご覧のように、h1要素にtext-shadowを適用しています。text-shadowプロパティには、4つの値があります。

最初の値(3px)はX座標、第二の値(5px)はY座標、第三の値(10px)はぼかし半径、最後の値(#000)はテキストシャドウのカラーコードです。

以上でtext-shadowの簡単な使い方を示しました。では、引き続きクールなテキストエフェクトの記述方法をご覧くださいませ。


INSET

f:id:blaireau:20150226174217j:plain

h1 {
  text-shadow: 0px -2px 0px #333,
               0px 2px 3px #666;
}


3D Text

f:id:blaireau:20150226174234j:plain

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

f:id:blaireau:20150226174249j:plain

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;
}


Cool Text Effects Using CSS3 Text-Shadow