[CSS/JS] 様々なエフェクトのスライドメニューのサンプル

SidebarTransitions

ボタンを押してサイドメニューを表示させるサンプルスクリプト。
メニューがスライドする、メイン画面がスライドする、ドアのようにスライドするなど様々なアニメーションエフェクトが用意されています。

PCからスマートフォンまで、画面サイズにより可変するレスポンシブレイアウトでは、このようなサイドメニューが有効なようで多く見られますね。(PCではメニューを表示して、スマートフォンでは隠してボタンをタップするとメニュー表示するなど) 

[ Transitions for Off-Canvas Navigations ]

CSS3のグラデーション生成ツール

css3gradientgenerator.webp

CSS3で可能になったグラデーション。
角丸やtext-shadowと組み合わせれば、画像を一切使わずに立体的なボタンを作成したりすることもできます。

グラデーションは手動でやるにはやや面倒なので、こういったジェネレーターを利用すると良いでしょう。-webkit-gradient-moz-linear-gradient のどちらにも対応しています。

適応する際は、background: -moz-linear-gradient (); background: -webkit-gradient (); とします。

[ CSS3 Gradient Generator ]