知ってると何かと便利だったり、どうにもウマくいかない時の解決策となるようなCSSスニペット。box-shadowやborder-radiusなどのCSS3の話題も多く含まれてます。印刷用CSSのページブレイク、縦方向のセンタリング、ページ下部固定のフッター、ローディングイメージの追加、透明度の指定、CSS Sprite、Google Fontの使い方、イメージやテキストの回転、CSS初期化など、細かいテクニックが色々と紹介されてます。
25 CSS Snippets for Some of the Most Common and Frustrating Tasks
CSSやCSS3で記述されたボタンパーツが110セットも集められた記事。いやこのまとめ記事スゴいっす。この手のボタンパーツをまとめた記事ってたまに見かけるけど、これほど多くの作例が集められてるのは見たことないっす。各作例はコーディング済みのものなので、DLしてからの設置も簡単そう。単純にボタンデザインのネタ帳としても使えそうです。いやーしかしよくこれだけ集めましたね。スゴい。
CSS3のtext-shadowプロパティを使った文字装飾。実際の見た目のサムネールと併せてCSS記述も紹介されているので、気に入った文字装飾をコピペするだけで使えます。生産性高いっス。スマートフォンではCSS3は当たり前なので、ソレ系のサイト制作時に役に立ちそうです。複数のシャドウを使う事で立体的に見せるなど、なかなか凝った装飾も用意されてます。
Javascriptを使わずに、CSS3だけで描画するアコーディオン。ひとつのタブをクリックすると開いて、別のタブクリックで前のが閉じるのと同時に新しいのが開くっていうアレです。動作デモはこちらから。jQueryとか使って作るのが一般的ですが、CSS3を使えばCSSだけで作れちゃうYO、という作例。これなら導入も簡単そうです。
Javascriptの代替となる、CSSだけで行うエフェクト表現がまとめられた記事。通常JSを使って行うような表現を、CSSだけで何とかしましょう的なアレです。内容としてはグラフ描画、プログレスバー、ボタンオンマウスでのフェード、ドロップダウン、拡大縮小、イメージギャラリー、テキスト装飾などがあります。作例によってはCSS3が使われています。CSSだけで凝った動きや効果を表現できるとなると、実装も楽だしコーダー的には色々ハッピーですね。
これはスゴい。フォトショップのレイヤースタイルパネル風にCSS指定ができるウェブアプリケーション。フォトショ野郎には馴染みの深いパネルレイアウトで、説明などなくてもサクっと使えそうです。指定できるのはドロップシャドウ、インナーシャドウ、背景、ボーダー、角丸の5項目。背景の項目ではボックス要素内のグラデーションの指定もできます。指定した内容はリアルタイムに反映され、完成後はページ下部の「CSS Code」からCSSのコードをコピーできます。その際色指定に関して、HEX or RGBAの指定もできます。多機能かつ使いやすい内容なので、ソッコーでブックマークしました。ナイスです。
コピペで使える、CSS3を使ったマウスオーバーエフェクト。マウスオーバーで動いたり拡大したりロテイトしたり、動きを使った見せ方が紹介されてます。コードをコピペするだけで簡単に導入できるので、ちょっと凝った見せ方のボタンを作りたい時に便利。スマートフォンがらみのウェブ制作にイイっすね。うんとてもイイ。
画像を使わずにCSS3を使ったコーディングだけで描画されたパターンギャラリー。各サムネールをクリックすると、ページ全体の背景に適用されます。画像を使っていないのでサイズが軽く、コードのコピペのみで実装できるのがナイス。ただし現状Firefox 3.6+、Chromeなどに対応しているものの、肝心のSafariに対応していません。Safariで見ると背景色のみしか適用されず、実用的かどうかという意味ではちょっとアレだしナニな感じではあります。
