
block要素に影をつけよう
問題
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¥
box-shadowと似たプロパティに、text-shadowというプロパティもあります。
text-shadowは、テキストに対して影を付ける役割を持ち見出しなどによく使用されています。
指定する際の構文は、box-shadowと似ていて
text-shadow: 左右の向きpx 上下の向きpx ぼかしpx 色;のように指定できます。
text-shadowは、テキストに対して影を付ける役割を持ち見出しなどによく使用されています。
指定する際の構文は、box-shadowと似ていて
text-shadow: 左右の向きpx 上下の向きpx ぼかしpx 色;のように指定できます。
活動記録をTweetする
完了にする!
1.HTMLの宣言をしてみよう
解説
box-shadow: 左右の向きpx 上下の向きpx ぼかしpx 広がりpx 色 内側指定;のように指定できます。
またpxの指定では、-(マイナス)を使用する事もできるので覚えておきましょう。