Efeito Glow com CSS 3

Post ensinando a como criar 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:

Elemento no estado normal:

Efeito ativado:

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.