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="https://souken-blog.com/" class="hoverable" style="display:block">hoverable</a>

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

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

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

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

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

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

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

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

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

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

 

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

 

関連記事
Material Design for Bootstrap3(その8)フォームの実装
Material Design for Bootstrap3(その7)各種エフェクトの実装
Material Design for Bootstrap3(その6)スライドショーの実装
Material Design for Bootstrap3(その5)パララックスの実装
Material Design for Bootstrap3(その4)アニメーションの実装
Material Design for Bootstrap3(その3)ボタンの実装
Material Design for Bootstrap3(その1)導入とカードデザインの実装
マテリアルデザインを簡単に実装「Material Design for Bootstrap」

 

WEBサイトをWordPressにて低価格・高品質で作成します

ご希望内容をお伺いした上で、金額・納期をお見積もりいたします。

お見積もり・ご注文はクラウドソーシングの「ランサーズ」にて承っております。
*ランサーズのアカウント(無料登録)が必要となります。

  • 使用するWordPressテーマは、当方にてライセンス権を購入済の「Swell」「Lightning有料版」「Katawara」の3つの中から選択する形となります。
  • お見積もり後、金額・納期が折り合わなければ発注しなくても大丈夫です。