ページをスクロールしてボックス要素が見え始める頃に、フェードインしながらロードされるアニメーションを実装できるJS。ページをスクロールすると見え始めたボックス要素から順次表示されていくのが分かります。これ系のスクリプトの多くは初回ロード時にしか対応していないんだけど、このScrollRevealの場合はページを上にスクロールして戻った際にも同様のエフェクトを行ってくれます。実装も簡単そうだし、ロードアニメーションとしては使いやすそうです。
Flexboxを使った、ボックス内においてボックス要素を縦軸・横軸ともにセンタリング（中央揃え）したい時のシンプルなコードサンプルが紹介されてます。Flexboxがなかった頃のように、heightの半分の数値をアレコレして・・・という面倒な記述しなくても良くなったのは楽ですな。まぁそういう意味じゃTipsでも何でもなく、普通の記述ではあるんだけど。justify-content:centerで水平方向に、align-items:centerで垂直方向にセンタリングすればイイだけなので超ラクチンです。
The Simplest Way To Center Elements Vertically And Horizontally
レスポンシブレイアウトしたサイトの挙動を、様々な端末でまとめて確認できる便利なサイト。画面最上部にある「Enter your site」に確認したいサイトURLを入力すれば、iPhoneやAndroid、iPadなどのタブレット端末の解像度で一気にレンダーしてくれます。縦持ち時だけでなく横持ちの際にどう表示されるかも確認できるのが便利。このサイト使って一気に確認すれば、物理的に端末持ち替えて確認するよりかなり手間が省けそうです。
ゲームをしながら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にはあまり馴染みがないけど、これはなかなかナイスです。
