DesignWalker » reflection http://www.designwalker.com ロサンゼルスで働くウェブデザイナーの日記。 Wed, 29 Jun 2011 06:24:51 +0000 ja hourly 1 http://wordpress.org/?v=3.0 CSSとJavaScriptで画像を鏡に反射したようにさせてみる http://www.designwalker.com/2006/12/reflection.html http://www.designwalker.com/2006/12/reflection.html#comments Fri, 22 Dec 2006 18:40:50 +0000 admin http://new.designwalker.com/2006/12/css%e3%81%a8javascript%e3%81%a7%e7%94%bb%e5%83%8f%e3%82%92%e9%8f%a1%e3%81%ab%e5%8f%8d%e5%b0%84%e3%81%97%e3%81%9f%e3%82%88%e3%81%86%e3%81%ab%e3%81%95%e3%81%9b%e3%81%a6%e3%81%bf%e3%82%8b.html

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など使わずに簡単に画像を鏡に反射したようにさせることができますねぇ～。結構便利っすね。

関連ブログ


]]> http://www.designwalker.com/2006/12/reflection.html/feed 0