[CSS]ユーザーを楽しませる気持ちいいエフェクトがたくさんあるCSS3のデモサイト -CSS3 Playground
Post on:2012年9月26日
ホバーやクリック、タップ操作などで、ユーザーが楽しめる気持ちいいインタラクションを与えるエフェクトをCSS3で実装したデモサイト「CSS3 Playground」を紹介します。
![サイトのキャプチャ](/wp-content/uploads-2012/2012092601.png)
各デモは、Firefox, Chrome, Safari, Operaでご覧ください。
![デモのキャプチャ](/wp-content/uploads-2012/2012092602-01.png)
内側にシャドウをつけたパネルをホバーすると、奥行きを伴って立体的にパネルが拡大します。
![デモのキャプチャ](/wp-content/uploads-2012/2012092602-02.png)
一枚の画像をモザイク状に表示し、ホバーでそのエリアを拡大します。
![デモのキャプチャ](/wp-content/uploads-2012/2012092602-03.png)
Flashlight Shadow
with JavaScript
カーソルの動きに合わせて、文字のシャドウが変化します。
![デモのキャプチャ](/wp-content/uploads-2012/2012092602-04.png)
クリックやタップ操作で、パネルがめくれたり回転したり開いたりします。
![デモのキャプチャ](/wp-content/uploads-2012/2012092602-05.png)
Blur Filter
※Chrome, Safariのみ
カーソルを重ねたパネルをフォーカスします。
![デモのキャプチャ](/wp-content/uploads-2012/2012092602-06.png)
Tile
※Firefoxのみ
写真画像の上に3Dのエレメントを合成し、クリックでパネルがパカパカします。
sponsors