Free content

Bem-vindo ao WASD.in!

O WASD Fórum é um ambiente virtual feito com o intuito de compartilhar ideias e disponibilizar conteúdos de diversas áreas, sendo assim um Fórum bem democrático no que diz respeito aos Direitos Humanos. A principal finalidade do fórum é coletar e compartilhar dados, visando espalhar o conhecimento para todos aqueles que desejam obter de forma legal, ressaltando que não trabalhamos com pirataria nem afins. Leia as Regras Gerais para evitar constrangimentos.

Você não está conectado. Conecte-se ou registre-se

Texto sem foco com :hover

Ver o tópico anterior Ver o tópico seguinte Ir para baixo Mensagem [Página 1 de 1]

#1

Je4n
Je4n
Administrador
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):
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)

#2

iLucas
iLucas
Membro
Muito bom Je4n, gostei =)

#3

Mamma
Mamma
Turista
Obrigado por compartilhar isso conosco, será bem usado em meus projetos.

#4

Joohn
Joohn
VIP
Ficou bem maneiro! Mas acho que se o efeito fosse inverso(sem :hover é borrado) seria melhor.

#5

WaterR
WaterR
Membro
Ficou bem interessante
Tem como fazer um ensinando a por foco em imagens @[Tens de ter uma conta e sessão iniciada para poderes visualizar este link] ?

#6

Je4n
Je4n
Administrador
WaterR escreveu:Ficou bem interessante
Tem como fazer um ensinando a por foco em imagens @[Tens de ter uma conta e sessão iniciada para poderes visualizar este link] ?
Aqui não é local para isso. Lembre-se de que antes de participar de qualquer coisa, se deve estar ciente das regras.. (Esse texto não era pra você, já estava salvo eu enviei sem querer.)
Olá @[Tens de ter uma conta e sessão iniciada para poderes visualizar este link], dependendo de como quer que seja o resultado final, o caminho mais simples é utilizando CSS.
Basta adicionar o seguinte código no elemento que quer Ofuscar: 
Código:
filter: blur(2px);
-webkit-filter: blur(2px);

Existem também outras maneiras, utilizando PHP e Javascript por exemplo.



Última edição por Je4n em Sex Mar 27, 2015 5:44 pm, editado 1 vez(es)

#7

AndréGama
AndréGama
Membro
@[Tens de ter uma conta e sessão iniciada para poderes visualizar este link] sempre trazendo coisas boas e interessantes que não se vê muito.

#8

Conteúdo patrocinado

Ver o tópico anterior Ver o tópico seguinte Ir para o topo Mensagem [Página 1 de 1]


Permissões neste sub-fórum
Não podes responder a tópicos