Quem nunca ficou maravilhado com aqueles efeitos de sombra sutis em sites e pensou: “Gostaria de saber como fazer isso”?
Vou te explicar.
Entendendo o box-shadow
Antes de mergulharmos na transição de box-shadow, é essencial entender o que é essa propriedade. Basicamente, box-shadow permite adicionar sombras a elementos HTML. É como dar uma sensação de profundidade ao seu projeto.
/* Sintaxe básica */
box-shadow: offset-x offset-y blur-radius spread-radius color;Offset-x e offset-y definem a posição da sombra. Blur-radius e spread-radius controlam o tamanho e o alcance da sombra, e color bem, é autoexplicativo.
Iniciando a transição
Fazer a transição do box-shadow é tão simples quanto fazer uma animação de outras propriedades CSS. Utilizamos a propriedade transition.
/* Adicionando a transição */
.elemento {
box-shadow: 3px 3px 5px 6px #ccc;
transition: box-shadow 0.3s ease-in-out;
}Neste exemplo, a transição ocorre em 0.3 segundos com um efeito de “ease-in-out”, criando uma sensação agradável de aceleração e desaceleração.
Eventos disparadores
Você provavelmente quer que algo desencadeie essa transição, certo? Pode ser um hover do mouse, um clique ou algo do tipo.
/* Transição no hover */
.elemento:hover {
box-shadow: 10px 10px 5px 6px #ccc;
}Agora, quando você passar o mouse sobre o elemento, a sombra mudará conforme especificado, seguindo as regras de transição que definimos anteriormente.
Múltiplas sombras
Quem disse que você está limitado a uma única sombra? Você pode especificar várias sombras usando vírgulas.
/* Múltiplas sombras */
.elemento {
box-shadow: 3px 3px 5px 6px #ccc, -3px -3px 5px 6px #eee;
transition: box-shadow 0.3s ease-in-out;
}Transições de box-shadow podem ser mais pesadas em termos de performance em comparação com outras propriedades. Portanto, use com moderação.
Então, está preparado para sombrear seu site? Com um conhecimento sólido da propriedade box-shadow e de como aplicar transições, você está bem encaminhado para elevar o nível do seu design.
Agora vá lá, experimente. Mas não se perca muito nas sombras, elas são apenas um dos muitos elementos que tornam um design verdadeiramente excepcional.
