Efeito Glow com CSS 3

Post ensinando a como criar efeito Glow com CSS.

Efeito de sombras: Efeito Glow com CSS

Efeito “glow” é uma sombra transparente envolta de todo o elemento, utilizando cores vivas na sombra ele passa a impressão de uma luz “neon” no elemento.

Exemplo:

Passe o mouse

Elemento no estado normal:

Normal

Efeito ativado:

Com Efeito

Código CSS utilizado

Adicione a folha de estilo do seu site para utilizar o efeito.

.ef-glow {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: box-shadow;
transition-property: box-shadow;
}
.ef-glow:hover, .ef-glow:focus, .ef-glow:active {
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}

Versão comprimida:

.ef-glow{display:inline-block;vertical-align:middle;-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);box-shadow:0 0 1px transparent;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:box-shadow;transition-property:box-shadow}.ef-glow:hover,.ef-glow:focus,.ef-glow:active{box-shadow:0 0 8px rgba(0,0,0,0.6)}

Utilize a classe “ef-glow” nos elementos que você deseja aplicar o efeito.

<p class="ef-glow">teste..</p>

Você pode ajustar o efeito alterando “box-shadow: 0 0 8px rgba(0, 0, 0, 0.6)”.

Conheça mais sobre essa propriedade clicando aqui.

 

Resumo
Efeito Glow com CSS
Nome do Artigo
Efeito Glow com CSS
Descrição
Tutorial ensinando a criar o efeito glow utilizando CSS
Autor
Editor
Roger Mauricio Takemiya
Logo do Editor

Dúvidas? Faça um comentário logo abaixo ou envie uma mensagem clicando aqui.

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *