シャドウ
Coddyの「CSSプロジェクト - おしゃれなボタン」コースのレッスン 6/8。
ボタンに影のエフェクトを追加して、浮き上がったような、クリック可能な印象を与えるのは一般的な手法です。
CSSで影を追加するには、box-shadowプロパティを使用します。
#with-shadow {
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25)
}チャレンジ
簡単ボタンにシャドウを追加しましょう!
ヒント: 影の色として
rgba(0, 0, 0, 0.25)を使用するのが一般的です(不透明度 - 0.25 を調整することもできます)
自分で試してみよう
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Write HTML code here -->
</body>
</html>