クッソ使える（このへんの訳で合ってんのかなこれ）コードスニペット4つを紹介した記事。かっちょいいローディングバー、Pure CSSなパララックスピクセル、Pure CSSなカルーセル（イメージスライダー）、マウスオーバーで拡張するフォトギャラリーの4つが紹介されています。Codepenを使って紹介されているので動作確認も導入もサクっとできそうです。JSいらずのカルーセルとかイイっすね。
様々なマウスオーバーエフェクトのギャラリー。各サムネールにマウスオーバーする事でアニメーションが再生され、Show Codeをクリックする事でコードを確認できます。フレームワークとしてBootstrapが使われているようなので、Bootstrapベースのサイトでならサクっと実装できそうです。Twitter、Facebook、Instagram、Dribbbleへの投稿ボタンが用意されているものもあります。かっちょいいエフェクト多めです。
クールなCSSデザイン作例やTipsを紹介するギャラリーサイト。アニメーションする作例についてはGifを使って紹介されているので、動きも含めて閲覧できます。わりと最近始めたばかりのTumblrブログのようで掲載数こそ少ないけど、紹介のされ方がなかなかナイスなので、今後掲載作例が増えていくとイイなーと思いました。ちょっとしたCSS装飾のネタ帳としても便利そうです。パラダイスですしね。
Star Warsのあらすじ説明のイントロを再現したCSS。JSとか使わずにCSSだけで再現しているようです。あらすじについてはもちろんテキストで書かれていて、最後に出てくるダウンロードボタンはちゃんとクリックする事ができます。ネタとはいえしっかりと作られててスゲーなぁと思いました。フォースの導きがありそうな作例ですな。
Flexboxを使ったコードスニペットをまとめたサイト。ナビゲーションやタブメニューなどのよく使われるレイアウト作例が、Flexboxを使ってレイアウトされたコードと併せて紹介されています。数はそれほど多くないけど、どれもWebデザインでよく使われるレイアウトなので、コード書く時の素体として使ったりできそうです。Flexboxなら要素数の増減にも柔軟に対応できますしね。
画像を極端に拡大する事でぼかし効果のように見せ、それをCSSコードで取得できるというジェネレーター。サイトの背景などに敷くブラーバックグラウンドなんかに使う事を目的としているようです。元となる画像は用意されているものから選ぶ事ができ、また任意の画像をアップロードすることもできます。画像の位置やサンプルするエリアの大きさは右上にあるコントロールパネルから操作でき、またショートカットとして移動に十字キーが、ランダム設定にはRのキーが割り当てられています。気に入った画像ができたらサイト右下にある「Generate CSS」からCSSのグラデーション指定を取得できます。画像部分はBase64でエンコードされているので、別途ファイルが必要になる事もありません。手軽にブラー効果の画像を使いやすい形で取得できるのが便利ですね。
マウスホバーによるアクションを40種類も収録したCSSライブラリー。サイト内で各Classごとのホバーアクションを確認できます。サイズも19kbと軽く、またLESSやSCSS版も同梱されています。いやこれ便利ですね。早速何かに使おうかなと思っております。
Javascriptを使わず、CSSだけで動作するバルーンヘルプ。コードはGithubで公開されていて、CSSだけなのでサクっと導入する事ができます。なのにわりと多機能で、バルーンを出す方向や、中に入るコンテンツの量次第で自動で大きくなるなど、使い勝手も良さそうです。
