Slided.jsを使う。(2)

[Slided.js]
http://www.netzgesta.de/slided/

画像を映写機のスライドのような枠で装飾するスクリプトです。
今回はオプションクラスのうち、色指定を行えるクラスについて解説します。

今回もこちらの写真を使います。(季節はずれですが。)
slided_sample
<img src=".../images/xxxxx.jpg" alt="sample" class="slided"/>
slided_sample

【ibgcolor】
映写機風スライド部分の色を6桁のカラーコードで指定します。
デフォルトは#FFFFFFです。
(ただし、IEの場合はデフォルト設定のままだと影部分が透過されます。)

[ibgcolorEEFFCC]
<img src=".../images/xxxxx.jpg" alt="sample" class="slided ibgcolorCCFF99"/>
slided_sample

【igradient】
ibgcolorを設定している場合にグラデーションカラーを指定できます。
デフォルトはグラデーションなしです。
[ibgcolorEEFFCC igradientFFDDEE ]
<img src=".../images/xxxxx.jpg" alt="sample" class="slided ibgcolorCCFF99 igradientFFDDEE"/>
slided_sample

【vertical】
通常は左上から右下へグラデーション効果が現れますが、
verticalを指定すると縦方向のグラデーションとなります。
[ibgcolorEEFFCC igradientFFDDEE vertical]
<img src=".../images/xxxxx.jpg" alt="sample" class="slided ibgcolorCCFF99 igradientFFDDEE vertical"/>
slided_sample

【horizontal】
通常は左上から右下へグラデーション効果が現れますが、
horizontalを指定すると横方向のグラデーションとなります。
[ibgcolorEEFFCC igradientFFDDEE horizontal]
<img src=".../images/xxxxx.jpg" alt="sample" class="slided ibgcolorCCFF99 igradientFFDDEE horizontal"/>
slided_sample

色の効果をうまく取り入れると、
うるさくならない程度に画像表示ができそうです。

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください