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

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

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

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

2018.10.24
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