Bootstrap」。Bootstrap4(以下、MDB4と表記)」のご紹介3回目です。今回はシャドウ(影)とホバーエフェクトの実装について。画像にシャドウを実装ホバーエフェクトの実装シャドウの実装まずはシャドウ(影・陰影)の実装から。BootstrapHTMLのコードは以下になります。シャドウを付けたい要素にclass「z-depth-(数字)」を追加するだけです。class="z-depth-5">z-depth-5</p>シャドウの濃さの順はz-depth-1z-depth-1-halfz-depth-2z-depth-3z-depth-4z-depth-5この6段階になります。実際の表示はデモページをご覧ください。*デモページ:MDB3シャドウとホバーエフェクトclassを指定するだけで実に簡単です。マテリアルデザインのシャドウに関しては、Googleが細かく規定を設けていて、これに合わせるのがけっこう面倒です。MDB4を使うとこれが簡単に実装できてしまいます。画像にシャドウを実装することも可能です。class="z-depth-3">実際の表示はデモページをご覧ください。次に「ホバーエフェクト」。HTMLのコードは以下になります。ホバーエフェクトを付けたい要素にclass「hoverable」を追加します。class="hoverable">hoverable</a>実際の表示はデモページをご覧ください。マウスポインタを載せるとフワッと浮き上がります。この挙動が実に心地よいですな~ちなみに、MDB3では可能だったシャドウとホバーエフェクトの合わせ技は、MDB4では廃止となりました。新・WordPressテーマ「Lightning」でサイト制作:まとめページWordPressテーマ「BusinessPress」でWEBサイトを制作:まとめページ便利なWordPressプラグイン:まとめページ無料画像編集ソフト「PhotoScape」使用方法:まとめページランサーズ受注ノウハウ:まとめページブログ主プロフケンです。後半開始⇒帰郷して職業訓練⇒2人会社勤務⇒フリーランスとなる。◇Twitterは更新通知+小ネタ用です。