jquery.dropshadow.js

jQueryのjquery.dropshadow.js。
置き場所が変わったんだろうか? ネットで検索して出てくるサイトの多くが、ダウンロードのリンクが切れている。
一応、下記でダウンロード可能でした。(同じものかどうか不明。Download the script hereのhereをクリックしてダウンロードできました。)

jquery.dropshadow.jsのダウンロード

AllAboutの解説だと別のファイルも必要みたいな感じなんですが、これ一個だけでできました。

ただ、1つ問題(不具合?)が。
詳しく検証してないけど、白い文字にシャドウを付けたときに、カゲが白くなってしまった。黒にしたいのに、意図通りの色のカゲが付かない。
色指定をしても黒くできないし、jsの中身を見ても、初期値は黒になってるようなんだけど。。。
仕方ないのでいろいろやってるうちに、とりあえず回避法は発見。

まず文字は黒にしておいて、ドロップシャドウを適用した後、同じくjQueryでCSSの値をいじって文字を白くする。
先に黒い影ができてしまった後に文字の色を変えれば大丈夫らしい。
コードは下記。(id名textというdivの中のspanの文字にドロップシャドウを適用)

$(function(){
  $("#text").dropShadow({left:2, top:2, blur:1, color: "black"});
});
$(function(){
    $("#text span").css('color','#ffffff');
});

このやり方、正しいのか自信が持てない。。。
あ、でもJavaScript非対応の場合も考えると、デフォルトは白で、まず黒に変えて、シャドウして白に戻すという3ステップの方がよさそうか。

コメント