Reflex.jsを使う。(2)

[Reflex.js]
http://www.netzgesta.de/reflex/
今回は鏡面効果+立体効果を与えるスクリプトです。
前回に引き続き、オプションクラスを使ってみたいと思います。

今回も画像はこちら。デフォルトの設定はこのようになります。
続、田舎の綺麗① Photo By 南国の風&kao from Zorg
続、田舎の綺麗①

【影の透明度を設定:iopacity】
鏡面効果となっている影の透明度を設定できます。
iopacity[数値]の形式でクラス指定します。(単位はパーセント)
最大100、最小0、デフォルト設定は33となっています。
<img src='xxx' class='reflex iopacity90'/>
続、田舎の綺麗①

【画像に枠をつける:iborder】
画像に枠をつけることができます。
iborder[数値]で枠の幅を指定します。(単位はピクセル)
最大100、最小0、デフォルト設定は0となっています。
<img src='xxx' class='reflex iborder10'/>
続、田舎の綺麗①

【枠の色設定する:icolor】
iborderを使用する場合にセットで使うことができます。
icolor[6桁のカラーコード]を指定します。指定しない場合は#F0F4FFです。
(・・・と記載されていますが黒い枠が表示されるようです。)
オレンジ色の枠#FFBB55をつけてみます。
続、田舎の綺麗①

【効果の利用】
立体効果は横並びにすると素敵になりますね。
バッチはツールを使って作りました。
[Fresh Badge Generator]
http://www.freshbadge.com/

sample1sample2sample3sample4sample5

このようなスクリプトは新しいものがどんどんでてきて、
選べる手段が増えてきますね。楽しいです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This site uses Akismet to reduce spam. Learn how your comment data is processed.