テキストを使ったローディングアニメーション。導入はリンク行を1行追記するだけ。配置はClass付けたspanタグを置けばイイみたいです。アニメーションさせるのに使っているのがテキストデータなので、ロードにはほとんど時間がかからないものと思われます。興味深いのが絵文字を使ったアニメーション。月の満ち欠けや地球の自転、走る人など、絵ヅラ的に連続している絵文字をアニメーションのコマに使っている点です。また「How it works」の項を見ると、どういう仕組みで動作しているのか分かります（これがまた超シンプル）。特にJSを使う事もなく、CSSだけで簡単に導入できる点も使い勝手が良さそうです。
FlexboxでレイアウトされたCSSグリッドシステム。もちろんレスポンシブレイアウトにも対応してます。グリッド指定の仕組みは一般的な手法と同じなので、Bootstrapとか使った事ある人ならすぐに馴染めそうです。機能としてはオフセット指定、オートレイアウト、グリッドのネスト、横や縦方向のアライメント指定、ボックスの順番の入れ替えなどがあります。最後の機能を使うと、記述順とは逆方向にボックスを並べる事もできます。このへんFlexboxっぽい機能だなーと思いました。
CSSフィルターの効果を、リアルタイム確認しつつ調整できるサイト。まずは画面上部にあるフィルター一覧から求める効果に近いものを選び、次に右側にあるスライダーを使って微調整します。納得のいくフィルターができたら「CSS CODE」タブ内にCSSコードが生成されているので、あとはそれをコピペして使うだけです。もちろんプリセット画像だけでなく、任意の画像をアップロードして使う事もできます。CSS直書きするよりもPhotoshopのように直感的に操作できるのが利点です。
デバイスごとにメディアクエリーを生成してくれる便利なサイト。例えばiPhone 6 Plusを選ぶと、max-width : 720px and max-height : 1280pxという形でCSSを出力してくれます。デバイスキメ打ちでメディアクエリー書きたい時に便利ですね。またサイト上部には一般的なスマホやタブレット向けのメディアクエリー生成ボタンも用意されており、またOSごとに抽出する事もできます。レスポンシブレイアウトでコーディングする時に役立ちそうです。
罫線のデザイン作例。hrタグに対してCSS適用するだけなので簡単に導入できます。自分の場合Webで罫線デザインするのって結構やりかた忘れるので（borderだっけheightだっけみたいな）、これ系のコードスニペット用意しておくとサクっと使えるのでわりと重宝してます。地味ですけどね。けど大事ですよねこういうネタ帳。
グラデーションのアニメーションってなんか変な日本語っぽいですね。イケませんね。けどまぁアレです、動くグラデーションを描画できるJSです。ただのグラデーションだけでなく、イメージと組み合わせたもの、マスクを使ったもの、クリックでグラデーションを変更できるものなど色々あります。けどグラデをアニメーションさせるだけ、というならPure CSSでもできるんですよね。なのでちょっと手の込んだ事をしたい場合とかにイイかもしれません。
CSSで背景を固定した演出方法が色々と紹介されています。背景固定って早い話が「background-attachment: fixed;」なんですが、例えばvh単位を使った縦幅いっぱいにスライド形式で見せる方法や、ヘッダの大きめビジュアルだけ固定した印象的な見せ方、フィルタやマスクを使った変則的な背景演出など、Webでよく使われる手法がCodepenを使って紹介されています。スクロール芸のネタ帳としてなかなかナイスなまとめ記事。
ボタン装飾だけに限定したCSSモジュール。Webでよくあるボタン状の装飾を簡単に行えます。ダウンロードはこちらから。sassのコードも同梱されているようです。色やボーダーの有無、サイズなどを簡単に指定できます。グリッドレイアウトなどのCSSフレームワークみたいなものはいらないけど、ボタンの装飾だけは手間を省きたい、って時なんかに使えそうです。
