CSS Modal ? Paul Hayes

CSS3で画像もJSも使わないモーダルボックスサンプル。
ボックスが徐々に大きくなりつつフェードも組み合わせたアニメーションがCSS3で実現されているところがいいです。
ボックスも影がついてて閉じるボタンだってあります。



JavaScriptを切っても動いてます。


実際に使う場合はやっぱりJSを使ったほうが便利なものが出来るわけですが、CSS3だけでも出来るっていうところは知っておいてもよいというのと、内部で使われているテクニックもなんとなくでも覚えておくといいのかもしれませんね。

関連エントリ

• グラフィカルに加速度を作って要素をCSS3アニメーションさせられる「Ceaser」
• IE9にも対応したCSS3リファレンスサイト「css3files」
• 超シンプルなマークアップで実現できるCSS3による画像を使わない吹き出しサンプル
• CSS3で実装されたボタンのサンプルやチュートリアル総まとめ