たまにオーダーのあるスクロールバーのカスタマイズ、アレってわりとWebkit環境ではやりづらかったりするんですよね。というかそんな印象。ここではWebkit環境向けのスクロールバーカスタマイズ方が紹介されてます。WebkitなのでSafariとChrome向けで、iOSで確認したところちゃんと反映されてました。顧客からこういうオーダーが来た時のための備忘録っすかね。最近iPhone対応とか多いですしおすし。
CSS3を使った様々なアニメーションのフレームワーク。ページ内のボタンを押すと「Stay hungry. Stay foolish.」のボックスがそれぞれのボタンに応じたアニメーションをします。ダウンロードはGithubから。JSを使わずにCSS3でアニメーションさせる理由として、ハードウェアアクセラレーションが効く点が挙げられてますが、実際どのアニメーションもスムーズに動作します。ところで動かすボックス内に「Stay hungry. Stay foolish.」を記述するあたりシビれますな。
色指定をHEX（#812dd3とか）からRGBAに変換してくれるサイト。CSS3ではアルファの指定もできるようになったので、このRGBA指定を使う機会が多くなりそう。今までのHEX指定から変換したい時にナイスなサービス。ちなみにアルファ値の指定はHEX指定下にある「Opacity」のスライダーで任意に追加できます。
CSS3で描画するドロップシャドウの作例が100例まとめられた記事。なかなかのボリュームです。box-shadowとtext-shadow両方の作例がまとめられていて、チュートリアル、ジェネレーター、その他の3つのカテゴリに分けて紹介されてます。ちょっと凝ったbox-shadowの作例ないかなー、と思って探してたら見つけた記事なんだけど、これだけの数まとめられているとだいたいの作例は見つかりますね。テキストエフェクトのまとめ記事としても秀逸。
CSS3では従来の#始まりの16進法による色指定の他に、RGBAやHSLによる指定も行えます。これらの使い分けって用途や慣れた手法次第だとは思うんだけど、このサイトではそれらを相互に変換できます。入力欄に色指定を突っ込めば、他の指定方法でどう記述すれば良いかが分かります。ついでにサイトの背景色も変わります。サムネールは#665566と入れた状態。サクっと色指定法を変換したい場合に便利です。
CSSでフォント指定する時に使うfont-familyプロパティの記述を簡単に生成してくれるオンラインツール。「Copy to Clipboard」ボタンをクリックするだけで、指定内容の記述がクリップボードに入ります。後はCSSファイルにペーストするだけ。多数の欧文フォント指定があらかじめ用意されていて、Sans Serif, Serif, Slab Serif, Monospacedとそれぞれカテゴリーに分けられて整理されてます。欧文フォントに限定はされますが、なかなか便利かつシンプルなツール。
CSS3を使って描画するリボン型のナビゲーション。興味深いのは画像ファイルを使わずに描画しているという点。デモページはこちら。ページ下部では、各種ブラウザでどのようにレンダーされるかのスクリーンショットもあります。IE8でもそれなりに表示されるようです。あとW3C ValidationもオッケーだYO！という事です。ソース一式もダウンロードできます。コーディングだけで作れちゃうのが利点ですね。
サイト上のテキストの文字詰めを細かく指定できるJS。Webにおけるテキストを使ったタイポグラフィーって最近盛んですよね。特にWeb Fontガラみは、その特性上英語圏において様々な作例や実験的な試みが見られます。このKerning.jsは文字詰めと文字単位での装飾に特化したJSで、導入後は簡素な指定で文字詰めの指定を行う事ができます。このサイトそのものにKerning.jsが適用されていて、Kerning.jsのロゴ上にマウスオーバーすると、どこがどう文字詰め指定されているのか分かります。またサイト右上にある「Turn Demo off」のリンククリックで、一時的に同JSの指定を切る事もできます。CSSのletter-spacingだけでは満足に文字詰めできない場合に使えそうなナイスなJS。
