ボタンを押してサイドメニューを表示させるサンプルスクリプト。
メニューがスライドする、メイン画面がスライドする、ドアのようにスライドするなど様々なアニメーションエフェクトが用意されています。
PCからスマートフォンまで、画面サイズにより可変するレスポンシブレイアウトでは、このようなサイドメニューが有効なようで多く見られますね。（PCではメニューを表示して、スマートフォンでは隠してボタンをタップするとメニュー表示するなど）
タグ: CSS3
[CSS] Text ShadowなどのCSS3の効果を見ながらジェネレート
Text ShadowやBox Shadow、グラディエーションなど、CSS3の効果を見ながらソースを生成できるジェネレーター。デザインがシンプルなのでツールとしてかなり使いやすいのと、あまり見たことの無いレアな効果まで実装されているのが特徴。
[ Create CSS3 ]
[CSS] リストやキャプションなど、アニメーションエフェクトCSSのサンプル
[CSS] CSSのみで作られた各種ロゴマーク
CSS3のグラデーション生成ツール
CSS3で可能になったグラデーション。
角丸やtext-shadowと組み合わせれば、画像を一切使わずに立体的なボタンを作成したりすることもできます。
グラデーションは手動でやるにはやや面倒なので、こういったジェネレーターを利用すると良いでしょう。-webkit-gradient と -moz-linear-gradient のどちらにも対応しています。
適応する際は、background: -moz-linear-gradient (); background: -webkit-gradient (); とします。