ゲームをしながらFlexboxの挙動を学べる教育系コンテンツ。ルールは簡単で、カエルをハスの葉の上にピッタリ乗るようにFlexboxのプロパティ記述をするというもの。画面左、#pondと指定されているものがいわゆるFlexboxコンテナーです。んでハスの葉は固定で、カエルがFlexboxアイテムという感じ。最初はjustify-content、次にalign-itemsと来て、さらにflex-directionと続きます。全部で24問あり、一通りプレイし終えた頃にはFlexboxが使えるようになってるという内容。TableレイアウトからCSSによるFloatレイアウトに移行した時もそうだったけど、Flexboxでのレイアウトって経験者ほど頭の切り替えが難しかったりするので、こういうコンテンツは楽しく学べて良いですな。
CSSを使ってデザインされた凝ったボタン作例を紹介するブログ。リンク先はだいたいCodepenなので導入も簡単にできそうです。最近のこの手のボタンはマウスオーバー時にトランジション使ったものが多いですな。多くの作例はアニメーションGifを使ったサムネールで紹介されているので、動きまで含めて閲覧できる点がナイスです。
CodePenが、Webデザインに役立つコードスニペットをまとめています。様々な表現手法ごとに分けて紹介されています。例えばAccordionでは、アコーディオンを使ったコンテンツの見せ方とそのコードが複数種紹介されています。他にもメニューアイコン、タブメニュー、グリッド、ボタン、パンクズ、カレンダー、表組みなど、Webでよく使われるパーツ類が揃っています。CodePenなのでソースコード見るのも簡単です。
Instagramのような写真加工を、CSSのフィルター機能を使って行う事のできるCSSライブラリー。CSSフィルターとCSSブレンドモードを使うようで、IE以外のブラウザーで動作します。CSSを読み込んでClass指定するだけというシンプルなものなので、導入も簡単です。コーディングレベルでの可逆性を持たせたい場合や、Webサービスなどでの写真のフィルタリングなどで使えそうです。そういやInstagram使わなくなったなぁ・・・。
BootstrapベースのMaterial Designテーマ。製作者が言うには「GoogleはMaterial DesignでWebを美しくして、TwitterはBootstarpでレスポンシブかつエフェクティブに開発できるようにした。なのでこの2つを一緒にした」的な事を謳ってます。実際テンプレートページ（いくつか有料のものもあります）をいくつか見たけどスゴくよく出来てると思います。なんかのLP作る時なんかにちょうどイイテンプレートがチラホラありました。個人的にはMaterial Designにはあまり馴染みがないけど、これはなかなかナイスです。
SassとCompassを使って作られたCSSボタンのライブラリー。様々な形のボタンが用意されていて、またそれぞれ押下時にはアニメーションもします。導入方法についてはページ最下部に記述されています。シンプルで品のいいデザインなので、Sass導入済みのサイトやチーム内において使いやすそうです。ちなみに俺Compassって使った事ないんですよね。解説とか読んでると便利そうな気はするんだけど、なんか機会があれば使ってみたいなーと。
左右にあるパレットから任意の2色を選んで、CSSのグラデーションコードを生成するツール。色を選んだ後で矢印のボタンを押すだけでオッケー。カレーパレットは一般的なFlat UIとMaterial Designの他に、青や黄色など固有のパレットもいくつか用意されています。Material Designなどの固定されたカラー規格におけるグラデーション生成などに使えそうです。パレットもうちょい増えてくれるとイイんだけどなぁ。
CSSを使って写真にビネット効果（トンネル効果、ケラレ）を追加する方法が紹介されています。トイカメラなどで起こる、写真の四隅が光量が足らず暗くなる現象を写真に追加する事ができます。画像に直接ではなくCSSで追加すれば、一斉に追加したり削除したりが効率よく行えそうです。円形グラデを使う点がポイントっすね。写真を印象的に見せたい場合に使えそうなテクニック。
