ボックスシャドウ

CoddyのHTMLジャーニー「CSSによるスタイリング」セクションの一部。レッスン 42/76。

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

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

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

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

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

blur（省略可能）：シャドウのぼかし半径。値が大きいほど、よりぼかされたシャドウになります。省略した場合は、デフォルトで 0（ぼかしなし）になります。

spread（省略可能）：影の拡散半径。正の値を指定すると影が拡大し、負の値を指定すると縮小します。

color（省略可能）：shadow の色。名前付きの色、16進数値、RGB 値、または HSL 値を使用して指定できます。
inset（省略可能）：shadow を外側の shadow（outset）から内側の shadow に変更します。

例：

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

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

この例では、すべての <div> 要素に、5px の水平方向のオフセット、5px の垂直方向のオフセット、10px のぼかし半径、およびgray色のボックスシャドウがあります。クラス button を持つ要素には、2px の水平方向のオフセット、2px の垂直方向のオフセット、5px のぼかし半径、2px の拡散半径、および半透明のblack色（rgba(0, 0, 0, 0.5)）のボックスシャドウがあります。

チャレンジ

簡単

division（<div>）とparagraph（<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)に設定します。

自分で試してみよう

<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>