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

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

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

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

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

Material Design for Bootstrap

~ 目次 ~

  • シャドウの実装
  • 画像にシャドウを実装
  • ホバーエフェクトの実装

シャドウの実装

まずはシャドウ(影・陰影)の実装から。

*参照元:Shadow : Material Design for Bootstrap

HTMLのコードは以下になります。
シャドウを付けたい要素にclass「z-depth-(数字)」を追加するだけです。

<p class="z-depth-1">z-depth-1</p>

<p class="z-depth-1-half">z-depth-1-half</p>

<p class="z-depth-2">z-depth-2</p>

<p class="z-depth-3">z-depth-3</p>

<p class="z-depth-4">z-depth-4</p>

<p class="z-depth-5">z-depth-5</p>

シャドウの濃さの順は
z-depth-1
z-depth-1-half
z-depth-2
z-depth-3
z-depth-4
z-depth-5
この6段階になります。

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

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

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

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

画像にシャドウを実装

画像にシャドウを実装することも可能です。

<img src="XXX.jpg" alt="" class="z-depth-1">

<img src="XXX.jpg" alt="" class="z-depth-3">

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

ホバーエフェクトの実装

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

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

<a href="https://XXX" class="hoverable">hoverable</a>

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

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

ちなみに、MDB3では可能だったシャドウとホバーエフェクトの合わせ技は、MDB4では廃止となりました。

 

ken
シャドウとホバーエフェクトは使用頻度が高いです。

 

関連記事

Material Design for Bootstrap4(その2)ボタンの実装

2018.10.18

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

2018.09.12