頭ん中 テキストに影をつけるために
text-shadow というスタイルシート属性が用意されてはいるが、
今のところ対応しているブラウザはあまりない。
影ついてますか。
↑この文字に影がついていなかったら、
あなたのブラウザは非対応。
というわけで
JavaScriptで任意のテキストに影をつけるライブラリを作ってみた。
使い方も書いておくので誰か使って。
ページ読み込みが終わってから影がつくので、影が出てなかったらもうちょいまってね。
なお、全てのブラウザで試したわけではないので非対応だったらご容赦。
追記：WinのIE6とFirefox1.5とOpera9、MacのSafari2.0、LinuxのFirefox1.5と2.0とOpera9で動作確認。
↓長文もできるけど鬱陶しいかも。
どこで生まれたか頓と見當がつかぬ。何ても暗薄いじめじめした所でニャー／＼泣いて居た事丈は記憶して居る。吾輩はこゝで始めて人間といふものを見た。然もあとで聞くとそれは書生といふ人間で一番獰惡な種族であつたさうだ。此書生といふのは時々我々を捕へて煮て食ふといふ話である。然し其當時は何といふ考もなかつたから別段恐しいとも思はなかつた。
（↑「リンクは汚くなるのでお勧めしません。」と書いてある。）
では使い方。
まずはこれを実装するためのスクリプトをくっつけるのだが、
やり方が２通りある。
どこかに次の２行を貼り付ける。
以上。
(1) prototype.js をインポートする。
(2)↓ここから addShadow.js をダウンロードしてインポートする。
http://www.msng.info/javascripts/addShadow.js
以上。
あとは、影をつけたいテキストを
<div class=”addShadow”>～</div> で囲むだけ。
ソースを見る人はここをクリックね。
現状ではすべてのテキストに同じ影がつくので、
今度はテキストごとに
影の色と太さと文字からの距離を指定できるようにしてみようかな。
追記(2006/11/26)：
SiMPLE*SiMPLEで
「CSSだけで文字にドロップシャドウをつける方法」
が紹介されてた。
がーん。何もこんな面倒なJavaScript使う必要なしか…。
追記の追記：
と思ってたら、その後多方面から
「あれはよくないよ」とコメントが入ったらしい。
HTMLに同じものを２回書くことになり
いろいろと問題があるとか。
それならうちのもそうか。
JavaScriptがオンでCSSがオフだったら
わけのわからん表示になる。
