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を確認するためのジェネレーターページです。またプロパティの設定方法についても解説をしています。
www.bad-company.jp
デモ
まとめ
とても簡単に実装できますね。
CSS3を使えば色んなおしゃれな動きが実装できます。
他にも色々あるので、また別の記事でご紹介します。