ドロップシャドウ Powerd by CSS

Webデザイン上、よく使われる画像効果は何だろう。たぶん「ドロップシャドウ」が正解だ。もちろんドロップシャドウが使われていないデザインのサイトもあるが、一切使われていないサイトを探すほうが難しい。そんな流行(?)なドロップシャドウを、テキストに限り、スタイルシートで実現できることはご存じだろうか。でも現段階でサポートしているブラウザは、Safari
Only…。一般サイトでは、あまり実用的ではないが、Macユーザーオンリーのサイトに限った場合などには、Macのブラウザ・シェアを考えると充分実用に耐えられるのではないだろうか。

text-shadow

Apple製ブラウザ「Safari」は、標準でテキストにアンチエイリアスがかかるため、工夫を凝らせば、文字を画像化せずとも、とても綺麗に表示する。ただ、縁がついた文字など、ちょっとした効果がかかった文字を作ろうとすると、やはりPhotoshopやFireworksなどの画像処理ソフトが必要になってしまい、ソフトを買わないといけないし、手間もかかってしまい、気軽に手を出すことが出来ないのが現状だ。だが簡単なドロップシャドウならば、スタイルシートでプロパティの「text-shadow」を使えば、Safariに限り表示させることができる。

<p>〜</p>にドロップシャドウ

p {
text-shadow: black 10px 15px 3px;
}

たったこれだけで、<p>〜</p>にドロップシャドウがかかる。「black」がカラーで、次の「10px」がX軸ずらすピクセル、その次の「15px」はY軸にずらすピクセル数、最後の「3px」は、ぼかすピクセル数だ。プロパティには、スタイルシート標準の単位で書くことも出来る。

SCREAMOの場合

h2 {
text-shadow: #a4b398 0 0 3px;
}

上記のコードは、「#a4b398のカラーで、X軸、Y軸をずらさずに、3pxだけボケさせてくれ」という意味。このページのヘッダー部分、右側を見てもらうとわかるが、エントリータイトルが表示されている。実はここに、このドロップシャドウを上記のスタイルでカスケードさせているので、もしあなたのマシンにSafariがインストールされているのならば、是非見てみて欲しい。

text-shadow OFF

text-shadow OFF

text-shadow ON

text-shadow ON

用途を考えてみよう

このプロパティ「text-shadow」は、現時点ではSafari Onlyのテクニック。Windows版Safariが登場した今も、ブラウザ・シェアを考えると、Macユーザーがアクセスの大半を占めるサイトで利用されるのが望ましい。Windowsユーザーもアクセス対象となるサイトでは、大変利用されにくいテクニックだが、実はCSS2で定義されている、きちんとしたプロパティ(2.1ではずされたみたいだけど、CSS3では復活予定)なので、今後はじっくりと対応ブラウザは増加していくはず。でもなんだかんだ言って、Internet
Explorerの事を考えると、最低でも後5年は埋もれてしまうテクニックだろう。

だが、よく考えて欲しい。ドロップシャドウをつけたほうが、もちろん文字はかっこよく見えるが、ドロップシャドウがついていなくても、問題ない箇所に使うのならば、まったく問題ないのでは?
ちょっとした、Safariでアクセスしてくれた人へのご褒美程度に考えれば、充分使ってもいいテクニックではないだろうか。

related story