skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

フォントを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で着飾る「JQuery FontEffect plugin」サンプル

記事作成：2009年04月01日

前の記事：魅せる画像スライドショーJavaScript「jQuery GalleryView」
次の記事：印象的なニュースティッカーを作れるJavaScript「jTicker」