Box Shadow

CoddyのHTMLジャーニー「Styling with CSS」セクションの一部 — レッスン 42/76。

CSSにおいて、box-shadowプロパティは、要素のボックスに影の効果を追加するために使用されます。このプロパティを使用すると、要素がページから「飛び出している」ように見せたり、奥行きや立体感を出したりする、視覚的に魅力的な効果を作成できます。

box-shadow プロパティを使用するための基本的な構文は次のとおりです。

selector {
    box-shadow: horizontal-offset vertical-offset blur spread color inset;
}

horizontal-offset: 要素からの影の水平方向の距離。正の値は影を右に移動させ、負の値は左に移動させます。

vertical-offset: 要素からの影の垂直方向の距離。正の値は影を下に移動させ、負の値は上に移動させます。

blur （任意）: シャドウのぼかし半径。値が大きいほど、よりぼやけたシャドウになります。省略した場合、デフォルトは 0（ぼかしなし）になります。

spread （オプション）: シャドウの拡散半径。正の値はシャドウを拡大させ、負の値は縮小させます。

color （オプション）: 影の色。名前付きカラー、16進数値、RGB値、またはHSL値を使用して指定できます。
inset （オプション）: 影を外側の影（outset）から内側の影に変更します。

例えば：

div {
    box-shadow: 5px 5px 10px gray;
}

.button {
    box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.5);
}

この例では、すべての <div> 要素に、水平オフセット 5px、垂直オフセット 5px、ぼかし半径 10px、グレーの色のボックスシャドウが設定されています。button クラスを持つ要素には、水平オフセット 2px、垂直オフセット 2px、ぼかし半径 5px、広がり半径 2px、半透明の黒色（rgba(0, 0, 0, 0.5)）のボックスシャドウが設定されています。

チャレンジ

簡単

<div>要素と<p>要素を含むHTMLドキュメントが与えられています。あなたのタスクは、box-shadowプロパティを使用して、これらの要素に影のエフェクトを追加することです。以下の手順に従ってください。

<div>要素をターゲットにするCSSルールを記述してください。box-shadowを10px 10px 5px grayに設定します。
<p>要素をターゲットにするCSSルールを記述してください。box-shadowを-5px -5px 10px 2px rgba(0, 0, 0, 0.7)に設定します。

チートシート

box-shadowプロパティは、要素に影の効果を追加します：

selector {
    box-shadow: horizontal-offset vertical-offset blur spread color inset;
}

horizontal-offset: 水平方向の距離（正 = 右、負 = 左）
vertical-offset: 垂直方向の距離（正 = 下、負 = 上）
blur (任意): ぼかしの半径（値が大きいほどぼやける）
spread (任意): 広がりの半径（正 = 拡大、負 = 縮小）
color (任意): 影の色
inset (任意): 外側の影の代わりに内側の影を作成する

div {
    box-shadow: 5px 5px 10px gray;
}

.button {
    box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.5);
}

自分で試してみよう

<html>
<head>
    <title>Box Shadow</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div>This is a division with a box shadow.</div>
    <br>
    <p>This is a paragraph with a box shadow.</p>
</body>
</html>