Um brilho externo suave adicionado a um elemento em sua página da Web faz com que o elemento se destaque para o visualizador. Use CSS3 e HTML para aplicar um brilho em torno das bordas externas de um objeto importante. O efeito é semelhante a um brilho externo adicionado a um objeto no Photoshop.
Primeiro crie o elemento para brilhar
Efeitos de brilho podem ser feitos em qualquer fundo de cor, mas eles ficam melhores em fundos escuros, porque o brilho parece brilhar mais. Neste 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.
Dê ao DIV uma classe de brilho:
Definir o tamanho e a cor do elemento
Depois de escolher o elemento que você vai embelezar com um brilho, vá em frente e adicione os estilos desejados, como cor de fundo, tamanho e fontes. Este exemplo é um retângulo azul; o tamanho é definido para 147 px por 90 px; e a cor de fundo é definida como # 1f5afe, um azul royal. Inclui uma margem para colocar o elemento no meio do elemento de contêiner preto.
Arredondar os cantos
Criar um retângulo com cantos arredondados é fácil com o CSS3. Adicione a propriedade de estilo border-radius à sua classe de brilho. Apenas lembre-se de usar os prefixos –webkit– e –moz– para a maior compatibilidade.
-webkit-border-radius: 15px;-moz-border-radius: 15px;raio de fronteira: 15 px; Adicione o brilho com uma sombra de caixa
O brilho em si é criado com uma sombra de caixa. Como você deseja que o elemento inteiro seja halo e não projete 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 é de 5px, mas você pode mexer nessas configurações para determinar o quão largo e difuso você deseja que o brilho seja. A cor rgb (255,255,190) é uma cor amarela com transparência alfa RGBa definida como 75 por cento - rgba (255,255,190, 0,75). Escolha uma cor de brilho que funcione melhor para o seu projeto. Assim como no arredondamento dos cantos, não se esqueça de usar os prefixos do navegador (–webkit– e –moz–) para obter 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); Teste a caixa brilhante
Teste a caixa brilhante em um ou mais navegadores e faça os ajustes necessários para dar o efeito de brilho que funciona melhor para sua página da web.
