フォントをJavaScriptで着飾る「JQuery FontEffect plugin」

フォントに反射効果や枠線、ドロップシャドー・・・などの装飾をするのは画像編集ソフトが必要でした。
その煩わしさを解消したのが、JQuery FontEffect pluginです。
もうなんでもやっちゃいます。

使用方法

JQuery FontEffect pluginからjquery-fonteffect.jsをダウロードします。


<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery-fonteffect-1.0.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#id名').FontEffect({ 
		outline:true,  //枠線
		outlineWeight:3 ,//枠線の太さ
		outlineColor1:"#358F41", //枠線左上の色
		outlineColor2:"#CF630C",　//枠線右上の色
		shadow:true,  //影
		shadowColor:"#35808F", //影の色 
		shadowOffsetTop:4, //影の位置（上から）
		shadowOffsetLeft:4,//影の位置（左から） 
		mirror:true, //反射効果
		mirrorHeight :120, //反射効果の高さ
		gradient:true, //グラデーション
		gradientColor:"#35808F" //グラデーションの初期色
		})
});
</script>

上記を記述したら、以下のように指定idでくくった部分が適用されます。
<p id="id名">テスト</p>
以下のようなサンプルが出来あがります。

サンプル

テスト

Javascriptサンプルページ一覧

skuare.net