CSSで影をつけるためのプロパティと具体例

2020年12月14日2021年4月10日CSS

CSSでテキストやボタンに影をつける方法をみていきましょう。

まずは、基本的なことから勉強しましょう。

CSSで影をつけるためのプロパティ

box-shadowプロパティとtext-shadowプロパティがありあす。

それぞれ値は次のように指定します。

• box-shadowプロパティ:　1つ目：x方向、2つ目：Y方向、3つ目：影のぼかし具合、4番目：影の拡大
• text-shadowプロパティ:　1つ目：x方向、2つ目：Y方向、3つ目：影のぼかし具合、4番目はつけられない。

例）box-shadow: 10px 5px 3px rgba(0, 0, 0, 0.3);

例）text-shadow: 10px 5px 3px rgba(0, 0, 0, 0.3);

<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
<div class="box3">Box 3</div>

.box1 {
  background-color: orange;
  width: 100px;
  height: 100px;
  box-shadow: 10px 5px rgba(0, 0, 0, 0.3);
  text-shadow: 10px 5px rgba(0, 0, 0, 0.3);
  margin-bottom: 20px;
}

.box2 {
  background-color: skyblue;
  width: 100px;
  height: 100px;
  box-shadow: 10px 5px 3px rgba(0, 0, 0, 0.3);
  text-shadow: 10px 5px 3px rgba(0, 0, 0, 0.3);
  margin-bottom: 20px;
}

.box3 {
  background-color: tomato;
  width: 100px;
  height: 100px;
  box-shadow: 10px 5px 3px 10px rgba(0, 0, 0, 0.3);
  margin-bottom: 20px;
}