CSSコードを最適化できるオンラインツールを集めた記事。最適化と言うても実際には色々ありまして、コードフォーマットを適用するもの、余計な空白やインデント、改行などを消してコードサイズを抑えるもの、重複指定などを1つにまとめて圧縮するものなど色々揃っております。また1度圧縮されたコードを、再度読みやすいコードフォーマットが適用された形に戻すものなんかもあります。汚いCSSコードを書いてしまった時の懺悔にも使えるかもしれません。
世の中のWebサイトから、クールなナビゲーションだけを持ってきて紹介するデザインギャラリー。各記事はどれもCodePenにリンクしているので、リンク先で動きとソースコードを確認する事ができます。ナビゲーションに特化しているだけあって、様々なレイアウト、動きの作例が確認できるので、サイトナビゲーションの仕組みを考察する際に使えそうです。ちなみに右上のハンバーガーメニューからはナビゲーションの種類の絞り込みもできます。
CSS3を使ったクールなアニメーション作例を集めた記事。ナビゲーションのマウスホバーアクション、ローディングスピナー、フォームパーツ装飾、マウスを使ってグリングリン動かす系のものなどもあります。基本的にボタンのマウスホバーアクション芸が多いですね。ちょっと動かすだけなら導入も楽だし、ユーザーにも「おっ」って思ってもらえるので使い道は多そうですな。
使えるCSSスニペットが20例紹介された記事。いくつかピックアップすると、ナビゲーション生成、レスポンシブレイアウトのポートフォリオ、ドロップダウンメニュー、マウスホバーアニメーション、アニメーションするハンバーガーメニュー、JSを使わないタブメニュー、パンクズ生成など。ナビゲーション類が多いですね。全てCodepenの埋め込みを使って紹介されているので、マークアップ、CSS、結果を簡単に確認できます。
CSSやJSに関するツールやフレームワーク、ライブラリなどを50個まとめた記事。2015年の、とあるので、比較的最近のものばかりが集められているようです。記事内でカテゴリ分けされていて、上からCSSツール、レスポンシブレイアウトのためのWebフレームワーク、マテリアルデザインのフレームワーク、ちょっとしたCSSツール、JSライブラリ・フレームワーク、Webアプリとなっています。こういう記事って、ダラダラ見てるだけでも新しい発見があったりしますね。
50 CSS and JavaScript Tools, Frameworks and Libraries from 2015
クールなCSSスニペットが20例紹介されています。「CSSだけで出来るって今まで知らなかっただろー！？」的なものがテーマのようです。各作例はどれもCodepenで書かれているので、HTML, CSS, JS, そして描画される結果を効率よく見る事ができます。役に立つものというよりは、「CSSだけで描いてんの！？ スゲー！」的なものの方が多いかもしれません。Full Solar SystemとかFull Interactive NESとか。CSSファミコンすげー！ 何の役にも立たないけど。
20 Snippets for Things You Never Thought were Possible with CSS
使えるCSSトリックが紹介されてます。いわゆるTipsというか、コードスニペットみたいなもんですね。見出しの頭にナンバリングする、アンダーライン装飾、シェイプ内にテキストを配置、チェックボックス装飾、書籍風のテキスト装飾、リンク先ファイルタイプに応じたアイコン付与（これイイ！）、CSSアニメーションなど。派手な大技はないけど、地味に便利なTipsが多いです。いやこれイイですね。
ブラウザウィンドウの縦幅いっぱいに背景を表示し、アンカーリンクによって緩やかにスクロールするエフェクト。こちらからデモページを見る事ができます。最近じゃAppleとかもよく使う手法ですね。JSライブラリにはjQueryが使われているようです。ソースコード落としてみて分かったんですが、これあいぽんの部分透過PNGじゃないんですね。スクロールによってあいぽんディスプレイ内の情報も変化してますが、なるほどこういう手法でやってんのねーと感心しました。印象的なLP作る際なんかに使えそうです。
