レスポンシブグリッドのCSSジェネレーター。このサイトすごい便利です。グリッドの数、グリッド内のパディング、ガター（グリッド間のマージン）などの基本的な指定の他に、任意の位置でブレイクポイントを指定できます。数はいくつでもイイみたい。これらを一通り指定できたら、ページ左下にある「Download your Gridpak」をクリックする事で、ファイル一式をまとめてダウンロードできます。Zipファイル内にはCSSファイルの他にLESSとSCSSファイル、デザイン用のPNG、動作デモなどが同梱されており、デザイナー、コーダーの双方が幸せになれる内容となっております。サイトデザイン始める時にこれ使うのアリだなーと思いました。
CSS3を使って描画できる様々なアニメーション作例をまとめた記事。多くの作例はCodePenにリンクしており、仕組みを見る事ができます。いくつか見てみたんだけど、凝ったアニメーション作例多いっす。色々と応用できそうな感じ。
Webでよく使われるアコーディオンメニューの作例をまとめた記事。各作例をクリックすると、素材の配布先に行けます。ものによってPSDを配布してたりコードそのものを掲載してたり色々です。CodePenにリンクしているものもあるので、それ系だと導入がとっても楽ですね。開閉する仕組みも縦方向だったり横方向だったり、またサブメニューを用意しているものなど色々あるので、アコーディオン素材が欲しい時に便利そうです。
CSSで書かれたジョーク集。これ多分笑える人すごく限られると思うんだけど、CSSが読めるならニヤっとできますｗ ちなみにチャックノリスがなぜcolor:#BADA55なのか分からなかったけど、友達に聞いたら「55をSSに読み変えるんだ」と教えてくれました。こういうヒネりも含めてオモろいです。
CSSだけで描画する事のできる、トグル型のチェックボックス。CodePenで書かれているので、ここからHTMLとCSSを確認できます。フォームパーツの装飾ってJSを使って行う場合が多いけど、これはCSSだけで反映されるので使い勝手が良さそうです。
Yahooの提供するPure.cssのサイト内に、よく使われるレイアウト紹介のページがあるんだけど、これが結構よく出来ててイイ感じなんです。目的別にいくつかのレイアウトが紹介されており、例えばブログやランディングページ、フォトギャラリーなどでよくあるレイアウトが一覧で紹介されています。各レイアウトはソース一式をまるっとダウンロードする事ができ、シンプルかつ必要な要素がだいたい揃っているので、サイト制作の初動にかかる時間を節約できそうです。pure.cssはオンライン上のものを読み込む仕組みで、同梱はされていません。自分は普段Bootstrap使う事が多いけど、これだけよく出来たテンプレートが用意されてるならPureも今度使ってみようかな、とか思いました。LPのテンプレートがなかなか素晴らしいです。
レスポンシブレイアウトのパターンというか、手法をまとめたサイト。レイアウト、ナビゲーション、画像、ビデオなどのメディア類、フォーム、テキスト、モジュール類に分けて、それぞれ「PCサイトではこういう表示、スマホではこんな感じ」という感じで複数の手法を紹介しています。例えばレイアウトの項目では、スマホ表示時にどのようにカラムを落とすのか。また落としたカラムを隠すのであれば、どういう再出現手法があるのかなど細かく紹介しています。レスポンシブレイアウトでスマホ対応する際に、表現手法について顧客と相談する際にめっちゃ役に立ちそう。とってもナイスです。
HTML & CSSで作られたiPhone 6のモックアップ。画像ではないので、コードをコピペするだけでサイト内に使えます。試しにダウンロードしてみましたが、ソースコード内に「Put your screenshot here」とコメントアウトしてあるので、iPhoneのスクリーンショットのハメコミもomgタグでサクっとできそうです。カラバリは黒と白が用意されています。フラットに描画されているので、最近のデザインにも合いそうです。
