Googleでログイン
Twitterでログイン
問題
block要素に影をつけて見ましょう。
昨今のデザインは、マテリアルデザインなどが主流になっております。
実務でも使用する事が多発します。
見本画像を参考に作ってみましょう。
昨今のデザインは、マテリアルデザインなどが主流になっております。
実務でも使用する事が多発します。
見本画像を参考に作ってみましょう。
自分の環境に書くコード
<div class="block__cat"></div>
¥HTML¥
.block__cat {
width: 300px;
height: 300px;
border: 1px solid;
background: red;
}
¥CSS¥
期待する画面
解答ソースコード
<div class="block__cat"></div>
¥HTML¥
.block__cat {
width: 300px;
height: 300px;
border: 1px solid;
background: red;
box-shadow: 10px 10px 15px -10px;
}
¥CSS¥
1.HTMLの宣言をしてみよう
解説
box-shadow: 左右の向きpx 上下の向きpx ぼかしpx 広がりpx 色 内側指定;のように指定できます。
また、-(マイナス)であるネガティブも使用する事ができるので覚えておきましょう。