Ficar opaco

[mzaidan 2]

Prezados, olhem esse site:

 

http://www.linguee.com.br/ingles-portugues/traducao/get.html

 

Ao tentar fazer uma nova consulta, o resultado antigo fica meio "apagado"
Como que faz isso?

Grato

[rikaschmitt 54]

Ele mexe com a opacidade do elemento.

Tente usar:

opacity: (valor entre 0 e 1);

Exemplo

 

Usei o "filter" tbm, pois alguns navegadores com versões antigas, não lêem "opacity".

[mzaidan 2]

Não entendi.

Como eu deixaria a página toda opaca?

Pois quando ele começa a digitar no input o background da página que fica opca.

[rikaschmitt 54]

Então, a opção que mexe a opacidade é o "opacity", então é só implementar isso. No caso desejado, acredito que foi criada uma div para todo o conteúdo e outro para o topo com o menu/busca. Dai quando o busca está focado, a div do conteúdo recebe opacidade.

 

Talvez com jQuery fique melhor de aplicar o efeito.

 

Exemplo

[Lucas DIllenburg 1]

campoX:active divA {

 

background-color:rgba(0,0,0,0.2);

 

}

 

ao ativar o campo X , voce manipula a divA, rgba o "A" é opacidade que varia de 0 a 1, o interessante do rgba é que tu pode escolher a cor do opaco . \o

 

pode testar no body também.

campoX:active body {

 

background-color:rgba(0,0,0,0.2);

 

}

[Emet 6]

Efeito feito com CSS puro: http://jsfiddle.net/twwv50et/1/

[Lucas Medina 17]

Efeito feito com CSS puro: http://jsfiddle.net/twwv50et/1/

 

Incrível!

Pega esse exemplo, e pode levar pra casa que funciona muito bem ;)

[Maykel-ctba 233]

Wow @Emet! Muito bom mesmo!
Desconhecia esse jeito de mudar um elemento através da interação de outro!

[diego92ms 3]

#elemento{
opacity: 0.3
}

 

Essa propriedade vai depender da sua necessidade, vc pode variar de 0 a 1.

[rikaschmitt 54]

Na verdade o "~" representa algum elemento anterior ao elemento escolhido.. no caso do exemplo dele, o body vem antes do .elemento, por isso muda.