Automatic Rreflection
最近鏡面仕上げのデザインをよく見かけます。
photoshopで加工すればな〜んてなく加工できるんですが...
画像の点数が多くなればもう指が腱鞘炎になりそうでヘトヘトになってきます。
またピクセル単位で画像をチョコマカと動かさないといけないんで目が砂漠状態になりますよね〜。
アクションで同じ動作を繰り返す設定にしていても下のような画像だと結局は手を加えないとそれなりに見えないのがダメです。
そこで、もっと手軽にリフレクションができないかな？？？？？と、WEBを検索しているとありました！
いい感じにしてくれるものが...
入手先はここです！
http://cow.neondragon.net/stuff/reflection/
ありがたやー m(__)m
上の画像もそうなんですが、
画像を表示したいhtmlの<head>から</head>の間に
<script language="JavaScript" type="text/javascript" src="reflection.js"></script>
を書いて、reflection.jsを読み込みます。
反射させたい画像(jpg,gif,png)に"reflect"ってクラスを追加する。
<img src="画像ファイル名" alt="" class="reflect" />
すると、この画像が...
こんなのになります。