« No1英国紳士 | トップページ | いろいろと色の問題 »

文字に影を落としてみよう

あるデザインが奇麗なサイトを閲覧していたら、
日付けの数字に影を落とす装飾がしてあって、
ポイントになっていて見やすいし、それがとても印象的でした。

text-shadow
こんな感じです。

カッコいいけど、
日付の画像を毎回作らなければならないので大変だな、
と最初は思ったのですが、
その数字はポインターで選択できるじゃないですか。
普通のテキストなのでした。

あれっと思ってサイトのソースを覗かせてもらったら
スタイルシートにtext-shadowという指定が。

こんなプロパティがあったのかと、慌てて調べてみたら
CSS1でしっかり定義されているものでした。
とほほのスタイルシート入門にもきちんと掲載されてますね。
全然知らなかった。
スタイルシートを極めるにはまだまだ遠いなぁ…。

ただ、こんなに効果的な装飾ならば、
もっと見る機会があってもいいと思うのですが
これまで見た記憶がないんですよね。
デザインに凝っているサイトならばもっと使っていそうなのに。

なんでだろうと、ちょっと調べてみたのですが…。

のるび〜氏のサイトACCESS R
CSSプロパティブラウザ対応一覧表によると
IE,Mozilla,Operaともにどのバージョンでも全滅(笑)。

ブラウザごとにスタイルシートの対応が異なるのは、
もう慣れっこですが、
メジャーなブラウザがまったく対応していないという
プロパティというのも凄いものがあります(笑)。

自分でも確認したら
IE5.23、Netscape7.1、FireFox0.8、iCab2.9.8では駄目で
Safari1.2 (v125.1)だけが反映してくれるみたいです。

多少なりとも名が知られたブラウザでは、
対応しているのはSafariぐらいなのでしょうか。
使われているのを見ないはずです。
たまたまSafariで閲覧してたから気付いたんですね。
ほかのブラウザで見ると単なる普通のテキスト。
そのサイトはMacユーザのサイトなので、
あえてそんなスタイルの指定をしたのかもしれません。

フリー百科事典ウィキペディア
Cascading Style Sheetsの項目によると
CSS2.1では

text-shadowプロパティのように、CSS2で策定されていながらも殆ど実装されない代物などが削除されている(それらはCSS3で定義され直すことになる)

と記されてます。
もう幻のプロパティですね(笑)。

せっかくなので、今回のこの日記には、
特別に全編文字に影を落とすサービスをしておきます。
Safariで閲覧しているみなさんだけへのサービスです。
その分見難いかもしれませんが(笑)。

追記:
誤字を修正しました。
あとSafariでどう見えるのか興味ある方に。
こんな感じに見えてます
全面に使うとやはり見難いか(苦笑)。

|

« No1英国紳士 | トップページ | いろいろと色の問題 »

「パソコン・インターネット」カテゴリの記事

コメント

この記事へのコメントは終了しました。