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

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

使用方法

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);

	//]]>	

	

またオプションとしてid属性への指定や影の位置、透明度、背景を指定することができます。

例）

new TextDropShadow($('id名'));

new TextDropShadow($$('要素の名前'), {color:'red', opacity: 0.5, background: '#fff'});

new TextDropShadow($$('要素の名前.クラス名'), {color:'red', top:1, left:1});







サンプル
影左上
影右下
Javascriptサンプルページ一覧
skuare.net