Box Shadow

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

No CSS, a propriedade box-shadow é usada para adicionar efeitos de sombra à caixa de um elemento. Esta propriedade permite criar efeitos visualmente atraentes que fazem os elementos parecerem "saltar" da página ou criam 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 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 espalhamento da sombra. Valores positivos fazem com que a sombra se expanda, 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. 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 os passos abaixo:

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

Folha de consulta

A propriedade box-shadow adiciona efeitos de sombra aos elementos:

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

horizontal-offset: Distância horizontal (positivo = direita, negativo = esquerda)
vertical-offset: Distância vertical (positivo = para baixo, negativo = para cima)
blur (opcional): Raio de desfoque (maior = mais desfocado)
spread (opcional): Raio de propagação (positivo = expandir, negativo = encolher)
color (opcional): Cor da sombra
inset (opcional): Cria uma sombra interna em vez de externa

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

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

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>