本当に CSS だけでテキストにシャドウを

前回、S i M P L E * S i M P L E さんのエントリーにただ乗りさせていただく感じで書いた 「CSS は正しくお使いください」 というエントリーですが、Text shadows プロパティが定義されてブラウザが実装するまで待てって、まったく解決になってねーよっていうエントリーだったせいか、なんか他に方法ないのかね？という話を知り合いからもらったので、その時話した方法をメモ代わりに上げておきます。 最初に断っておきますが、これから紹介する方法は、今現在、IE では認識されませんので、あまりインパクトはないということと、テキストにシャドウを付けるということ自体、無理に CSS でやることなの？という個人的な疑問もありますので、積極的に使用をオススメするものではありません。あくまでこんな方法もあるよという程度で楽しんでください。 ということで、まずはいきなりソースから。 HT

[teddy-g]

CSSだけでfirefoxにドロップシャドウ。クラス指定してあるところ全部にスクリプトでafterの中身を指定することもできるが微妙だな。

[lomo_lomo]

:after 擬似要素を使用

[picnicgraphic]

:after擬似要素を使用し、contentで同じ文字を指定。このままだと横並びになってしまうので、display:blockで縦並びにしてあげる。topとleftにmargin指定をしてドロップシャドウのようにみせる。※IE未対応→画像が好ましい。

[as365n2]

:after 擬似要素を使う。:before だと operaでうまくいかないらしい。('A`)

[kkrr]

アイディア。実際に使おうと思ってはいけない

[ysk_lucky-star]

一応 valid だけど、やっぱ画像の方がいいよね。そもそも ;after はこーゆー使い方をするためのものじゃないし

[suVene]

使わないちっぷす。知識として。