ページ内のブレイクポイントを一覧にしてくれるブックマークレット。ページ内の「Breaq」って書いてある青いブックマーク部分をお気に入りなどにドラッグして使います。ブレイクポイントを調べたいページを表示した状態で、事前にブックマークに登録しておいたBreaqをクリックすると、ページ内のブレイクポイント一覧がブラウザウィンドウ右下に出力されます。境目や各BPの位置付けなどが分かりやすく、シンプルに知りたい情報だけに機能が絞られてる点がとってもナイス。常用ブックマークレットフォルダに突っ込んでおきました。
機能をほぼグリッドレイアウトに絞ったミニマルなCSSフレームワーク。ダウンロードや詳細なドキュメントはGithubから確認ができます。特徴としてはまずファイルサイズが軽量な事。Row（行）内のカラム幅をパーセントで指定できる事。Bootstrapの12分割システムよりも細かい指定ができます。あとFruidカラムを設置できる事。これはカラム幅を指定せず配置する事で、数値指定したカラム以外の残りの幅いっぱいに使えるという指定。Fruidカラムは1つのRow内に複数配置できるようです。Bootstrapのような多機能なフレームワークは必要なくて、ただグリッドレイアウトができればそれでいい、というシンプルな機能を求める人向けのフレームワークという印象でした。
Instagramのフィルターを模したCSS。ファイルはGithubからダウンロードできます。導入後はfigureタグにclassを付けるだけでフィルターが適用されるようです。素材そのものを加工しなくても良くなる点がナイス。Webでインスタ映えさせたい時なんかに使えそうです。まぁこの言葉も数年で廃れるんだろうけど・・・。
CSSで行うチェックボックス装飾の作例をまとめた記事。どの作例もCodepenで作られたものを持ってきてるので、ソースコードの閲覧とかしやすいです。チェックが入る瞬間や、トグルが移動する際のアニメーションに凝った作例が多い印象。フォーム装飾って面倒なのがちょっとアレだしナニではあるんですが。
CSSのtext-shadowのクールな作例。それぞれ使われているフォントや色指定についても紹介されており、「View CSS」をクリックするとCSSの確認もできます。フラットデザインが流行った後によく使われた、斜め方向にブラーなしの作例が多いです。Webでテキスト使ったちょっと印象的なタイポ組みたい時なんかの参考になりそうです。
CodePenにあるCSS & JSスライダーを紹介したまとめ記事。稼働するものをEmbedしてるのでちょっと重いですが、各作例右上にある「CodePen」ロゴをクリックすると単独で表示する事ができます。様々な手法のスライダーが多数紹介されているので、スライダー選びの時に役立ちそう。
アニメーションで使われるイージング指定の早見表。オブジェクトの移動量と時間軸とをグラフで表した一覧は、マウスオーバーする事でアニメーションを確認できます。また各詳細ページからはCSSやSCSSでのtransition指定、JSでの指定方法のコードも掲載されています。アニメーション指定する時のイージング選びの際に役立ちそうです。
揺らす事だけにフォーカスしたとってもニッチなCSSライブラリ。CSSファイルだけで構成されているので、導入も簡単です。サンプルアニメーションもサイト内に多く紹介されています。マウスオーバー時なんかに使えそうですが、常に動いてると押してアピール強すぎて少々ウザくなるかもしれません。
