CSSだけで描画するクールな背景グラデーションをまとめたもの。いやこれ美しいですね。どのグラデーションも落ち着いたモノトーン気味の上品な感じのアレです。個別にコピペで適用する事もできますが、こちらにあるCSSファイルを使えばまとめて導入する事もできます。導入後は作例をクリックする事でClass名をコピーできるので、適用もサクサクできます。ちなみに本来のトップはこちらなんですが、一覧ページの方が見やすいのでそちらへのリンクとしました。
iPhoneのディスプレイ部分に、任意の画像をハメ込み合成できるサイト。iPhone以外にもiPad、Mac、AppleWatchなどもあります。あとなぜかゲームボーイもあります。各端末の解像度はサイト内に書いてありますが、サイズが違っていた場合にどうするかなどの細かいオプションなども指定できます。Photoshopが手元にない時や、ノンデザイナー系の人にオススメ。
FacebookがiOS 10のGUI素材を配布しています。フォーマットはPSDとSketch、あとオンラインのプロトタイピングツールのFigmaで使える形で用意されています。まずスゴいのがファイルサイズ。PSDでダウンロードしたら268MBもありました。ダミーで入っている写真類が多いためだと思うんですが、GUIパーツや場面数もかなり多く、はんぱなく気合の入ったGUI素材でした。UIデザインする際の心強い味方となりそうです。
画像を使わずに、CSSだけで描画できるアイコンセット。アイコンをクリックすると、HTMLとCSSコードが表示されるので、あとはそれをコピペして使うだけ。HTMLタグはdivが使われているようです。またCSSコードにマウスオーバーすると、そのコードでアイコンのどの部分が描画されているのかも分かるようになってて、なかなか興味深いです。使い勝手の良さ以外に、サイトの軽量化という目的でも使えそうです。
HTML内で使われていないCSS記述を削除して、CSSファイルのダイエットができるサイト。自分の場合、過去に作ったサイトをフレームワーク代わりにして新規にサイト作る事とかあるので、こういうとっても助かります。HTMLの削除だけ手動でやって、CSSの削除はこうしたジェネレーターに任せる事ができれば、作業時間大幅に短縮できますからね。というわけで早速コード突っ込んでみたんですが、なぜかタイムアウトしちゃいました・・・。なんか条件とかあるのかもしんないです。ぬふぅ。
汎用的に使いまわしやすいクラス指定をまとめたCSSフレームワーク。サイト内では「Low-Level CSS Toolkit」と表現されています。サイト内において使いまわしやすいという意味よりは、どちらかというとサイトをまたいで使える汎用的なクラス指定をまとめたフレームワーク、といった感じのものです。例えば「m0」とClass指定する事でmargin:0を指定、「border-bottom」と指定すれば下線を引けます。プロパティ名からClassが命名されているので、CSS書き慣れた人ならすぐに勝手がわかると思います。この記述法だとオブジェクト指向のCSS記述とも相性良さそうですね。
ただし既存のCSSフレームワークとの併用を考えている場合、すでに用意されている指定を再実装しちゃう可能性もありそうです。例えばBootstrapであればHelper Classedといった似たような仕組みが用意されているので、こういう場合は必要なもののみ抽出した上で実装した方が良いかもしれません。
Javascript使わなくてもCSSだけでできるYO！という作例集。例えばイメージスライダーやModal、ビュースイッチャー（タブ切り替え）、ファイルアップロード、フォームバリデーション、アコーディオン、Lightboxなどを、JSを使わずにCSSだけで実現する方法が紹介されています。CSSはSCSS形式で記述されているので、通常のCSSの方が使いやすいという人はSassMeisterあたりを使えばエンコードできます。JS使わなくてもわりと色々できちゃうんですよね。
シンプルな動画で紹介するレシピサイト。早送り動画の編集がかっこいいです。ページ左側にあるハッシュ一覧からは作る料理を、画面上部にある食べ物絵文字からは材料を軸にレシピを検索する事ができます。料理好きの方ぜひどうぞ。ちなみに俺は最近チャーハンをパラパラに作る事に執念を燃やしております。
