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が多いです。いやこれイイですね。
Webページにおいて何かをセンタリングさせたい時に役立つCSSジェネレーター。コード生成はウィザード形式で進めます。まずはセンタリングさせたい対象がテキストなのかDivなのか。ようするにインラインかブロックかって話ですね。次に親要素となるコンテナーの大きさについて。幅と高さが決まってるかどうかを聞かれます。決まってないようだったらUnknownで。最後に水平方向と垂直方向それぞれどこに位置させたいかを決めます。例えば水平方向にはセンターだけど垂直方向では上寄りなど。諸々決まったら「Generate Code」ボタンでコードが生成されます。特に垂直方向のセンタリングってWebだとめんどいっていうか、ちょっとコツがいるので、こういうジェネレーターは便利ですね。
Web制作に役立つ様々なリソースを、ジャンルごとに分けて紹介するサイト。Webフォント、アイコンフォント、イメージ加工や圧縮ツール、ワイヤーフレームツール、写真素材、エディタ、フレームワーク、JSライブラリ、CMS、ホスティングサービスやドメイン取得、アナリティクス、Chromeエクステンションなど。またそれ以外にもマネージメントやマーケティング、eラーニングサイト、制作系のニュースサイトなども紹介されています。いやナイスですねこういうまとめ。「どうすりゃいいかを人に聞く前にまずはこれを見ろ」とか言うて人に教えたいです。
ブラウザウィンドウの縦幅いっぱいに背景を表示し、アンカーリンクによって緩やかにスクロールするエフェクト。こちらからデモページを見る事ができます。最近じゃAppleとかもよく使う手法ですね。JSライブラリにはjQueryが使われているようです。ソースコード落としてみて分かったんですが、これあいぽんの部分透過PNGじゃないんですね。スクロールによってあいぽんディスプレイ内の情報も変化してますが、なるほどこういう手法でやってんのねーと感心しました。印象的なLP作る際なんかに使えそうです。
