[html/css] ボタンやメニューなどのサンプル「Get Shit Done Kit」

ナビバー、ボタン、チェックボックス、ラジオボタン、ドロップダウンメニュー、入力フォームなどのサンプル「Get Shit Done Kit」。

Googleアカウントでログインすれば、無料ダウンロードすることができます。

[CSS] フラットデザインのCSS Framework「Bootflat」

「Bootflat」は、フラットデザインのUI KitをベースとしたCSS Framework。
オープンソースで無償配布されており、IE 8/9/10, Firefox, Chrome, Opera, Safariなどの各ブラウザに対応しているフラットデザインのUIを実装することができます。

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

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

h2, h3, h4 で見出しを付けて、pで本分を書くという良くやるレイアウトのサンプルCSSです。ただ単に見出しを太字で大きくして、少しマージンをとってその下に本分を書くというものから、サイドにレイアウトするものまで様々あります。

参考にしてみるのもよいかもしれません。

ポップアップダイアログ、ボタン、リスト、キャプションなどのアニメーションエフェクトCSSのデモが一覧できるページ。CSSコードなどはSource元で確認できます。