Material Design for Bootstrap3(その2)シャドウとホバーエフェクトの実装

Material Design for Bootstrap3(その2)シャドウとホバーエフェクトの実装

Bootstrapを使い慣れてる人ならば、マテリアルデザインを簡単に導入することが出来る「Material Design for Bootstrap」。

そのBootstrap3対応バージョン、「Material Design for Bootstrap3(以下、MDB3と表記)」のご紹介2回目です。

今回はシャドウ(影)とホバーエフェクトの実装について。

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>

実際の表示はデモページをご覧ください。

デモページ:MDB3シャドウ

classを指定するだけで実に簡単です。

マテリアルデザインのシャドウに関しては、Googleが細かく規定を設けていて、これに合わせるのがけっこう面倒です。
しかし、MDB3を使うとこれが簡単に実装できてしまいます。

ホバーエフェクトの実装

次に「ホバーエフェクト」。

*参照元:Hover effect : Material Design for Bootstrap

HTMLのコードは以下になります。
ホバーエフェクトを付けたい要素にclass「hoverable」を追加します。

<a href="http://souken-blog.com/" class="hoverable" style="display:block">hoverable</a>

実際の表示はデモページをご覧ください。

デモページ:MDB3ホバーエフェクト

マウスポインタを載せるとフワッと浮き上がります。
この挙動が実に心地よいですな~

シャドウとホバーエフェクトの実装

最後に、シャドウとホバーエフェクトの合わせ技です。

HTMLのコードは以下になります。

<a href="http://souken-blog.com/" class="hoverable z-depth-1" style="display:block">z-depth-1 + hoverable</a>

実際の表示はデモページをご覧ください。

デモページ:MDB3シャドウ+ホバーエフェクト

マウスホバーの挙動は同じですが、緑色のブロックに最初からシャドウが付いて立体感があります。

 

ken
シャドウとホバーエフェクトはよく使ってます。

 

関連記事

Material Design for Bootstrap3(その8)フォームの実装

2017.05.29

Material Design for Bootstrap3(その7)各種エフェクトの実装

2017.05.23

Material Design for Bootstrap3(その6)スライドショーの実装

2017.05.15

Material Design for Bootstrap3(その5)パララックスの実装

2017.05.07

Material Design for Bootstrap3(その4)アニメーションの実装

2017.05.05

Material Design for Bootstrap3(その3)ボタンの実装

2017.04.25

Material Design for Bootstrap3(その1)導入とカードデザインの実装

2017.02.16

マテリアルデザインを簡単に実装「Material Design for Bootstrap」

2016.11.17