Bootstrap」。Bootstrap3(以下、MDB3と表記)」のご紹介2回目です。今回はシャドウ(影)とホバーエフェクトの実装について。Bootstrap3シャドウの実装まずはシャドウ(影・陰影)の実装から。BootstrapHTMLのコードは以下になります。シャドウを付けたい要素にclass「z-depth-(数字)」を追加するだけです。class="z-depth-5">z-depth-5</div>実際の表示はデモページをご覧ください。*デモページ:MDB3シャドウclassを指定するだけで実に簡単です。マテリアルデザインのシャドウに関しては、Googleが細かく規定を設けていて、これに合わせるのがけっこう面倒です。MDB3を使うとこれが簡単に実装できてしまいます。次に「ホバーエフェクト」。BootstrapHTMLのコードは以下になります。ホバーエフェクトを付けたい要素にclass「hoverable」を追加します。style="display:block">hoverable</a>実際の表示はデモページをご覧ください。*デモページ:MDB3ホバーエフェクトマウスポインタを載せるとフワッと浮き上がります。最後に、シャドウとホバーエフェクトの合わせ技です。HTMLのコードは以下になります。hoverable</a>実際の表示はデモページをご覧ください。*デモページ:MDB3シャドウ+ホバーエフェクトマウスホバーの挙動は同じですが、緑色のブロックに最初からシャドウが付いて立体感があります。kenシャドウとホバーエフェクトはよく使ってます。古いスマホの再利用方法6選・・中古機の有意義な余生の過ごし方は?RECOMMENDこちらの記事も人気です。Unlimited」で良書を探してみた:まとめページランサーズ定点観測:まとめページランサーズでWEBデザイナーが仕事を受注するには?:まとめページカラーミーショップにてサイト制作中:まとめページschoo授業感想:まとめページブログ主プロフケンです。