お手軽ドロップシャドウテキスト jQdrop.js

ドロップシャドウが必要になったので勉強も兼ねて。
さすがjQuery先生…わずか900Bで実現できました。

サンプル

特徴

• 超お手軽導入
• それなりにフレキシブルに使えそう(そもそも使う機会ないけど)

ダウンロード

jQuery1.2.6が必要になります。

JSファイル

jQdrop.js(１KB)

導入方法

スクリプトファイルを以下のように読み込み

<script type="text/javascript" src="/js/lib/jquery.js"></script>
<script type="text/javascript" src="/js/jQdrop.js"></script>

以下のようなHTMLの場合

<p class="drop">ドロップシャドウテキスト</p>

次のコードで適用します。

<script type="text/javascript">
$(function(){
$(".drop").jQdrop();
});
</script>

拡張

ドロップシャドウの色、位置、ウェイトを決められます。

$(".drop").jQdrop({
color: "#BBB",
top: 2,
left: 2,
weight: "bold"
});

以下のプロパティを使えます。(カッコ内は初期値)

• color: “カラーコード” (“#000″)
• top: 数値 (1)
• left: 数値 (1)
• weight: “bold” (“normal”)

注意

• ドロップシャドウを当てるテキストの直親に適用しないとうまく動作しません。
• display: none があたっている要素ではうまく動作しません。先に適用してからscriptでnoneにします。
• テキストの可変に対応できなかった…

サンプル

動作環境

Windows: IE6, IE7, Firefox3, Opera9.5, Safari3, Chromeで確認