[CSS]ユーザーを楽しませる気持ちいいエフェクトがたくさんあるCSS3のデモサイト -CSS3 Playground

Post on:2012年9月26日

sponsors

ホバーやクリック、タップ操作などで、ユーザーが楽しめる気持ちいいインタラクションを与えるエフェクトをCSS3で実装したデモサイト「CSS3 Playground」を紹介します。

各デモは、Firefox, Chrome, Safari, Operaでご覧ください。

内側にシャドウをつけたパネルをホバーすると、奥行きを伴って立体的にパネルが拡大します。

一枚の画像をモザイク状に表示し、ホバーでそのエリアを拡大します。

カーソルの動きに合わせて、文字のシャドウが変化します。

クリックやタップ操作で、パネルがめくれたり回転したり開いたりします。

Blur Filter
※Chrome, Safariのみ

カーソルを重ねたパネルをフォーカスします。

Tile
※Firefoxのみ

写真画像の上に3Dのエレメントを合成し、クリックでパネルがパカパカします。