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

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

sponsors

「フォントをJavaScriptで着飾る「JQuery FontEffect plugin」」をシェアする

記事作成:
記事URL:

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