Podemos adicionar uma sombra projetada a qualquer elemento HTML usando a propriedade CSS box-shadow. Aqui está como.
Adicionando uma sombra projetada básica
Vamos primeiro configurar alguns elementos HTML básicos para adicionar nossas sombras:
Box1Box2Box3Em seguida, adicione alguns CSS básicos:
p { padding: 10px;}.box { padding: 20px; width: 50%; margin: 30px auto; background: #000; color: #fff;}O resultado são apenas três caixas pretas que serão fáceis de adicionar sombras chamando seus IDs exclusivos:
Para adicionar um sombreamento básico, vamos usar o box-shadow propriedade na Caixa 1:
/* offset-x | offset-y | color */#box1 { box-shadow: 6px 12px yellow;}
Temos 3 parâmetros aqui. Os 2 primeiros são, respectivamente, o deslocamento x e o deslocamento y. Eles definem o local da sombra projetada.
O deslocamento é relativo à origem, que em HTML é sempre o canto superior esquerdo de um elemento. Um deslocamento x positivo moverá a sombra para a direita e um deslocamento y positivo moverá a sombra para baixo.
O terceiro parâmetro é a cor da sua sombra projetada.
Lembre-se de que, embora tenhamos usado
box-shadow A propriedade também pode ser aplicada a qualquer outro elemento HTML.Adicionando um raio de desfoque
Se quisermos que a sombra pareça um pouco mais realista, experimentaremos o blur-radius parâmetro.
Este parâmetro controla quanto borrar a sombra para que fique maior e mais clara. Vamos aplicá-lo à caixa 2:
/* offset-x | offset-y | blur-radius | color */#box2 { box-shadow: 6px 12px 4px red;}
O valor de 4px define o raio do desfoque a ser aplicado à nossa sombra projetada.
Adicionando um raio de propagação
Se quisermos controlar o tamanho da sombra, podemos usar o spread-radius parâmetro que controla quanto uma sombra cresce ou diminui.
Vamos adicionar um raio de propagação de 8px à Caixa 2:
/* offset-x | offset-y | blur-radius | spread-radius | color */#box2 { box-shadow: 6px 12px 4px 8px red;}
Lembre-se da ordem desses parâmetros!
Combinando várias sombras em uma única propriedade
Se quisermos ser extravagantes, podemos adicionar várias sombras a um elemento usando uma única box-shadow propriedade.
Vamos fazer isso com a Caixa 3 adicionando simultaneamente uma sombra azul e verde:
/* Any number of shadows, separated by commas */#box3 { box-shadow: 6px 12px 2px 2px blue, -6px -12px 2px 2px green;}
Bônus: Criar uma sombra inserida
Embora não crie uma sombra projetada, o inset parâmetro também pode ser usado com o box-shadow propriedade.
Como o nome sugere, esse parâmetro cria uma sombra inserida (ou seja, sombra dentro de uma caixa).
o inset parâmetro pode ser colocado no início ou no final dobox-shadow propriedade. Aqui demonstramos seu uso com um blockquote elemento.
HTML:
The key to success is to start before you're ready.
— Marie Forleo
CSS:
blockquote { width: 50%; margin: 50px auto; padding: 20px; font-size: 24px; box-shadow: inset 10px 5px black;}
Obviamente, você pode adicionar um pouco de desfoque e propagação para aprimorar a sombra, ou mesmo várias sombras:
box-shadow: inset 10px 5px 25px 5px black, 5px 5px 12px 2px black;
Com o box-shadow , podemos destacar facilmente os elementos em uma página da web para criar um bom efeito de iluminação 3D.
Se você quiser experimentar, aqui está uma caneta de código Eu criei com os exemplos usados neste tutorial.
Brinque e veja o que você pode criar!
