ページ背景でスライドショーを行うためのjQueryプラグイン。Bodyとか大きめDivに背景指定する事を目的としたものです。表示エリアが大きい場合、背景に指定する画像サイズを大きくする事が多いけど、その場合サイトロードの際のファイルサイズが大きくなってしまいます。そこで使われるのがオーバーレイ用の透過PNG。背景画像の上にドットとかストライプの透過画像が乗ると、なぜか画像の粗さがごまかされるんですね。プラグイン一式をダウンロードすると、ソレ用の透過画像も数種類含まれています。また可変エリア内で動画再生を行う時にもこの手法はよく使われますが、これらの透過画像はそうした目的への応用もできそうです。トランジションの種類も多く、使い勝手良さそうです。
CSS3を使った様々なアニメーションのコードスニペットを紹介するサイト。サイト内の角丸四角にマウスオーバーするとアニメーションをプレビューでき、目玉のアイコンをクリックでコードを見る事ができます。また「＋」マークを使って複数のアニメーションを選択する事で、アニメーションのコードをまとめて生成する事もできます。アニメーション関連のCSSフレームワークとしても使えますね。
Unsplashというオシャレなストックフォトサイトの写真を利用したイメージプレースホルダー。「https://unsplash.it/200/300」といった感じでサイズ指定するだけで画像を呼び出す事ができます。ちなみにこの記事のサムネール画像も動的に呼び出してるので、リロードすると画像が変わります。イメージを呼び出す上でいくつかオプションがあり、例えば「?random」を付ける事でランダムイメージに、「g」を付ける事でグレースケールの写真限定に、「?blur」を付ける事でボカしフィルタをかける事ができます。元々のUnsplashの写真がクールなものが多いだけに、見た目にオシャレなダミー画像をサクっと置ける点が便利です。
Webデザインで使える様々なコードスニペットを集めたサイト。チェックボックス装飾やModalウィンドウ、マウスオーバーアニメーション、イメージスライダー、グリッドレイアウト、CSSボタン、イメージギャラリーなど、色々な場面で使えるコードが紹介されています。各作例はアニメーションGifを使って一覧されているので、動きの確認まで確認できる点がとってもナイスです。
ニコラス・ケイジしか出てこないイメージプレースホルダー。http://www.placecage.com/200/300といった感じでURL記述する事で、その大きさのニコラス画像を呼び出す事ができます。上記の場合横200px縦300pxの画像って意味ですね。またオプションも用意されていて、http://www.placecage.com/g/200/300というようにgを付ける事でグレースケールの画像を、http://www.placecage.com/c/200/300のようにcを付ける事でクレイジーな画像を、http://www.placecage.com/gif/200/300のようにgifを付ける事でアニメーションGifにする事ができます。無駄に多機能。制作中のサイトをどうしてもニコラス・ケイジで埋めたいという場合などに重宝しそうです。ニコラスにまみれたいというごく一部のWeb制作者の方々にオススメです。
HTMLテンプレートやテーマなどのギャラリーサイト。いわゆる自動化されたまとめサイトではなく、手動でピックアップしてるから質が高いYO！というのがウリのようです。定番のWordpressテーマや、Bootstrapのテーマ、またマテリアルデザイン準拠のものなど、色々とカテゴリ分けされて紹介されています。テンプレート探しの起点として使えそうです。
Webサイトのレイアウトをする際に使えるブックマークレット。お気に入りバーなどに登録しておけば、対象のサイトを表示中にクリックするだけでアウトラインを表示してくれます。borderではなくoutlineという点がナイスです。試しにこのブログ表示中に使ってみましたが、ブロック要素の輪郭がハッキリと表示されました。レイアウト崩れとか起こしてる時のデバッグに使えそうです。汎用性の高いのはブックマークレットだけど、Chrome Extension形式でも配布されています。
CSSスプライトのコードと画像のジェネレーター。複数の画像ファイルをサイト内に放り込むだけで、それらを1つの画像ファイルに結合して、かつCSSスプライトのいわゆる座標コードをまとめて吐き出してくれます。1つの画像ファイルをマッピングしてコード生成するジェネレーターはいくつかあるけど、複数の画像を結合するタイプのものは珍しい気がします。個別に画像が保存されたサイトにおいて、ロード時間のスピードアップなどを目的にCSSスプライト化する際などに便利そうです。
