Menu
Coddy logo textTech

シャドウ

Coddyの「CSSプロジェクト - おしゃれなボタン」コースのレッスン 6/8。

ボタンに影のエフェクトを追加して、浮き上がったような、クリック可能な印象を与えるのは一般的な手法です。

CSSで影を追加するには、box-shadowプロパティを使用します。

#with-shadow {
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25)
}

続きを読む

challenge icon

チャレンジ

簡単

ボタンにシャドウを追加しましょう!

ヒント: 影の色として 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>

CSSプロジェクト - おしゃれなボタンのすべてのレッスン