6.1 Propriedade box-shadow
A propriedade box-shadow em CSS é usada para adicionar sombra aos elementos. Essa propriedade permite criar diversos efeitos visuais, melhorando a aparência das páginas web. Vamos detalhar a sintaxe, valores e exemplos de uso de box-shadow.
Sintaxe do box-shadow
A propriedade box-shadow aceita um ou mais valores, cada um definindo parâmetros da sombra. A sintaxe geral é assim:
element {
box-shadow: offset-x offset-y blur-radius spread-radius color;
}
Valores:
offset-x: deslocamento horizontal da sombra. Valores positivos deslocam a sombra para a direita, e negativos para a esquerdaoffset-y: deslocamento vertical da sombra. Valores positivos deslocam a sombra para baixo, e negativos para cimablur-radius: raio de desfoque da sombra. Quanto maior o valor, mais desfocada será a sombra. O valor padrão é 0 (sombra sem desfoque)spread-radius: raio de propagação da sombra. Valores positivos aumentam o tamanho da sombra, e negativos diminuem. O valor padrão é 0color: cor da sombra. Todos os formatos de cor CSS são suportados
6.2 Exemplos de uso
Sombra básica:
.shadow-basic {
width: 200px;
height: 200px;
background-color: #3498db;
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
margin: 20px;
}
<body>
<div class="shadow-basic">Sombra básica</div>
</body>
Sombra com desfoque:
.shadow-blur {
width: 200px;
height: 200px;
background-color: #2ecc71;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
margin: 20px;
}
<body>
<div class="shadow-blur">Sombra com desfoque</div>
</body>
Sombra com propagação:
.shadow-spread {
width: 200px;
height: 200px;
background-color: #e74c3c;
box-shadow: 10px 10px 20px 10px rgba(0, 0, 0, 0.5);
margin: 20px;
}
<body>
<div class="shadow-spread">Sombra com propagação</div>
</body>
Sombra interna:
.shadow-inset {
width: 200px;
height: 200px;
background-color: #f1c40f;
box-shadow: inset 10px 10px 20px rgba(0, 0, 0, 0.5);
margin: 20px;
}
<body>
<div class="shadow-inset">Sombra interna</div>
</body>
6.3 Configurações do box-shadow
Detalhes das configurações do box-shadow:
Deslocamento da sombra (offset-x e offset-y)
- Valores positivos: a sombra é deslocada para a direita (
offset-x) e para baixo (offset-y) - Valores negativos: a sombra é deslocada para a esquerda (
offset-x) e para cima (offset-y)
Desfoque da sombra (blur-radius)
- Valor 0: a sombra será nítida, sem desfoque
- Valores positivos: quanto maior o valor, mais desfocada será a sombra
Propagação da sombra (spread-radius)
- Valores positivos: a sombra aumenta de tamanho
- Valores negativos: a sombra diminui de tamanho
Cor da sombra (color)
A cor pode ser definida em vários formatos: nome da cor, código hexadecimal, RGB, RGBA, HSL, HSLA.
Sombra interna (inset)
A palavra-chave inset cria uma sombra dentro do elemento, que pode ser usada para um efeito de depressão.
Várias sombras com diferentes parâmetros:
.multiple-shadows {
width: 200px;
height: 200px;
background-color: #bdc3c7;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 15px rgba(0, 0, 0, 0.3);
margin: 20px;
}
<body>
<div class="multiple-shadows">Várias sombras</div>
</body>
GO TO FULL VERSION