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