最近ではIE9のリリースの話もちらほら出てきていたり、
HTML5やCSS3をがっつり使える日が近づいているようにも思えますが、
そんなHTML5 & CSS3を使ってのエフェクト効果について、
簡単な5ステップのチュートリアル的な流れで紹介しているエントリー
「Create a Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5 」が参考になりそうだったのでご紹介。
≫Create a Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5 | Nettuts+
HTMLソースとCSSの記述をステップごとに紹介してあり
————————————————————————-
Step 1: The HTML and Basic Squares
Step 2: Drop Shadows and Scribbly Font
Step 3: Tilting the Notes
Step 4: Zooming the Sticky Notes on Hover and Focus
Step 5: Adding Smooth Transitions and Colors
————————————————————————-
の各ステップタイトルでエフェクト効果を追加していきます。
各タイトルをGoogle翻訳するとこんな感じに。
————————————————————————-
ステップ1：HTMLと基本的な広場
ステップ2：ドロップシャドウとスクリブリーフォント
ステップ3：メモを傾斜
ステップ4：ホバーとフォーカスに付箋をズーム
ステップ5：スムーズなトランジションおよび色を追加する
————————————————————————-
基本的なブロック要素を作った後、
そいつにCSS3を使って、ドロップシャドウを追加したり、フォントを変えたり、
斜めに傾けたり、マウスオーバーで拡大したり、奇数／偶数や指定倍数のリスト番号の背景色を変えたり、
しています。
ステップ5の今まではjQueryなどで指定してきた奇数／偶数や指定倍数の値などが
CSSで指定可能になると、かなりコーディングが楽になりそうですね。
一度この流れを見ておくだけでHTML5 & CSS3の基礎的部分が補える気がしています。
ご参考までに。。。