CodePenで2013年に最もポピュラーだった作例トップ10が紹介されてます。CodePen知らない人のために紹介しておくと、HTML、CSS、JSと、その結果描画されるものを1度に見る事ができるWebサイト。自分でコードを公開する事もできます。また他人のコードを自由に触る事ができ、それらの結果もリアルタイムに反映されます。去年最もよく見られていたコードだけあって、凝った作例ばかりで、特に動きに重きを置かれているような印象があります。コーディングの勉強だったり、アイデアのリソースに是非これひとつ。
CSS3で新たに追加されたカーソルスタイルの一覧。まずはCSS2のカーソルを紹介した後で、後半にCSS3の指定が紹介されています。便利なのがそれぞれのボックスの上にマウスオーバーする事で、マウスカーソルが指定された内容に変わるという点。「あの形のカーソル指定なんだっけなー」って時に便利ですね。こうして一覧で見ると「こんなにあったのか」とか思います。しかしカーソルの形状をスクリーンショットに撮ろうとしても、Macだとマウスカーソルって撮れないんですね。ツール使えばできるんだろうけど諦めました。
RGBAでの色指定と、従来のHEX（16進法）による色指定との相互の変換ツール。上段のフォームがRGBAで、下段がHEX指定となっており、どちらかを変更すると他方にも反映されるというもの。RGBAの方がアルファチャンネルがあるので便利ですが、古いファッキンIEとかではこの指定法が使えないので、石器時代のブラウザをサポートする際の変換に使えます。まぁ個人的にはそんなレガシーなしょうもないゴミを使うようなユーザーなんて切り捨てればいいと思うのですが、仕事でサポートブラウザに入るというパターンもありますしねおすし。大人の事情によるアレがコレで色々ではありますな。
:nth-childの後に続く（）内で、どう指定するとどう見えるのかをリアルタイムにテストできるオンラインツール。:nth-child便利なんでよく使いますが、ちょっとめんどくさいルーチンになると（）内の数値書く際に「これでエェんかな？」とかなる事ありますね。そういう時にここでテストすると、ページ右側に実際にどう描画されるかがサクっと表示できるので便利です。ナイスですねこれ。
CSSトランジションのデモページ。各アクションが書かれたボタンを押すと、「INSPIRE」と書かれた部分がボタンに応じた動きをします。トランジション指定をするとどう動くかを一括で見る事ができるので便利です。興味深いのはこれをAdobeが作っているという点。Edgeシリーズなどのオーサリングツール販促の一環なんでしょうかね。
このコンテンツは2つの意味でとってもホット。ひとつはCSSだけでいくつものマウスを美しく描画しているという点。画面下部の丸をクリックする事で他の作例を見る事ができます。モーフィングのようなトランジションもかっこいいです。そしてもうひとつはApple製マウスの変遷を見る事ができるという意味で、（∪＾ω＾）わんわんお！的にホットです。後者の方が特に重要ですかね。どの時代のマウスから知ってるかによって世代感が出ますが、自分の場合初めて買ったMacがPerforma 5210だったので、ADB2 Mouseが最初のマウスでした。その後後追いの形でADB Mouse（いわゆる角マウス）も使いました。そしてiMac Mouseはその使いづらさに「ムキー！」ってなったタイプです。いやそれはみんなそうかｗ WebデザイナーでなくともMacオタであれば、懐かしさと想い出補正で楽しめるかと。ちなみに今使っているのはLogicoolのM705tです。Magic Mouse？ あぁ、あれはちょっと・・・ｗ
CSSコードのコピペで使えるアイコンセット。全てCSS3で描画されていて画像は使われてないので、コードをコピペするだけでアイコンとして使う事ができます。使いたいアイコンをクリックするとコードが表示されます。この際どのブラウザでならちゃんと描画されるのかも表示される点が便利です。現在200個のアイコンがあり、随時増えてるようです。ナイスですねこれ。
CSSのプロパティを入力すると、その効果や使い方を簡単に教えてくれるサイト。リアルタイムに候補を出してくれるので、「あのプロパティなんだったっけな」くらいのうろ覚えでも、頭さえ合ってれば見つける事ができます。表示内容が英語なのでアレルギーのある人にはおすすめできませんが、知ってると何かと便利な気がします。コーディングのお供に。
