Box Shadow

Parte da seção Styling with CSS do Journey de HTML da Coddy — lição 42 de 76.

Em CSS, a propriedade box-shadow é usada para adicionar efeitos de sombra à caixa de um elemento. Essa propriedade permite criar efeitos visualmente atraentes que fazem os elementos parecerem "saltar" da página ou criar profundidade e dimensão.

Aqui está a sintaxe básica para usar a propriedade box-shadow:

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

horizontal-offset: A distância horizontal da sombra em relação ao elemento. Valores positivos movem a sombra para a direita, e valores negativos a movem para a esquerda.

vertical-offset: A distância vertical da shadow em relação ao elemento. Valores positivos movem a shadow para baixo, e valores negativos a movem para cima.

blur (opcional): O raio de desfoque da sombra. Um valor maior cria uma sombra mais desfocada. Se omitido, o padrão é 0 (sem desfoque).

spread (opcional): O raio de spread da shadow. Valores positivos fazem a shadow expandir, e valores negativos fazem ela encolher.

color (opcional): A cor da sombra. Pode ser especificada usando cores nomeadas, valores hexadecimais, valores RGB ou valores HSL.
inset (opcional): Altera a sombra de uma sombra externa (outset) para uma sombra interna.

Por exemplo:

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

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

Neste exemplo, todos os elementos <div> têm uma sombra de caixa com um deslocamento horizontal (horizontal offset) de 5px, um deslocamento vertical (vertical offset) de 5px, um raio de desfoque (blur) de 10px e uma cor cinza (gray). Elementos com a classe button têm uma sombra de caixa com um deslocamento horizontal de 2px, um deslocamento vertical de 2px, um raio de desfoque de 5px, um raio de espalhamento (spread) de 2px e uma cor preta (black) semi-transparente (rgba(0, 0, 0, 0.5)).

Desafio

Fácil

Você recebe um documento HTML com uma divisão (<div>) e um parágrafo (<p>). Sua tarefa é usar a propriedade box-shadow para adicionar efeitos de sombra a estes elementos. Siga os passos abaixo:

Escreva uma regra CSS que direcione ao elemento <div>. Defina o box-shadow para 10px 10px 5px gray.
Escreva uma regra CSS que direcione ao elemento <p>. Defina o box-shadow para -5px -5px 10px 2px rgba(0, 0, 0, 0.7).

Experimente você mesmo

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