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

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

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

[CSS] Text ShadowなどのCSS3の効果を見ながらジェネレート

Text ShadowやBox Shadow、グラディエーションなど、CSS3の効果を見ながらソースを生成できるジェネレーター。デザインがシンプルなのでツールとしてかなり使いやすいのと、あまり見たことの無いレアな効果まで実装されているのが特徴。

Subheads samplecss

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

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

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

アイコンなどで最近流行のロングシャドウから普通のテキストシャドウまで、フォントを装飾するCSSコードを簡単に生成できるジェネレーターです。

TEXT ONLYのチェックを入れることで、テキストのみの装飾にすることができます。