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(その5)色・文字色の指定

Material Design for Bootstrap4(その5)色・文字色の指定

2019.01.15
Material Design for Bootstrap4(その4)マスクの実装

Material Design for Bootstrap4(その4)マスクの実装

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

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

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

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

2018.09.12