2012/09/11

かつてIllustratorやPhotoshopで作っていたテキストの装飾もCSS3のtext-shadowプロパティを使えばもはや不要になるのではと思ってしまうくらい多彩な表現が可能になってきました。

画像ではないのでクライアント環境に合わせた適切な出力が得られますし、一度に複数のスタイルをダイナミックに変更できます。画像ファイルを作成する工数もかかりませんし、テキストデータなのでコピー可能、SEOにも効果的でしょう。

いいことづくめのCSS3によるテキスト装飾。ここでは一例を見ていきます。

強調(その1)

text decoration

color: #444;
text-shadow:
  1px 1px 0px #eee,
  2px 2px 0px #707070;

強調(その2)

text decoration

color: #fff;
text-shadow:
  0px 0px 1px #666,
  0px 0px 5px #666,
  0px 0px 6px #666;

立体(その1)

text decoration

color: #fff;
text-shadow:
  0px 1px 0px #999,
  0px 2px 0px #888,
  0px 3px 0px #777,
  0px 4px 0px #666,
  0px 5px 0px #555,
  0px 6px 0px #444,
  0px 7px 0px #333,
  0px 8px 7px #111;

立体(その2)

text decoration

color: #222;
text-shadow:
  -1px -1px 0px #eee,
   1px -1px 0px #5c5c5c,
   1px  1px 0px #5c5c5c,
  -1px  1px 0px #5c5c5c;

アウトライン(縁取り)

text decoration

color: #000;
text-shadow:
  -1px -1px 0px #5c5c5c,
   1px -1px 0px #5c5c5c,
   1px  1px 0px #5c5c5c,
  -1px  1px 0px #5c5c5c;

エンボス

text decoration

color: #ccc;
text-shadow:
   1px  1px 0px #fff,
  -1px -1px 1px #666;

ネオン

text decoration

color: #fff;
text-shadow:
  0 0  4px #fff,
  0 0  8px #fff,
  0 0 12px #fff,
  0 0 18px #ff00de,
  0 0 22px #ff00de,
  0 0 28px #ff00de,
  0 0 36px #ff00de;

バックライト

text decoration

color: #555;
text-shadow:
  0 0 15px #edf8ff,
  0 0 10px #edf8ff,
  0 0 20px #edf8ff;

ぼかし(その1)

text decoration

color: transparent;
text-shadow:
  0 0 5px #303030;

ぼかし(その2)

text decoration

color: rgba(255, 255, 255, 0.1);
text-shadow:
  0px 0px 15px rgba(255, 255, 255, 0.5),
  0px 0px 10px rgba(255, 255, 255, 0.5);

他にも工夫次第で様々な表現が可能になると思います。いい時代ですね。