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

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

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

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

今回はマスクの実装について。
画像の上にマスクを掛けます。

Material Design for Bootstrap

Masks : Material Design for Bootstrap

~ 目次 ~

  • パターンの実装
  • オーバーレイの実装

パターンの実装

MBD4にて使用できるマスクは2種類。
パターンとオーバーレイです。

まずはパターンの実装から。

HTMLのコードは以下になります。
クラス名含めてワンセットになっています。

<div class="view">
    <img src="画像ファイル" class="img-fluid" alt="">
    <div class="mask pattern-X flex-center">
        <p class="white-text">画像の上の文字</p>
    </div>
</div>

クラス「pattern-X」の「X」の部分に数字を入れます。

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

MDB4:パターン

pattern-1やpattern-2などの数字は、パターンの強度ではなくて、ただの種類分けです。数字が大きくなるとパターンが強くなるわけではありません。

ちなみに、クラス「img-fluid」「flex-center」「white-text」は必要に応じて使ってください。
以下のような意味があります。

◇img-fluid:
画像を横幅100%に合わせて表示。レスポンシブ用。

◇flex-center:
画像の上の文字を中央寄せにする

◇white-text:
文字色を白に

オーバーレイの実装

続いて、オーバーレイの実装です。

HTMLのコードは以下になります。
こちらもクラス名含めてワンセットになっています。
パターンとほぼ同じです。

<div class="view">
    <img src="画像ファイル" class="img-fluid" alt="">
    <div class="mask flex-center rgba-色-強度">
        <p class="white-text">画像の上の文字</p>
    </div>
</div>

このクラス「rgba-色-強度」の箇所で、オーバレイの種類を規定しています。

実際の表示は以下をご覧ください。

MDB4:オーバーレイ

オーバーレイの種類は以下のようなものがあります。

MDB4:オーバーレイ(オーバーレイの色と強度)

「slight」が弱、「light」が中、「strong」が強ということになります。

たとえばクラス「rgba-red-strong」は、強い赤のオーバーレイが画像の上にマスクされます。

 

ken
このシリーズのまとめページを作成しました。

 

関連記事

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

2019.01.15

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

2018.10.24

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

2018.10.18

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

2018.09.12