Sombra da Caixa

Parte da seção Estilização com 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 movem-na para a esquerda.

vertical-offset: A distância vertical da sombra em relação ao elemento. Valores positivos movem a sombra 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 expansão da sombra. Valores positivos fazem a sombra se expandir, e valores negativos fazem com que ela encolha.

color (opcional): A cor da sombra. Ela 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 de 5px, um deslocamento vertical de 5px, um raio de desfoque de 10px e uma cor cinza. Os 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 propagação de 2px e uma cor preta semitransparente (rgba(0, 0, 0, 0.5)).

Desafio

Fácil

Você recebeu 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 esses elementos. Siga as etapas abaixo:

Escreva uma regra CSS que tenha como alvo o elemento <div>. Defina box-shadow como 10px 10px 5px gray.
Escreva uma regra CSS que tenha como alvo o elemento <p>. Defina box-shadow como -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>