朝顔日記

エイプリルフールスタイル

2009-04-01

4月1日ということで、それようにこのサイトのスタイルを微修正しましたが、変更されるブラウザはあまり多くありません。Firefox 3.1Beta3 とか、Google Chrome とか、Safari とかだと大丈夫ぽいです。では、お楽しみください。

なお、読みづらい場合は、スタイルシートをオフにすると読めるようになります。

終了しました。

記念に Firefox 3.6a1pre でのスクリーンショットをおいておきます。

なお、はてなブックマークでネタの解説を希望しておられる方がおられるので簡単解説してみます。

現在策定中の CSS3 に transform というプロパティがありまして、これを使って指定したセレクタのコンテンツに変形を加えています。具体的には、以下のような感じです。


h1 {
  -webkit-transform: scale(-1, -1);
  -moz-transform: scale(-1, -1);
  transform: scale(-1, -1);
}

これで、対応した UA では上下反転して表示されるようです。 -webkit- や -moz- などのプレフィックスがついているのは、仕様自体がまだ策定中のため、webkit や Gecko などのレンダリングエンジンも独自拡張という形で実装しているためです。CSS3 の transform についての詳しいことは CSS 2D Transforms Module Level 3 をご覧ください。

以上簡単な解説でした。終わり。

「エイプリルフールスタイル」へコメントをつける

書き込み時の挙動について
URI らしき文字列には自動的にリンクが張られます。また "<" や、">" は実体参照化されます。
スパム対策のため、リファラを切っていると投稿できません。

この記事へのツッコミ

1: GOT4416 (2009-04-07T01:13:42+09:00)
scale(1,-1)で鏡文字みたいにもできるんですね。
解説ありがとうございました。
この記事の永続的 URI ならびに トラックバック ping URI
http://diary.noasobi.net/2009/04/diary_090401a.html