CSSやJSを使った新しい表現手法、という内容の記事。SmashingMagazineは去年も同じ内容の記事を書いてますが、これはその今年バージョン。CSS3を使ったトランジションやアニメーション、使えるCSSテクニック、タイポグラフィーやテキストエフェクト、ホバーエフェクトやナビゲーションメニュー装飾、CSSを使ったビジュアル装飾（サムネール装飾とか）といった感じで、カテゴリごとに分けて紹介されてます。Click to Animationの装飾って最近グっと増えたよなー、とか思いながら読みました。
サムネールが紙状に折れ曲がるマウスホバーエフェクト。デモページはこちら。デモは全部で4パターンあり、それぞれ異なる折れ曲がり方をします。ひとまず何も考えずにサムネールにマウスホバーしてみましょう。折れ曲がってできたスペースにView数やFavの情報、さらに詳しく見るためのボタンなどが付いてます。この見せ方スゴくイイなー。サマリー情報からディテールページへの遷移に使えそうです。いやーかっこいい。
CSSコードのコピペだけで背景画像の適用ができるコードスニペット。ページ内の「Code」ボタンクリックでコードが表示されます。background-imageが指定されているので、後はコピペするだけで使えます。コードの背景指定の部分をよく見ると、「data:image/png;base64…」と始まっているので、ようするにこれPNG画像をbase64でエンコードしただけのものです。なのでファイルサイズの節約とかにはあんましならいません。まぁリクエストは減りますが。こんな風にCSS内に記述できると汎用的に使えていいですね。透過指定もされているので、背景色に溶け込む点もナイスですねー。
Web制作で使えるコードスニペットを紹介するサイトをまとめた記事。CSSやHTML、Javascript、PHPなどの各種コードスニペットが紹介されてます。コーダーやプログラマーの人にオススメ。CSSDeckあたりは自分もよく見ます。
CSSだけで吹き出しを描画するコードのジェネレーター。吹き出しの位置、大きさ、色、ボーダーの色や太さなどを細かく指定できます。機能を限定してるだけに操作もシンプルです。スマホサイトとかにイイですねこれ。
Web制作の現場で使える各種ツールをまとめたサイト。JSやCSS、オンラインジェネレーター、アイコン素材、テクスチャ、コーディング向けスニペットなど色々あります。特にこれといってジャンルを限定していない分雑然とはしてるけど、なかなか役に立ちそうなものが多いので紹介。まぁウチのブログもやってる事は似たようなもんなのですが、なんつーか素材としての見せ方がウマいなーと思いました。
Px→Emの計算機。x pxで指定したい時に何emにすればいいのかサクっと計算できます。このツールのナイスな点は、要素をネストした際の親要素・子要素それぞれの計算をまとめてしてくれる点。Px単位突っ込むだけで算出してくれます。ただ現状SafariとOperaではバグがあるそうで、フィックス中だそうです。最近じゃフォントサイズなんかはEm指定が一般的ですしね。ナイスなので使わせてもらいます。
Web上でデータを可視化するための各種ツールがまとめられたサイト。csvなどのデータの集合体を分かりやすい形で動的にグラフ化してくれるので、データに動きのあるサイト制作に使えます。よくある棒グラフや折れ線グラフはもちろん、分布図や地図情報と組み合わせたもの、なんだかよく分からないグラフなど色々あります。サムネールクリックでそのグラフが何の技術で描画されているのか（だいたいはJSです）が分かり、リンク先からDLする事ができます。ニッチかもしんないけどナイスなまとめ。
