Primeiramente eu comecei com a ideia de usar filter blur, porém no decorrer do desenvolvimento eu percebi que as vezes, repentinamente o texto piscava sem ao menos ser ativado, outras o texto desaparecia. Ao invés de ir procurar pela a solução eu tive uma segunda ideia que veio bem mais a calhar.
Decidi usar o elemento text-shadow combinado com uma cor transparente (rgba). O Resultado foi quase idêntico ao anterior usando filter blur, então decidi compartilhar com vocês esse desenvolvimento rápido.
Veja a demonstração [Tens de ter uma conta e sessão iniciada para poderes visualizar este link].
CSS (Somente da logo):
HTML:
Perceba que no CSS :hover eu utilizei uma color rgba com .10 em transparência, seguida de um text-shadow com todo o redor da fonte com um efeito glow.
Decidi usar o elemento text-shadow combinado com uma cor transparente (rgba). O Resultado foi quase idêntico ao anterior usando filter blur, então decidi compartilhar com vocês esse desenvolvimento rápido.
Veja a demonstração [Tens de ter uma conta e sessão iniciada para poderes visualizar este link].
CSS (Somente da logo):
- Código:
#logo {
float: left;
display: block;
font-size: 36px;
text-transform: uppercase;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.10);
color: #FFF;
font-weight: bold;
font-family: 'Open Sans', sans-serif;
transition: all ease-in-out 0.2s;
-webkit-transition: all ease-in-out 0.2s;
-o-transition: all ease-in-out 0.2s;
-moz-transition: all ease-in-out 0.2s;
}
#logo:hover {
color: rgba(255, 255, 255, .10);
text-shadow: #FFF 0px 0px 5px;
}
HTML:
- Código:
<div id="logo">{WASD} Fórum</div>
Perceba que no CSS :hover eu utilizei uma color rgba com .10 em transparência, seguida de um text-shadow com todo o redor da fonte com um efeito glow.
Última edição por Je4n em Dom Mar 08, 2015 7:42 pm, editado 2 vez(es)