CSS3を使って表現するアニメーションデモをまとめた記事。JSではなくCSS3のみで動きを表現している作例ばかり（だと思う）のようです。CSS3ではTransitionとTransformという新しいプロパティを使う事で動きを表現できますが、それらを使った動きがメインとなるデモ（時計とか）や、装飾的に動きを使ったもの（マウスオーバーでニュっと動くとか）の作例を見る事ができます。マウスの動きに合わせたSpotlight Cast Shadowとかなかなかホットです。
ピュアCSS3なアニメーション作例。Flashではなく、JSさえ使っていない、CSSだけで動かしている作品。こんな事できるんですね。iPadでFlashが動かない事が分かり、今後iPhoneにも搭載される見通しは低いという現状、そしてWebkitエンジンのブラウザが着実にシェアを伸ばしているという点などを見ると、今後HTML5 + CSS3のスキルは確実に求めらるようになるでしょう。いやーしかしアニメーションの題材にSTAR WARSのAT-ATをチョイスするあたりがシビれます。
欧米が今最もアツいと感じているのがCSS3とJavascriptなんだけど、いやぁこれらの作例にはホントまいったよ。エクセレーント！ という感じのまとめ記事。ぼちぼちCSS3ガラみのこうした作例紹介も本格的になってきましたね。AppleのiPad & iPhone向けコンテンツを視野に入れた場合必須となるスキルだけに、そろそろこれ系もちゃんと勉強しなきゃな、という感じであります。しかしウェブでできる表現の幅が広がる事は素直に歓迎したいですね。
CSS3を使った新しいビジュアル表現に関する考察とチュートリアル。ポラロイド風の表現ではボックス要素のドロップシャドウやイメージのロテーションを、CDジャケットの作例ではグラデーション描画とオンマウスでのアニメーションを、3つめの作例ではボーダー部分にイメージを使った新しいオーバーレイ表現を試しています。CSS3は対応ブラウザは多いものの、肝心の（同時にいつも足枷となる）IEがまだ非対応。堂々と使える日はまだ先かもしれませんが、こうした新しい表現を見るとなんだかワクワクしますね。
今年はCSS3関係で結構な盛り上がりが期待されるところではありますが、制作者にとったら「まーた新しい事覚えなきゃなんないのか・・・」みたいな部分もあるにはあります。まぁウェブで食ってく事をチョイスした時点で、こればっかりは逃れられませんが、そこが楽しいところでもあります。というわけでCSS3を学ぶ際に有効な、ベストチュートリアルがまとめられた記事がこちら。CSS3を使った新しい表現の紹介から、過去の記述を簡略化する方法、チートシートなど色々あります。HTML5と併せて、今年からまた過渡期に入っていくような感じなので、ウェブに携わる人間として気にしていきたいところです。
テキストに影を付けるtext-shadowプロパティですが、少し前まではSafariのみが対応していて、マックオタのサイトオーナー以外にはあまり使われる事はありませんでした。けどFirefox 3.5とOpera 9.5がCSS3での表現に一部対応したことで最近じゃチラホラ見るようになり、テキストで表現するタイポグラフィーのツールとしても使われる機会が多くなったような機がします。というわけでText-Shadowプロパティを使った、CSS3による指定方法を個人的にまとめてみました。
CSS3を使った新しい表現手法が紹介された記事。フォーム、モダル表示（Lightboxとか画面外からのスライド）、レイアウトとイメージによるマスク表現の３つについて書かれています。中でも特に興味深いのがModal表現についての記述。動き自体はJavascriptを使ってるんだけど、CSS3のtext-shadowを使った文字表現がかっこイイです。CSS3についての勉強も、ぼちぼちちゃんとやんなきゃなー、といったところです。
「きれいだろ。これでテキストなんだぜ」というわけで、CSSを使ったクールなテキストエフェクトが22例紹介された記事。この中のいくつかはCSS3のテキストシャドウプロパティを使ってます。あとスクリーンショットでは文字にアンチエイリアスが効いているので、Safariなどのアンチ対応ブラウザで見るとより美しく見えるかと思います。空Spanを使った画像を重ねるTipsなども紹介されてます。システムが深く入り込んだサイトなど、テキストのまま装飾面にこだわりたい場合にイイですね。
