CSSライブラリやフレームワークが50個紹介されてます。そんなにあるの！？って思いましたが、わりと細かいネタCSSなんかもあって、ゆるーい感じで見れます。例えばStar Wars Intro.css、もうこれはアレです、スター・ウォーズのイントロを再現しただけのCSSです。他にはマイクラっぽい3Dオブジェクトを作るもの、CSSだけで作るローディングアニメーションなどもあります。Brand ColorsなんかはCSSライブラリというよりはカラーピッカーですね。結構量も多いので見応えあります。
CSSプロパティ名ごとに、分かりやすく画像で説明がされたリファレンスサイト。ページ左に並んでるプロパティ名をクリックすると、どのように使うのか、また指定するとどういう結果になるかを説明してくれます。いわゆる正引きのリファレンスサイトなんですが、アニメーション関連のものは実際にサイト内で再生できたりして、とても丁寧な印象です。あとFlexboxやAnimations、Box model、Typographyなどは固有のページにまとめられている点も分かりやすい。CSSの基礎をこれから学ぼうという人にちょうど良さそうな感じのコンテンツです。
動きに関するクールなUI作例を、アニメーションで紹介するデザインギャラリー。サイト内ではドラッグ操作、ロゴのアクション、円形エフェクトの3つのカテゴリに分けて紹介されていますが、最新のものはLatestでまとめて紹介されています。各作例はアニメーションGifを使って紹介されているので、サイト内でそのまま動きを見る事ができます。WebだけでなくMobile AppのUI作例集としてもイイ感じです。
CSSだけで描画するクールな背景グラデーションをまとめたもの。いやこれ美しいですね。どのグラデーションも落ち着いたモノトーン気味の上品な感じのアレです。個別にコピペで適用する事もできますが、こちらにあるCSSファイルを使えばまとめて導入する事もできます。導入後は作例をクリックする事でClass名をコピーできるので、適用もサクサクできます。ちなみに本来のトップはこちらなんですが、一覧ページの方が見やすいのでそちらへのリンクとしました。
画像を使わずに、CSSだけで描画できるアイコンセット。アイコンをクリックすると、HTMLとCSSコードが表示されるので、あとはそれをコピペして使うだけ。HTMLタグはdivが使われているようです。またCSSコードにマウスオーバーすると、そのコードでアイコンのどの部分が描画されているのかも分かるようになってて、なかなか興味深いです。使い勝手の良さ以外に、サイトの軽量化という目的でも使えそうです。
HTML内で使われていないCSS記述を削除して、CSSファイルのダイエットができるサイト。自分の場合、過去に作ったサイトをフレームワーク代わりにして新規にサイト作る事とかあるので、こういうとっても助かります。HTMLの削除だけ手動でやって、CSSの削除はこうしたジェネレーターに任せる事ができれば、作業時間大幅に短縮できますからね。というわけで早速コード突っ込んでみたんですが、なぜかタイムアウトしちゃいました・・・。なんか条件とかあるのかもしんないです。ぬふぅ。
汎用的に使いまわしやすいクラス指定をまとめたCSSフレームワーク。サイト内では「Low-Level CSS Toolkit」と表現されています。サイト内において使いまわしやすいという意味よりは、どちらかというとサイトをまたいで使える汎用的なクラス指定をまとめたフレームワーク、といった感じのものです。例えば「m0」とClass指定する事でmargin:0を指定、「border-bottom」と指定すれば下線を引けます。プロパティ名からClassが命名されているので、CSS書き慣れた人ならすぐに勝手がわかると思います。この記述法だとオブジェクト指向のCSS記述とも相性良さそうですね。
ただし既存のCSSフレームワークとの併用を考えている場合、すでに用意されている指定を再実装しちゃう可能性もありそうです。例えばBootstrapであればHelper Classedといった似たような仕組みが用意されているので、こういう場合は必要なもののみ抽出した上で実装した方が良いかもしれません。
Javascript使わなくてもCSSだけでできるYO！という作例集。例えばイメージスライダーやModal、ビュースイッチャー（タブ切り替え）、ファイルアップロード、フォームバリデーション、アコーディオン、Lightboxなどを、JSを使わずにCSSだけで実現する方法が紹介されています。CSSはSCSS形式で記述されているので、通常のCSSの方が使いやすいという人はSassMeisterあたりを使えばエンコードできます。JS使わなくてもわりと色々できちゃうんですよね。
