DesignWalker RSS フィード

CSSとJavaScriptで画像を鏡に反射したようにさせてみる

web2.0的なデザインの代表のひとつとして、鏡に反射したような写真をよく見つけます。

代表的なサンプルは↓こんなん

ipod.jpg

appleのiPodの画像

こんな感じのデザインをよく見かけますよねぇ。
っちゅうことで、わたくしのブログのロゴも反射しております。。。

これって、PhotoShopなどで画像を加工すれば簡単にできるのでございますが。。。
毎回、毎回、画像を加工するのも面倒なので。。。CSSとJavaScriptで画像を加工することなく鏡に反射したようにさせることができますねん。しかも、結構簡単に。

っちゅうわけで、本日はCSSとJavaScriptで画像を加工することなく鏡に反射したようにさせる方法をご紹介じゃ。

Reflection.js
ここのスクリプトを使わせていただきました~。

↑ここのサイトでもサンプルいっぱいあって、見てるだけでも楽しめますよん。
まぁ、せっかくなので、わたくしもこのスクリプト使ってテストしてみました~。

とりあえず、サンプルはこちらからじゃ↓

クリックでサンプルページ開きますねん。

ではでは、肝心のやり方。。(英語分かる人はReflection.jsのサイトから直接どうぞ。。。)

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)に”reflect”ってクラスを追加する。

<img src=”画像ファイル名” alt=”" class=”reflect” />

こうすると、わざわざPhotoShopなど使わずに簡単に画像を鏡に反射したようにさせることができますねぇ~。結構便利っすね。

デザインblogランキングデザインblogランキング

関連ブログ


デザインblogランキング

コメント No Comments »   はてなブックマーク   del.icio.us

この記事に関連する記事



No Responses to “CSSとJavaScriptで画像を鏡に反射したようにさせてみる”

  1. モロインターネット/ブログ Says:

    Web 2.0 風ロゴ ~Reflection.js~

    前回「Web 2.0 風ロゴ ~グラデーション~」のつづき。
    http://ameblo.jp/morointernet/entry-100162222...

この記事に対するコメントを残す




この記事のトラックバックURL


デザインウォーカー はてなRSSへ追加 Livedoorへ追加 Google Readerへ追加 My Yahooへ追加 Add to netvibes Powered by FeedBurner
広告掲載のお問い合わせはこちら

検索

Google

カテゴリーアーカイブ

ご質問ポスト

ご意見、ご感想などなど、管理人にお問い合わせはこちらのメール送信フォームからどうぞ~。

最近の記事

DesignWalkerのタネ

タグ・クラウド

月別アーカイブ