SassとCompassを使って作られたCSSボタンのライブラリー。様々な形のボタンが用意されていて、またそれぞれ押下時にはアニメーションもします。導入方法についてはページ最下部に記述されています。シンプルで品のいいデザインなので、Sass導入済みのサイトやチーム内において使いやすそうです。ちなみに俺Compassって使った事ないんですよね。解説とか読んでると便利そうな気はするんだけど、なんか機会があれば使ってみたいなーと。
左右にあるパレットから任意の2色を選んで、CSSのグラデーションコードを生成するツール。色を選んだ後で矢印のボタンを押すだけでオッケー。カレーパレットは一般的なFlat UIとMaterial Designの他に、青や黄色など固有のパレットもいくつか用意されています。Material Designなどの固定されたカラー規格におけるグラデーション生成などに使えそうです。パレットもうちょい増えてくれるとイイんだけどなぁ。
CSSを使って写真にビネット効果（トンネル効果、ケラレ）を追加する方法が紹介されています。トイカメラなどで起こる、写真の四隅が光量が足らず暗くなる現象を写真に追加する事ができます。画像に直接ではなくCSSで追加すれば、一斉に追加したり削除したりが効率よく行えそうです。円形グラデを使う点がポイントっすね。写真を印象的に見せたい場合に使えそうなテクニック。
クールなHTMLメールの作例を紹介したデザインギャラリー。各作例は細かくカテゴリー分けされており、目的やジャンルに応じて作例を探す事ができます。海外のWebサービスから届くHTMLメールってかっこいいの多いので、デザインだけでなくコーディング手法なんかの参考にもなりそうです。
スタイルシートに関するリソースを紹介するサイト。Tipsやスニペット、CSSフレームワークなどが紹介されています。サイト内検索やソートを使ってリソースを探す事もできます。紹介されてるサイトそのものが趣味の良いものが多いので、ネタ帳としても使えそうです。リソース集めや、日々の情報収集に役立ちそうなサイト。
Flexbox使ってますか？ 俺はほとんど使った事がありません！ けどこのジェネレーター触ってみて使ってみようって気になりました。Flexbox便利なんですが、今までのfloat使ったレイアウトと全然違うのでとっかかりが難しい部分があると思うのです。あと対応ブラウザも選びますし。このジェネレーター使うと対応ブラウザはどうしようもないにしても、コード記述の敷居はグっと下がる気がします。ボックスの数、順番、並べ方等を数値入力したりプルダウンから選ぶだけで、リアルタイムにCSSコードを生成してくれます。いやこれ便利ですね。レスポンシブレイアウトのサイトコーディングする時なんかに使えそうです。
ソースコードを貼り付けるだけで使えるソーシャルボタン。CSSとSVGで作られているそうなので、画像ファイルを別に用意したりアップする必要がない点がナイス。対応するソーシャルサービスも、Facebook、Twitter、Tumblr、Instagram、Pinterest、Dribbble、Flickr、Github、LastFm、Reddit、Soundcloud、Vimeoなど、わりと盛りだくさんです。ボタンの大きさや角丸の有無、フラットデザインなどのオプションもいくつか用意されているので使いやすそうな感じ。デザインのベース素材としてもナイスです。アイコン揃ってるし。
ブラウザウィンドウ全体を1ページ単位にして、画面単位でスクロールできるJS。スクロールホイール回すと全画面単位で切り替わる、最近よく見る形のスクロール方式です。Appleなんかも商品によっては使ってますね。このJavascriptは、縦方向だけでなく横方向にもスクロールできる点が特徴。2ページ目だけ横方向にカルーセルっぽく見せたいという場合に使えます。また各ページはアンカーリンクにも対応しているので、ナビゲーションを使ったスクロールにも使えます。個人的にはPage up / downのキーでもちゃんと操作できる点がナイスでした。
