メニュー
ひとぅ
新しいもの好きな「ひとぅ」が2007年10月からガジェット製品や雑貨、面白いウェブサービスなどの情報を発信しています。お得な情報や役立つTIPSも人気です。
アーカイブ
カテゴリー

水面に反射したようなロゴを再現する

  • URLをコピーしました!

Web2.0的サイトのロゴって、水面に映ったようなおしゃれなものが多いですが、“アレ”をJavascriptで簡単に実現できます。
GIGAZINEさんのサイトや、designwalkerさんのサイトで紹介されていました。

  1. Reflection.jsのサイトの下のほうにDownload reflection.jsからファイルをダウンロードして解凍。
  2. 解凍したファイルの中から、「reflection.js」をサーバにアップロード。
  3. 画像を表示したいhtmlの<head>から</head>の間に
    <script language="JavaScript" type="text/javascript" src="reflection.js"></script>
    

    と書いて、reflection.jsを読み込みます。

  4. 反射させたい画像(jpg,gif,png)にclass="reflect"を追加する。
    <img src="画像ファイル名" class="reflect" />
    

これで、かっこいい写り込み画像が表示されます。
グラフィックソフトで編集すれば簡単に実現できますが、このスクリプトを使えば都度画像を加工しなくていいので便利ですね。
(マクドナルドのクーポンもこうして反射させるとカッコイイ!(*^_^*))

目次

関連サイト

この記事が気に入ったら
フォローしてね!

この記事をシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次