FlexboxでレイアウトされたCSSグリッドシステム。もちろんレスポンシブレイアウトにも対応してます。グリッド指定の仕組みは一般的な手法と同じなので、Bootstrapとか使った事ある人ならすぐに馴染めそうです。機能としてはオフセット指定、オートレイアウト、グリッドのネスト、横や縦方向のアライメント指定、ボックスの順番の入れ替えなどがあります。最後の機能を使うと、記述順とは逆方向にボックスを並べる事もできます。このへんFlexboxっぽい機能だなーと思いました。
CSSフィルターの効果を、リアルタイム確認しつつ調整できるサイト。まずは画面上部にあるフィルター一覧から求める効果に近いものを選び、次に右側にあるスライダーを使って微調整します。納得のいくフィルターができたら「CSS CODE」タブ内にCSSコードが生成されているので、あとはそれをコピペして使うだけです。もちろんプリセット画像だけでなく、任意の画像をアップロードして使う事もできます。CSS直書きするよりもPhotoshopのように直感的に操作できるのが利点です。
デバイスごとにメディアクエリーを生成してくれる便利なサイト。例えばiPhone 6 Plusを選ぶと、max-width : 720px and max-height : 1280pxという形でCSSを出力してくれます。デバイスキメ打ちでメディアクエリー書きたい時に便利ですね。またサイト上部には一般的なスマホやタブレット向けのメディアクエリー生成ボタンも用意されており、またOSごとに抽出する事もできます。レスポンシブレイアウトでコーディングする時に役立ちそうです。
CSSで背景を固定した演出方法が色々と紹介されています。背景固定って早い話が「background-attachment: fixed;」なんですが、例えばvh単位を使った縦幅いっぱいにスライド形式で見せる方法や、ヘッダの大きめビジュアルだけ固定した印象的な見せ方、フィルタやマスクを使った変則的な背景演出など、Webでよく使われる手法がCodepenを使って紹介されています。スクロール芸のネタ帳としてなかなかナイスなまとめ記事。
スクロールイベントをきっかけに、何かしらの動きとともにコンテンツが出現する、いわゆるスクロール芸を行うJSライブラリ。配布ページ自体がデモページになっていて、スクロールすると色々動きます。ライブラリはCSS3とJSからできているようで、サイズが9kbと軽いのが特徴。導入も適用したい要素に属性を追加するだけのようなので、簡単に使えそうです。詳細とソースコードはGithubで公開されています。
プログレスバーを兼ねたSubmitボタンの作例まとめ。クリックするとボタンの中、もしくは周辺でプログレスバーが展開されます。ファイルのアップロードとか、進捗の確認ができた方がいいボタン作る時なんかに良さそうです。
CSSを使った写真へのフィルター機能をBefore After形式でまとめた記事。作例はそれぞれCodepenを使って紹介されています。ブラーとかグレースケールあたりは、マウスオーバー芸と組み合わせるのも良さそうです。またアニメーションを併せて使った手法や、ボックス要素全体にフィルターをかける作例なんかも紹介されてます。CSSフィルターって結構いろんな事できるんですね。
CSS Filter Effects: Blur, Grayscale, Brightness and More in CSS!
Javascriptなしでも、HTMLとCSSだけで結構いろんな事ができるYO！という作例がGithubでまとめられてます。アコーディオンやカルーセル、マウスオーバーアクション、メニュー、タブなどにカテゴリ分けされて紹介されていて、各項目からはデモページへのリンクが用意されています。リンク先の多くはCodepenで、JSの項目が空なのが確認できます。JS書かずにサクっと導入できるのがイイですねこれ。特にDivのShow / Hideを切り替えるタブとか使いやすそう。
