テキストに影をつけるjavascript「text drop shodow」

文字や画像を強調したい時に影をつけることがあります。
画像はWeb上でもできましたが、テキストではできませんでした。
pr0digy.comでは、テキストに影を付けられるMootools text drop-shadowを公開しています。
moodropshadow

使用方法
Mootools text drop-shadowからmootools.tds.jsを、mootoolsからmootools.jsをダウンロードし、head内に以下の通り書きます。
<script src="http://yourdomain/mootools.js" type="text/javascript"></script>
<script src="http://yourdomain/mootools.tds.js" type="text/javascript"></script>

さらに以下のようなscriptを挿入すれば完成です。
<script type="text/javascript">
//<![CDATA[
var Site = {
start: function(){
new TextDropShadow($$('要素の名前'), {color:'影の色'});
}
};
window.addEvent('domready', Site.start);
//]]>
</script>

またオプションとしてid属性への指定や影の位置、透明度、背景を指定することができます。
例)
new TextDropShadow($('id名'));
new TextDropShadow($$('要素の名前'), {color:'red', opacity: 0.5, background: '#fff'});
new TextDropShadow($$('要素の名前.クラス名'), {color:'red', top:1, left:1});

テキストに影をつけるjavascript「text drop shodow」サンプル

sponsors

「テキストに影をつけるjavascript「text drop shodow」」をシェアする

記事作成:
記事URL:

TOP > > > テキストに影をつけるjavascript「text drop shodow」