超立体的！text-shadowの意外な使い方

カテゴリ：CSS3関連 2011年2月 1日 09:32

text-shadowだけで手軽に立体文字を作る

元々は CSS3 Watch の記事じゃないか、というコメントを頂きました。調べたところ、そこでこのCSSに関する記事が見つかったので参考として記載しておきます。

今回は、とあるサイトで見かけた面白い表現を紹介したいと思います。
右にある画像が、その表現を拡大したものです。これはテキストに対してtext-shadowを指定しただけです。

もちろんテキストなのでコピペもできるし、textareaに指定すれば入力した文字がこのような立体的な文字になります。

下にjsdo.it上で作成したデモを載せてあります。下のほうにある「Play」ボタンを押すことでサンプルが実行されます。
サンプルはtextareaなので、自由にテキストを入力してみてください。（対応ブラウザは WebKit 系か、Firefoxです）

※ちなみにアンチエイリアスのかかったフォントじゃないとあんまりきれいに見えませんｗ

デモ

Steric text used 'text-shadow' property. - jsdo.it - share JavaScript, HTML5 and CSS

ちょっとだけ解説

今回のこのテクニックの肝はtext-shadow（というかそれだけ）です。

複数指定できるtext-shadow

この text-shadow、実は影の部分の指定を複数指定することができるのです。
意外と知らない人は知らない気がするこの指定、カンマ区切りで列挙すればひとつの要素に対して様々な影をつけることが可能になります。

さて、ではどんなことをやっているかというと、サンプルを見ていただくと一目瞭然ですがこの「影を複数指定できる」というのを利用して、立体的に見えるようにたくさんの影を指定することで実現しています。

.realTextクラスに指定している text-shadow の値の最初の 5 つが、文字が飛び出しているように見せる部分。そのあとの 7 つが、その盛り上がった文字からできる影を表現しています。

最初の 5 つの指定で、徐々に暗くなるように色を指定しています。（実際のものは同じ色でも光の当たり方によってグラデーションができます。それを表現している、というわけです）

そして次の 7 で、盛り上がった（ように見える）テキストから、さも影が落ちているような演出をしている、というわけです。

IE では・・・？

残念ながら、最初のほうにも書いた通り、対象ブラウザが限定されてしまいます。
しかし、対応していないブラウザでも、立体的に見えないだけでテキストは正常に表示されます。
なので、こうしたリッチ表現ができるブラウザにはリッチな表現を、そうでないブラウザに対しては情報にアクセスできるようにしておく、という対応ができます。いわゆる「プログレッシブ・エンハンスメント」ですね。

この記事のカテゴリー一覧を見る⇒CSS3関連