Bootstrapを使い慣れてる人ならば、マテリアルデザインを簡単に導入することが出来る「Material Design for Bootstrap」。
そのBootstrap3対応バージョン、「Material Design for Bootstrap3（以下、MDB3と表記）」のご紹介7回目です。
今回は各種エフェクトの実装について。
＊Material Design for Bootstrap3
＊Bootstrap Hover Effects – Material Design for Bootstrap
～ 目次 ～
- オーバーレイエフェクトの実装
- ズームエフェクトの実装
- シャドウエフェクトの実装
- a要素にエフェクトをかける
オーバーレイエフェクトの実装
まずはオーバーレイ。
実際の挙動はデモページをご覧ください。
画像にマウスポインタを載せてもらえば、エフェクトの挙動が分かると思います。
では、実装方法です。
以下がHTMLのコード例になります。
<div class="view overlay hm-blue-strong"> <img src="images/XXX.jpg" alt=""> <div class="mask"> <p>hm-blue-strong</p> </div> </div>
外枠のdivにclass「view」「overlay」を付与します。
さらに使用するエフェクト名をclassで付与します。
エフェクト名は
「hm-(色)-(エフェクトの強さ)」で記述します。
コード例だと「hm-red-strong」です。
「色」は17種類あります。
blue
red
pink
purple
indigo
cyan
teal
green
lime
yellow
orange
brown
grey
bluegrey
black
stylish
white
「エフェクトの強さ」は3種類です。
strong
light
slight
中枠のdivにはclass「mask」を付与し、画像をオーバーレイで覆います。
テキストの記述は任意です。
ちなみに、デモページでは画像の中央にテキストが表示されてます。
これは別途、CSSのflexboxで文字を真ん中に配置しています。
ズームエフェクトの実装
実際の挙動はデモページをご覧ください。
以下がHTMLのコード例になります。
<div class="view overlay hm-zoom"> <img src="images/XXX.jpg" alt=""> <div class="mask"> <p>Zoom effect</p> </div> </div>
外枠のdivにclass「view」「overlay」「hm-zoom」を付与します。
他はオーバレイと同じです。
シャドウエフェクトの実装
シャドウエフェクトに関しては過去記事でも載せてますが、再掲します。
実際の挙動はデモページをご覧ください。
以下がHTMLのコード例になります。
<img src="images/XXX.jpg" class="hoverable" alt="">
こちらはimgタグ自体にclass「hoverable」を付与するだけです。
a要素にエフェクトをかける
エフェクトの応用編です。
divではなく、aタグにエフェクトをかけ、リンクを貼ることも可能です。
実際の挙動はデモページをご覧ください。
以下がHTMLのコード例になります。
<a href="#" class="view overlay hm-orange-light hm-zoom a-block"> <img src="images/XXX.jpg" alt=""> <div class="mask"> <p>リンク貼ってます</p> </div> </a>
外枠をaタグにして、class「view」「overlay」と各エフェクトのclassを付与します。
外枠のaタグは「display:block」をかけてブロック要素に変えます。
また、そのままだとマウスポインタの形状がデフォルトのままなので、「cursor:pointer」でリンク時の形に変更します。
以下、CSS例です。
.a-block { display:block; cursor:pointer; }
