CSSブレンドモードを使ったカラーフィルターのプリセット。CSSブレンドモードって、Photoshopとかでやる「乗算」とか「スクリーン」といった描画モードの適用をCSSで行うものなんですが、画像・背景色（ベタ or グラデ）・モードの3つを指定して初めて適用されるものなんですよね。このcolorfilter.cssを読みこめば、すでにいくつかの色指定と描画モードがプリセットされているので、適用が楽になるYO！というもの。カラーフィルター機能だけに絞ったフレームワークとも言えます。Spotifyの「DuoTone」と呼ばれるデザイン手法にインスパイアされて作ったそうです（これかな？）。用意されたプリセット描画モード、どれも趣味がイイので使い勝手が良さそうです。この手の画像加工をCSS側で行えるようになると、より非破壊加工が進んで素材の汎用性が高まりますな。
Star Warsのライトセーバー風のハンバーガーメニュー。画像はイメージです。悪ふざけで作りました。ちなみにCodepenはこちら。ハンバーガーメニューがライトセーバーになっているというものです。出てくるメニューがジェダイは緑、シスは赤、サミュエル・Ｌ・ジャクソン（メイス・ウィンドゥ）は専用の紫になっているという点が気が利いていますね。フォースに導かれ気味の素晴らしいナビゲーションだと思います。May the Force be with you。
ブロック要素を垂直方向にセンタリングするのってアレですよね、メンドくさいですよね。たまにそうレイアウトしなきゃいけない時があるんだけど、「あれどうやるんだっけ・・・？」とか思って毎回ググってます。今回もそんな感じでググってたところ、すごいシンプルな方法を見つけたので備忘録として載っけておきます。センタリングしたいブロック要素にCSS3行書くだけなのでサクっと使えます。ただし親要素にheight指定が必要という点は、他の手法と変わらないので多少の注意は必要です。
FlexboxベースのCSSフレームワークだそうです。CSSフレームワークってだいたいFloat使ったグリッドレイアウトのものが多いけど、最近じゃレイアウト組む手法も徐々にFlexboxになりつつあるので、慣れた人には便利そうです。実際Flexboxでレイアウト組むの楽ですからね。レスポンシブレイアウトや、フルスクリーン、垂直軸のセンタリング、ボタンやフォームパーツなども揃っているようです。
ボタンの上にマウスオーバーした時に、吹き出し状にヒント表示をしてくれるCSSライブラリ。独立した1つのCSSファイルとしてGithubに上がっているので、導入するにはこれをダウンロードしてCSSを読み込むだけ。あとはspanタグか何かにclass指定してヒント内容を記入するだけ。手軽に導入もできそうです。吹き出しを出す方向も上下左右色々選べるので使いやすそうです。
CSSだけでデザインされた、クールなマウスホバーアクション。複数のデザインのテキストボタンが紹介されていて、どれもマウスホバーでアニメーションします。このアニメーションがどれもかっこいい。CSSだけで導入できる点もナイスです。ちなみに元記事はこちら。こういうちょっと凝った演出があると、ページそのものが一気にモダンな印象になりますな。使い勝手良さそうです。
画像を使わずにCSSだけで描画されたローディングアニメーション。デモページはこちら。アニメーション部分の色の変更がカスタマイズできるようです。ファイルサイズが軽いので使い勝手が良さそうです。
Flexboxを使った、ボックス内においてボックス要素を縦軸・横軸ともにセンタリング（中央揃え）したい時のシンプルなコードサンプルが紹介されてます。Flexboxがなかった頃のように、heightの半分の数値をアレコレして・・・という面倒な記述しなくても良くなったのは楽ですな。まぁそういう意味じゃTipsでも何でもなく、普通の記述ではあるんだけど。justify-content:centerで水平方向に、align-items:centerで垂直方向にセンタリングすればイイだけなので超ラクチンです。
The Simplest Way To Center Elements Vertically And Horizontally
