最近ではIE9のリリースの話もちらほら出てきていたり、
HTML5やCSS3をがっつり使える日が近づいているようにも思えますが、
そんなHTML5 & CSS3を使ってのエフェクト効果について、
簡単な5ステップのチュートリアル的な流れで紹介しているエントリー
「Create a Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5 」が参考になりそうだったのでご紹介。

Effect5EasyStepsCSS3andHTML5.jpg
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の基礎的部分が補える気がしています。

ご参考までに。。。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

HTML5 & CSS3でのエフェクト効果を簡単な5つのステップで覚えるチュートリアル「Create a Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5 」

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Book
  • jQuery Technical Note
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR