ギズモードのデザイナーが語る! エイプリルフールの裏側

2010.04.08 10:00
  • このエントリーをはてなブックマークに追加


先日のエイプリルフールは楽しみましたか?

毎年ネット上でたくさんのサイトでがウソをついたり、悪ノリしたりするので、毎年楽しみにしてる方も多いのでないでしょうか。今年のギズモードはトップページが左右反転文字になって、読みにくい、やりすぎ! と大好評(?)でした。

また各記事ページには、あのアザラシ君に常駐していただき、ビックリした、かわいい、こわいwなどこちらも大盛況でした。

さて、そんなギズモードへの反応を楽しみながら見させてもらってたんですが、「左右反転の仕組みどうなってるの?」という声を多くいただいたので、今回ちょっとだけご紹介したいと思います。
 

実は、サイトのデザインを構成するCSSファイルの調整だけで左右反転が可能なんです。

内容は下記のとおり。

body{
-webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
-moz-transform: matrix(-1, 0, 0, 1, 0, 0);
transform: matrix(-1, 0, 0, 1, 0, 0);
filter:progid:DXImageTransform.Microsoft.BasicImage(mirror=1);
}

実際は、オトナの事情でサイトの全部を反転ということは出来ませんでしたので、部分部分で反転させていました。

余談ですが、反転だけでなく、任意の角度に傾けたり逆さにしたりもできちゃいます。

参考ページ:
Safari CSS Reference: Supported CSS Properties
Mozilla Developer Center / -moz-transform
MSDN Matrix Filter

ちなみに、記事ページに期間限定で出没したアザラシ君はこんな感じで、サイトの右下に常駐マウスオーバーすると吹き出しでランダムに喋ってました!


それでは、来年のエイプリルフールもお楽しみに!

(前田龍一)
 

  • このエントリーをはてなブックマークに追加
4839929734
現場のプロから学ぶXHTML+CSS (単行本(ソフトカバー))

CSSの可能性は広い!




 

・関連メディア