Bootstrapを使い慣れてる人ならば、マテリアルデザインを簡単に導入することが出来る「Material Design for Bootstrap」。
そのBootstrap3対応バージョン、「Material Design for Bootstrap3（以下、MDB3と表記）」のご紹介２回目です。
今回はシャドウ（影）とホバーエフェクトの実装について。
＊Material Design for Bootstrap3
シャドウの実装
まずはシャドウ（影・陰影）の実装から。
＊参照元：Shadow : Material Design for Bootstrap
HTMLのコードは以下になります。
シャドウを付けたい要素にclass「z-depth-(数字)」を追加するだけです。
<div class="z-depth-1">z-depth-1</div> <div class="z-depth-2">z-depth-2</div> <div class="z-depth-3">z-depth-3</div> <div class="z-depth-4">z-depth-4</div> <div class="z-depth-5">z-depth-5</div>
実際の表示はデモページをご覧ください。
classを指定するだけで実に簡単です。
マテリアルデザインのシャドウに関しては、Googleが細かく規定を設けていて、これに合わせるのがけっこう面倒です。
しかし、MDB3を使うとこれが簡単に実装できてしまいます。
ホバーエフェクトの実装
次に「ホバーエフェクト」。
＊参照元：Hover effect : Material Design for Bootstrap
HTMLのコードは以下になります。
ホバーエフェクトを付けたい要素にclass「hoverable」を追加します。
<a href="https://souken-blog.com/" class="hoverable" style="display:block">hoverable</a>
実際の表示はデモページをご覧ください。
マウスポインタを載せるとフワッと浮き上がります。
この挙動が実に心地よいですな～
シャドウとホバーエフェクトの実装
最後に、シャドウとホバーエフェクトの合わせ技です。
HTMLのコードは以下になります。
<a href="https://souken-blog.com/" class="hoverable z-depth-1" style="display:block">z-depth-1 + hoverable</a>
実際の表示はデモページをご覧ください。
マウスホバーの挙動は同じですが、緑色のブロックに最初からシャドウが付いて立体感があります。
シャドウとホバーエフェクトはよく使ってます。
関連記事
