CSSプロパティ名ごとに、分かりやすく画像で説明がされたリファレンスサイト。ページ左に並んでるプロパティ名をクリックすると、どのように使うのか、また指定するとどういう結果になるかを説明してくれます。いわゆる正引きのリファレンスサイトなんですが、アニメーション関連のものは実際にサイト内で再生できたりして、とても丁寧な印象です。あとFlexboxやAnimations、Box model、Typographyなどは固有のページにまとめられている点も分かりやすい。CSSの基礎をこれから学ぼうという人にちょうど良さそうな感じのコンテンツです。
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使わなくてもわりと色々できちゃうんですよね。
テキストを使ったローディングアニメーション。導入はリンク行を1行追記するだけ。配置はClass付けたspanタグを置けばイイみたいです。アニメーションさせるのに使っているのがテキストデータなので、ロードにはほとんど時間がかからないものと思われます。興味深いのが絵文字を使ったアニメーション。月の満ち欠けや地球の自転、走る人など、絵ヅラ的に連続している絵文字をアニメーションのコマに使っている点です。また「How it works」の項を見ると、どういう仕組みで動作しているのか分かります（これがまた超シンプル）。特にJSを使う事もなく、CSSだけで簡単に導入できる点も使い勝手が良さそうです。
FlexboxでレイアウトされたCSSグリッドシステム。もちろんレスポンシブレイアウトにも対応してます。グリッド指定の仕組みは一般的な手法と同じなので、Bootstrapとか使った事ある人ならすぐに馴染めそうです。機能としてはオフセット指定、オートレイアウト、グリッドのネスト、横や縦方向のアライメント指定、ボックスの順番の入れ替えなどがあります。最後の機能を使うと、記述順とは逆方向にボックスを並べる事もできます。このへんFlexboxっぽい機能だなーと思いました。
