前の記事 ≪:アニメーションするスピードメーターを実装できるjQueryプラグイン「Sp...
次の記事 ≫:2011年4月21日 管理人のブックマーク

ピュアCSSでスライドアウトインタフェースの実現

2011年04月21日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法
Pure CSS Slide-out Interface

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





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

関連エントリ
関連の記事検索:CSS, スライド, プログラミング
スポンサード リンク

By.KJ : 2011年04月21日 18:25 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)