CSSとJavaScriptで画像を鏡に反射したようにさせてみる
web2.0的なデザインの代表のひとつとして、鏡に反射したような写真をよく見つけます。
代表的なサンプルは↓こんなん
appleのiPodの画像
こんな感じのデザインをよく見かけますよねぇ。
っちゅうことで、わたくしのブログのロゴも反射しております。。。
これって、PhotoShopなどで画像を加工すれば簡単にできるのでございますが。。。
毎回、毎回、画像を加工するのも面倒なので。。。CSSとJavaScriptで画像を加工することなく鏡に反射したようにさせることができますねん。しかも、結構簡単に。
っちゅうわけで、本日はCSSとJavaScriptで画像を加工することなく鏡に反射したようにさせる方法をご紹介じゃ。
Reflection.js
ここのスクリプトを使わせていただきました～。
↑ここのサイトでもサンプルいっぱいあって、見てるだけでも楽しめますよん。
まぁ、せっかくなので、わたくしもこのスクリプト使ってテストしてみました～。
とりあえず、サンプルはこちらからじゃ↓
ではでは、肝心のやり方。。(英語分かる人はReflection.jsのサイトから直接どうぞ。。。）
1. Reflection.jsのサイトの下のほうにDownload reflection.jsっちゅうのがあるので、そこからファイルをダウンロードしてファイルを解凍。
2. 解凍したファイルの中から、「reflection.js」をサーバにアップロードしてくださいな。
3. 画像を表示したいhtmlの<head>から</head>の間に
を書いて、reflection.jsを読み込みます。
4. 反射させたい画像(jpg,gif,png)に”reflect”ってクラスを追加する。
こうすると、わざわざPhotoShopなど使わずに簡単に画像を鏡に反射したようにさせることができますねぇ～。結構便利っすね。
関連ブログ
|
|
|
1月 30th, 2007 at 9:45 PM
Web 2.0 風ロゴ ～Reflection.js～
前回「Web 2.0 風ロゴ ～グラデーション～」のつづき。
http://ameblo.jp/morointernet/entry-100162222...