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プロパティを使用します。

box-shadow: 左右の向きpx 上下の向きpx ぼかしpx 広がりpx 色内側指定;のように指定できます。
またpxの指定では、-(マイナス)を使用する事もできるので覚えておきましょう。

ログインして解答を見る

box-shadowと似たプロパティに、text-shadowというプロパティもあります。
text-shadowは、テキストに対して影を付ける役割を持ち見出しなどによく使用されています。

指定する際の構文は、box-shadowと似ていて
text-shadow: 左右の向きpx 上下の向きpx ぼかしpx 色;のように指定できます。