コーディング

4行のCSSで!hoverするとふわっと浮き上がるようなエフェクトの実装方法

CSSだけで実装できる、マウスオーバーするとふわっと浮き上がるエフェクトの実装方法をご紹介します。
まずはデモをご覧ください。

色んなサイトで使われていてよく見かけますね。
この動きがたったの4行だけで実装できます。
ユーザーに「クリックできるぞ!」と思わせやすくなるので、こういったエフェクトはユーザビリティ的にも良いとされています。

それでは実装方法をご紹介します。

スポンサーリンク

HTML

<a href="#">リンク</a>

<a>タグ内はサイトに合わせて変更してください。

スポンサーリンク

CSS

a {
	box-shadow: 0 0 3px 0 rgba(0,0,0,.12), 0 2px 3px 0 rgba(0,0,0,.22);
	transition: .3s;
}
a:hover {
	box-shadow: 0 15px 30px -5px rgba(0,0,0,.15), 0 0 5px rgba(0,0,0,.1);
	transform: translateY(-4px);
}

影の広がりや色などは「box-shadow:」の後ろの値を変えることで変更できます。
浮き上がる高さの変更は、「transform: translateY(-4px);」の値を編集します。

「box-shadow」は、ジェネレーターを使うと自分好みのカスタマイズがしやすいです。

box-shadowのジェネレーターとプロパティについて | bad-company
要素に影を落とすためのCSSプロパティであるbox-shadowを確認するためのジェネレーターページです。またプロパティの設定方法についても解説をしています。
スポンサーリンク

デモ

スポンサーリンク

まとめ

とても簡単に実装できますね。
CSS3を使えば色んなおしゃれな動きが実装できます。
他にも色々あるので、また別の記事でご紹介します。