テキストに影を付けるtext-shadowプロパティですが、少し前まではSafariのみが対応していて、マックオタのサイトオーナー以外にはあまり使われる事はありませんでした。けどFirefox 3.5とOpera 9.5がCSS3での表現に一部対応したことで最近じゃチラホラ見るようになり、テキストで表現するタイポグラフィーのツールとしても使われる機会が多くなったような機がします。というわけでText-Shadowプロパティを使った、CSS3による指定方法を個人的にまとめてみました。
CSSだけで描くアニメーション。デモページにはJSへのリンクがありますが、ここでアニメーションさせているのはCSSだけ。こんな事できるんですね。原理は簡単で、黒い四角を描画した上で、その上を透過PNGを使ってマスクをかけてます。んでマスクの方を回転させてるという仕組み。ただしこの記述でアニメーションできるのはWebkit環境のみ。GeckoとかIE環境で再現できないという点では、アニメーションの手段として現実的でないのは確か。けどCSS記述の内容とかを見ると、なんだかオラわくわくすっぞ、的なものを感じません？ ちなみにこの記事の導入部分、なかなかオモろいです。作者の8年前の「CSS？ なにそれおいしいの？」という時代の話について語られてます。テーブルレイアウトからこの時期にCSSレイアウトへと切り替えた世代にとっては懐かしい話です。
ロゴや広告、写真やウェブなど、あらゆるデザイン物のギャラリーサイトであるCreatticaのCSSタブ内より、クールにデザインされたサイトだけを集めた記事。言ってみればただのギャラリーサイト抽出モノなんですが、ここで紹介されているサイトはどれもクオリティが高いです。よく練られたレイアウト、細部まで気配りの行き届いたデザイン。見ているだけで「それ今度やってみよう！」って思える内容がいくつか。最近のサイトらしく、JSがの出現度も高い印象です。
CSSデザインという観点から見て、今年ベストだったウェブサイトを集めた記事。今年はCSS3が表舞台に出てきたせいでしょうか、見た目の華やかさよりは活きたテキストによるタイポグラフィーを前面に出したサイトが多いという印象。見出しを画像で作って貼り付けるという手法は、少なくとも欧米圏ではとっくの昔に終わっているんですね。クールなデザインのサイトばかりで、見ていて飽きません。
「きれいだろ。これでテキストなんだぜ」というわけで、CSSを使ったクールなテキストエフェクトが22例紹介された記事。この中のいくつかはCSS3のテキストシャドウプロパティを使ってます。あとスクリーンショットでは文字にアンチエイリアスが効いているので、Safariなどのアンチ対応ブラウザで見るとより美しく見えるかと思います。空Spanを使った画像を重ねるTipsなども紹介されてます。システムが深く入り込んだサイトなど、テキストのまま装飾面にこだわりたい場合にイイですね。
CSSによるレイアウトやテキスト指定、CSSファイルの圧縮、W3Cによるバリデーションなどの、CSS関連の便利ツールがまとめられた記事。特にレイアウト関連のツールが多く紹介されてて、YUIやBluePrintなどの、グリッドレイアウトのためのCSSフレームワークベースのジェネレーターなども入ってます。CSS関連のジェネレーターとはいえ、初級者向きというよりは中級者以上推薦といった感じです。フォント指定の便利サイト、Typetesterは自分も好んでよく使っております。
CSSを最適化してくれるオンラインツールがまとめられた記事。結構この手のサイトって数あるんスね。「CSSの最適化？ なにそれおいしいの？」という方のために簡単に説明すると、重複するプロパティや必要でない指定を排除したり、改行コードを削除する事でCSSのサイズを小さくするためのものです。改行コードの削除は、CSSを他人にあまり見られたくない場合に、見づらくするための処置としても使われるような気がします。言うてもDreamweaverのコードフォーマットで1発で見やすくなっちゃうんだけど。CSSファイルをよりスマートにしたい場合に是非。
この記事素晴らしい。ボタンデザインに関する様々な考察と、それに関わる多くのリソースが紹介されてます。CSSでのボタンのベーシックなスタイリングに始まり、イメージとの併用、a:hoverやa:activeなどについて、テキスト量に応じて横幅が可変するSliding Doorsの紹介、CSSスプライトのチュートリアル、CSS3を使ったボタンデザインの新しい方法などについて書かれており、各項目や技術に関してはそれぞれリソースが紹介されています。後半ではPSDやCSS配布サイトの紹介などもされており、ボタンデザインに関する情報のまとめとしてよくできてます。特にSliding DoorsやCSS Spriteなど、ちょっとツッコんだCSSテクニックについてのリソースは参考になります。
