Twitter Bootstrapで使えるコードスニペットをまとめた記事。パララックス・スクロールのナビゲーション、ボックスカルーセル、フォーム装飾、フォトギャラリー、Facebook風のタイムライン、レスポンシブなイメージスライダー、UIキット、Modalウィンドウ、メガナビゲーション、プライシングテーブル、ウィザード式のフォーム、ログインフォーム、ユーザープロフィール画面、カレンダー、テーブルソート、ローディングイメージなどが紹介されてます。Bootstrapでサイト立てる時に役立ちそうです。
クールなボタン作例をたくさん紹介した記事。デモページはこちら。a:hover時やa:active時に、凝った動きをするボタン作例が多いです。またどれもフラットな作りをしているので、フラットデザインなサイトに合いそうです。ボタンってサイトUIの中でも結構大事な要素ですからね。ボタン作る時のネタ帳としてイイ感じです。
Web制作で使えるコードスニペットの配布サイト。一部有料のものもありますが、多くのコードは無料で配布されてます。まだ作ってそれほど時間が経ってないようで、配布されてる数は少ないけど、わりと使えそうなコードが多い印象。サイト制作のネタ帳としても良さそうです。
コピペで使えるイメージホバーエフェクトのコードスニペット集。リンク上にマウスカーソルを持ってきたタイミングで、CSS3を使った拡大や移動、ボカシ、円形ボーダー、フォトエフェクトなどにアニメーションします。サイト内のサムネール画像やボタンのマウスホバーエフェクトに使えそうです。コピペでサクっと使いやすいように簡潔にスニペットをまとめている点がとってもナイスです。
CSSトランジションのデモページ。各アクションが書かれたボタンを押すと、「INSPIRE」と書かれた部分がボタンに応じた動きをします。トランジション指定をするとどう動くかを一括で見る事ができるので便利です。興味深いのはこれをAdobeが作っているという点。Edgeシリーズなどのオーサリングツール販促の一環なんでしょうかね。
各種CSSトランジションやアニメーションをひとつのページにまとめたサイト。情報源はCodropsやCSS-Tricks、Tabulousなどから集めているようで、1ページの中で全て稼働させています。あちこちから集めているだけあって作例はかなりの数があり、CSSを使ったアニメーションのネタならここでだいたい揃うんじゃないかという感じ。作例はそれぞれカテゴリワケされており、Modalの出し方、ボタンアクション、リストへのアイテム追加、Position Fixedのスクロールアニメーション、マウスオーバーアクション、Tooltips、タブ表現などが紹介されています。コードスニペットのダウンロードはそれぞれの配布元からどうぞ。
各解像度やデバイスごとのメディアクエリが一覧になったもの。左側はPCでのブラウザウィンドウの横幅、真ん中はメジャーなスマートフォン、右側はタブレットがズラっと並んでいます。タブレット端末の数が圧倒的に多いという事は、それだけこの分野はディスプレイサイズのバラつきが多いんでしょう。各項目をクリックすると、その解像度、もしくは端末向けのメディアクエリ記述を見る事ができます。対応したいサイズごとにコピペすればいいので、なかなか便利です。レスポンシブレイアウトのサイト制作時に役立ってくれそう。
