CSSでつくる最新のマウスオーバーエフェクト15パターン

Pocket

cssで作るマウスオーバーエフェクト
一昔前はjavascriptを使ってhover用画像を読み込ませたりしてたマウスオーバーのエフェクト。PhotoshopやFirewoksで通常用の画像とマウスオーバー用の画像を作って切り出すのがめんどくさかったのも記憶に新しいですね。

最近はCSSだけでボタンや見出しの装飾を行うようになってきたので本当に楽ちん。ChromeのDevtoolsやFireFoxのfirebugでブラウザ上でデザインができるようになったのも作業効率かの一助となっています。

最近よく使うマウスオーバーエフェクトは、記事一覧のコンテンツをマウスオーバーすると下から記事の抜粋が出てきたり、opacityで画像を透過させたり、シャドウやオブジェクトの移動で盛り上がっているようなエフェクトをかけたりしています。

ただ最近はこのようなマウスオーバーエフェクトがどこでも使われるようになると、特に珍しくなくなってきた印象を受けていました。

が、以下のサイトで今までとはちょっと違う面白いエフェクトを見つけたので紹介したいと思います。

CSS Button Hover Effects
cssで作るマウスオーバーエフェクト2
リンク先のサイトではコードのダウンロードができるようになっており、デモページでは実際の動きを見ることができます。その数なんと15パターン。ドアが開くようなものや、リールが回転するようなエフェクトまで様々です。

どんなプロジェクトでもフリーで使えるよ!ということなのでさっそくダウンロードして使いどころがあれば使ってみましょう。

ではまた次回。