任意のテキストに影をつけるJavaScriptライブラリ

テキストに影をつけるために
text-shadow というスタイルシート属性が用意されてはいるが、
今のところ対応しているブラウザはあまりない。

影ついてますか。

↑この文字に影がついていなかったら、
あなたのブラウザは非対応。

というわけで
JavaScriptで任意のテキストに影をつけるライブラリを作ってみた。
使い方も書いておくので誰か使って。

ページ読み込みが終わってから影がつくので、影が出てなかったらもうちょいまってね。
なお、全てのブラウザで試したわけではないので非対応だったらご容赦。
追記:WinのIE6とFirefox1.5とOpera9、MacのSafari2.0、LinuxのFirefox1.5と2.0とOpera9で動作確認。


こんな感じ。影ついてますか。

太字だとこんな感じ。

デカ文字の赤。

影だけとか。わかりにくいか。

↓長文もできるけど鬱陶しいかも。

 吾輩は猫である。名前はまだ無い。
 どこで生まれたか頓と見當がつかぬ。何ても暗薄いじめじめした所でニャー/\泣いて居た事丈は記憶して居る。吾輩はこゝで始めて人間といふものを見た。然もあとで聞くとそれは書生といふ人間で一番獰惡な種族であつたさうだ。此書生といふのは時々我々を捕へて煮て食ふといふ話である。然し其當時は何といふ考もなかつたから別段恐しいとも思はなかつた。

アンダーラインは太くなるのでイマイチ。

(↑「リンクは汚くなるのでお勧めしません。」と書いてある。)

では使い方。

まずはこれを実装するためのスクリプトをくっつけるのだが、
やり方が2通りある。

1.「prototype.jsをインポートする」という言葉の意味がわからない人用

どこかに次の2行を貼り付ける。


以上。

2.「prototype.jsをインポートする」という言葉の意味がわかる人用

(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に同じものを2回書くことになり
いろいろと問題があるとか。

それならうちのもそうか。
JavaScriptがオンでCSSがオフだったら
わけのわからん表示になる。

  • このエントリーをはてなブックマークに追加