各種CSSトランジションやアニメーションをひとつのページにまとめたサイト。情報源はCodropsやCSS-Tricks、Tabulousなどから集めているようで、1ページの中で全て稼働させています。あちこちから集めているだけあって作例はかなりの数があり、CSSを使ったアニメーションのネタならここでだいたい揃うんじゃないかという感じ。作例はそれぞれカテゴリワケされており、Modalの出し方、ボタンアクション、リストへのアイテム追加、Position Fixedのスクロールアニメーション、マウスオーバーアクション、Tooltips、タブ表現などが紹介されています。コードスニペットのダウンロードはそれぞれの配布元からどうぞ。
各解像度やデバイスごとのメディアクエリが一覧になったもの。左側はPCでのブラウザウィンドウの横幅、真ん中はメジャーなスマートフォン、右側はタブレットがズラっと並んでいます。タブレット端末の数が圧倒的に多いという事は、それだけこの分野はディスプレイサイズのバラつきが多いんでしょう。各項目をクリックすると、その解像度、もしくは端末向けのメディアクエリ記述を見る事ができます。対応したいサイズごとにコピペすればいいので、なかなか便利です。レスポンシブレイアウトのサイト制作時に役立ってくれそう。
CSSスプライトのジェネレーター。最初は複数の画像が1枚に入ったものから、座標を指定してCSSを出力してくれんのかなと思ったんですが、その逆でした。複数の画像ファイルをサイト上のキャンバスに放り込むと、それらを1枚の画像にしてくれ、その上各画像の座標情報をCSSに書き込んで出力してくれるというもの。CSSスプライトのジェネレーターっていくつかあるけど、この手法は初めて見ました。元々複数の画像に分かれているものを1つにまとめる時などに使えそうです。まとめた画像ファイルはサイト上部の「Download」ボタンから落とす事ができ、またキャンバスのサイズは右下にあるアイコンをドラッグするとできます。
CSS3の角丸ボーダーのジェネレーター。まぁ角丸の指定なんて基本的にborder-radiusの数値入れてやるだけなので、別にジェネレーターなんてなくてもできるんですが、ここでは指定した数値がすぐにプレビュー欄に反映されるので「もうちょっとだけ丸く」みたいな微調整がやりやすいです。また角丸の種類やheight, widthも個別に指定できるので、ここでちょうどいいシェイプの角丸ボックスを作ってからCSSファイルに貼り付けるという使い方が便利そうです。あと各数値にフォーカスした状態で十字キーの上下で数値をイジくれます。Shiftを組み合わせると大きく数値を変化できるようになってます。
Star Warsで毎度おなじみの、あらすじ紹介オープニングをHTML/CSS/JSで再現したというもの。Codepenで作例が紹介されています。早速見てみましたが、いやーこれはスゴい。冒頭のStar Warsロゴはもちろん（SVGを使っているようです）、最後にフェードアウトする所まで細かく作りこんであります。さすがに宇宙に瞬く星々の明かりまでは再現されていませんが、なかなかの力作です。Codepenなので直接コードを編集する事もでき、当然日本語も通ります。いやらしい事とか書いちゃダメですよ。ダメだからネ！
CSSスプライトのコードを生成してくれるサイト。「Show Example」を押すとサンプルイメージを使ったチュートリアルが表示されます。CSSスプライトって最近じゃ一般的な手法ではあるけど、座標取得してそこから部位ごとに足し算して・・・って結構面倒っすよね。Sprite Cowを使えば取得したい座標部分を選択するだけでCSSコードを出力してくれます。便利なのが透過PNGの場合、オブジェクトが存在する位置を自動で検出してくれる点。ドラッグして選択する事で隣接するオブジェクトを選択してくれます（このへんの動きはイラレの選択ツールっぽい）。いやこれ素晴らしいですね。とってもナイスですね。仕事でガンガン使えそうです。
CSS3のジェネレーター。コレ系のものって結構ありますが、その中でも結構イイ感じです。指定できるのはGradient, Box Shadow, Perspective, Text Shadow, Transoform, Opacity, ColumnsなどのCSS3で新たに追加されたプロパティ類。CSS2以前の基礎的なものは入ってませんが、CSS3のクソ細かいプロパティ指定などを分かりやすく指定できるのはナイスですね。指定した内容は右下で常にプレビューでき、ソースコードもリアルタイムに吐き出されます。コーディングの補助ツールとしてイイ感じ。
Webで使えるUIパーツを検索できるサイト。よく使われるインターフェースにはだいたい名前が付いてて、例えばアコーディオンとかライトボックス、ドロップダウン、オートコンプリート、スライダー、ツールチップ、カラーピッカーなどのUIの通名を入力する事で、それ系のコードを教えてくれるというもの。文字タイプによるサーチもできますが、メジャーなUIについてはページ下部のタグクラウドから抽出できるようになっています。「なんかクールなLightboxないかなー」って時なんかにとっても便利。ナイスですねー。
