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
この６段階になります。

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

＊デモページ：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では廃止となりました。

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

関連記事Material Design for Bootstrap4（その5）色・文字色の指定

2024.03.08

関連記事Material Design for Bootstrap4（その4）マスクの実装

2019.01.15

関連記事Material Design for Bootstrap4（その2）ボタンの実装

2019.01.15

関連記事Material Design for Bootstrap4（その1）導入とカードデザインの実装

2019.01.15