Pure CSS Slide-out Interface

ピュアCSSでスライドアウトインタフェースの実現。
ページの再度にちょこっとタブ風の画像を置いておいて、クリックするとアニメーションしながら表示されるあのUIがJSなしで実装されています。





具体的なサンプルCSSとマークアップが提供されています。
:hover と transition を使って実装されているようですが、こんなに簡単にできるのはいいですね。
IE7,8でもアニメーションはしませんが一応動くように作られています。

関連エントリ

• ピュアCSSなドロップダウンメニュー実装例
• ピュアCSSでonclickイベントをシュミレーションするデモ
• JavaScript使ってないのに使ってる風のピュアCSSなテクニック集