フラットデザインが盛り上がり始めてた頃にあちこちで見かけた「フラットデザインではロングシャドウが流行る！」的なの、今思うと「あーーあったね」的なアレではありますが、実際どうなんでしょうね。あんまし見る機会ないんですが。このLong Shadows GeneratorはロングシャドウエフェクトをCSSで描画するためのジェネレーターです。影の長さや濃さをスライダーで調節して、「Show Code」ボタンを押すとCSSソースが出力されます。テキストを内包するボックス要素のClass名に「.shape」を入れると動作するようです。ソース見ると分かるんですが、text-shadowを何重にもかける事でシャドウ部分を描画しています。自分で書こうとするとメンドくさそうですねこれ。（そういう機会があるかどうかの話は別として）CSSでロングシャドウを描画したい時に使えそうです。
SVGを使ったボーダーアニメーションエフェクト。各項目にマウスホバーすると、ボーダー部分がアニメーションします。これかっけーすね。ボーダーのアニメーションについては4種類用意されています。サムネールのマウスホバーなんかに指定すると良さそうです。
サイト名そのまんまの、様々な種類のCSSジェネレーターが揃ったサイト。イメージギャラリー、レイアウト関連、吹き出し、ボタン、イメージスライダー、CSSフィルターを使った画像エフェクト、テキストエフェクト、テーブル、ボックスシャドウ、Font Face、カラム生成、ボーダー、トランジション、トランスフォーム、グラデーション、角丸などなど、よく使われるCSSによる装飾に関するジェネレーターが一通り揃ってます。品揃えが素晴らしいですね。これだけあればCSSを深く知らなくてもたいていの装飾はできるんじゃないかとさえ錯覚します。
レスポンシブレイアウトに対応し、かつタッチデバイスでも操作のしやすいLightbox。ってかLightboxってすでに一般名詞になってるんスね。もうちょい広い意味での言葉を使えばModal表示と言えばいいんでしょうか。タッチデバイスでも使いやすいという事でiPhoneでも見てみましたが、これイイですね。スワイプ操作で次の写真を見る事ができ、キャプション表示などのオプションも充実してます。デモページはこちら。JSライブラリとしてjQueryが使われているようです。
HTMLから、そのページ内で指定すべきIDやclass名の一式を抜き出してくれるオンラインツール。使い方はページ内左の入力欄にHTMLをペーストするだけ。もちろん直書きしても大丈夫です。すると右側のエリアに、そのHTML内で指定されているID名やclass名の一式を、プロパティ類が空の状態で抽出してくれます。抽出ルールもIDやclass、インラインCSSを含めるかどうか、インデントはスペースなのかタブなのか、細かい調整が可能です。サイト制作する際まずはHTMLだけ素組みして、さぁこれからCSS書くゾというタイミングで使いやすい気がします。
CSSに関するツールやリソース類をまとめた記事。LESS & SASS、CSSを使ったModal表示、アニメーションのフレームワーク、エフェクトまとめ、CSSフレームワーク、UIキット、チートシートなどが紹介されてます。2013年にアツかったものをまとめているようで（12月の記事です）、そういやこれ見たなーとか思いながら去年を振り返ってみました。
CSS3で使える様々なアニメーション効果をまとめたCSSフレームワーク。サイト内のプルダウンから効果を選び、「Animate it」ボタンを押すと、ロゴに反映されます。バウンス、フリック、フェード、ロテイト、スライドなど、多くのアニメーションが含まれてます。GitHubには詳しい導入法について記述もあります。動きを付けたい時に重宝しそうです。
多くのマウスオーバーアクションをまとめたCSSフレームワーク。CSS3のアニメーションを使ったホバーアクションが簡単に導入できます。2Dトランスフォーム、ボーダーの変化、シャドウやグローエフェクト、吹き出しの出るエフェクト、四隅が紙のようにカールするエフェクトなどがあります。シャドウとかカールするのとか、これ系のアニメーションであまり見かけない表現だなーと思いました。SCSSファイルも同梱されています。
