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

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

サイトのキャプチャ

CSS3 Playground

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

デモのキャプチャ

Hover Panels

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

デモのキャプチャ

Mosaic

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

デモのキャプチャ

Flashlight Shadow
with JavaScript

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

デモのキャプチャ

Flip Cards

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

デモのキャプチャ

Blur Filter
※Chrome, Safariのみ

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

デモのキャプチャ

Tile
※Firefoxのみ

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

top of page

©2017 coliss