Chapter.4テクニックを身につける

11ボックスデザインを作成する

emoji_objects

①角丸とドロップシャドウを付ける

②背景色をグラデーションにする

③疑似要素を使って背景を重ねる

①角丸とドロップシャドウを付ける
-- css --
box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
border-radius: 9px;

②背景色をグラデーションにする
-- css --
background: linear-gradient(90deg, #41a4fd, #0ef4ff);

③疑似要素を使って背景を重ねる
-- css --
.**********:before {
  content: "";
  position: absolute;
  bottom: -10px;
  right: -10px;
  width: 100%;
  height: 100%;
  background: #ddd;
  z-index: -1;
}

ヒント

①角丸とドロップシャドウを付ける
-- css --
box-shadow
border-radius

②背景色をグラデーションにする
-- css --
background: linear-gradient();

③疑似要素を使って背景を重ねる
-- css --
z-index