Um brilho externo suave adicionado a um elemento em sua página da web faz com que o elemento se destaque para o visualizador. Usar CSS3 e HTML para aplicar um brilho ao redor das bordas externas de um objeto importante. O efeito é semelhante a um brilho externo adicionado a um objeto em Photoshop.
Crie o elemento para brilhar
Os efeitos de brilho funcionam em qualquer plano de fundo, mas ficam melhores em planos de fundo escuros porque o brilho parece brilhar mais. Em um exemplo de caixa retangular de canto arredondado, um elemento DIV é colocado em outro elemento DIV com um fundo preto. O DIV externo não é necessário para o brilho, mas é difícil ver o brilho em um fundo branco.
Defina o tamanho e a cor do elemento
Depois de escolher o elemento que você vai embelezar com um brilho, adicionar estilos a ele, como cor de fundo, tamanho e fontes.
Este exemplo é um retângulo azul; o tamanho é definido para 147px por 90px; e a cor de fundo é definida como # 1f5afe, um azul royal. Inclui uma margem para colocar o elemento no meio do elemento recipiente preto.
Arredondar os cantos
Criar um retângulo com cantos arredondados é fácil com CSS3. Adicione a propriedade de estilo border-radius à sua classe de brilho. Apenas lembre-se de usar o –Webkit– e –Moz– prefixos para a maior compatibilidade.
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
raio da borda: 15px;
Adicione o brilho com uma sombra de caixa
O próprio brilho é criado com uma sombra de caixa. Como ele faz um halo em todo o elemento sem projetar o brilho de um lado como uma sombra, defina os comprimentos horizontal e vertical como 0 px.
Neste exemplo, o raio do desfoque é definido como 15px e a propagação do desfoque é 5px, mas você pode alterar essas configurações para determinar o quão amplo e difuso você deseja que o brilho seja. A cor rgb (255,255,190) é uma cor amarela com transparência RGBa alfa definida para 75 por cento—rgba (255,255,190, 0,75). Escolha uma cor de brilho que funcione melhor para o seu projeto. Assim como arredondar os cantos, não se esqueça de usar os prefixos do navegador (–Webkit– e –Moz–) para a melhor compatibilidade.
-webkit-box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, 0,75);
-moz-box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, 0,75);
box-shadow: 0px 0px 15px 5px rgba (255, 255, 190, 0,75);