Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Como fazer um botao que assim q clicado ele muda o bg, as cores das letra e certas imagens mais lentamente ( um se transformando no outro) nada de akilo de carregar outra pagina.
ja vi este efeito em um site maais n lembro qual, vou procurar para voces ter uma noção melhor.
Eu faço isso só com CSS, uso a pseudo classe :active no elemento e a propriedade transition do CSS3.
Mas se vai utilizar muitas imagens, vai de jQuery mesmo.
>
Eu faço isso só com CSS, uso a pseudo classe :active no elemento e a propriedade transition do CSS3.
Mas se vai utilizar muitas imagens, vai de jQuery mesmo.
Dá pra fazer tudo em CSS mesmo, como a Diéssica falou. Mas como o nosso chapa aí falou que queria lentamente, então, no way! Só com JS/djayQuery.
>
Dá pra fazer tudo em CSS mesmo, como a Diéssica falou. Mas como o nosso chapa aí falou que queria lentamente, então, no way! Só com JS/djayQuery.
Sim Guilherme, mas o que tu falou sobre mudar a classe no clique do mouse é nada a ver... Usa o :active que foi feito exatamente pra isso.
E sobre lentamente...
transition: color 0.3s....
O transition suporta segundos :)
>
Sim Guilherme, mas o que tu falou sobre mudar a classe no clique do mouse é nada a ver... Usa o :active que foi feito exatamente pra isso.
E sobre lentamente...
transition: color 0.3s....
O transition suporta segundos :)
Nada a ver por quê? Com ou sem o active, uma regra a mais vai ser criada - independente da circunstância.
E o transition que você falou não é lá muito legal quando se quer trabalhar com esse tipo de efeito - isso partindo do pressuposto de que você quer fazer algo bonito e acessível (à todos). Com o jQuery, não temos o dogma dos browsers, o que torna o efeito menos... preconceituoso.
Eu nem ligo pra browsers inferiores, mas nesse caso em específico (um botão raffiné), eu não abro mão de uma boa acessibilidade.
>
Nada a ver por quê? Com ou sem o active, uma regra a mais vai ser criada - independente da circunstância.
Quis dizer que não precisa utilizar Javascript.
>
E o transition que você falou não é lá muito legal quando se quer trabalhar com esse tipo de efeito - isso partindo do pressuposto de que você quer fazer algo bonito e acessível (à todos). Com o jQuery, não temos o dogma dos browsers, o que torna o efeito menos... preconceituoso.
Concordo contigo sobre essa acessabilidade...
Foi uma sugestão para fazer o botão apenas com CSS. É possível. Vai depender do público dele :)
Só não concordei sobre usar jQuery só porque ele queria um efeito lento, pois também dá pra controlar o tempo do fade com transition.
ixi ses n entenderam. O que eu kero eh q quando eu aperto um botao o site muda
muda o fundo
as cores
e imagens
>
ixi ses n entenderam. O que eu kero eh q quando eu aperto um botao o site muda
muda o fundo
as cores
e imagens
Tu que não se explicou. Nesse caso é Javascript mesmo.
Movido:
Webstandards: CSS / XML / XHTML / HTML :seta: Javascript / DHTML
>
ixi ses n entenderam. O que eu kero eh q quando eu aperto um botao o site muda
muda o fundo
as cores
e imagens
Tá brincando comigo, né? Precisa de algumas aulas de expressão, porque tá difícil.
Enfim, faça dois pacotes de estilo para o seu site, por exemplo:
Quando é-se clicado no botão A, faça com que a sua folha de estilos seja alterada para a folha de estilos A e assim sucessivamente.
É simples.
to ligado mais eu quero q faça isso de forma lenta....
Eu resolvi assim uma vez:
1. Linkei todos os estilos (preto.css por padrão e branco.css)
<link href="preto.css" rel="stylesheet" type="text/css" media="screen" />
<link href="branco.css" rel="alternate stylesheet" type="text/css" media="screen" title="estilo_branco" />2. E ao clicar em "Mudar para branco" mudava pro branco.css
<a href="#Branco" onclick="mudarestilo('estilo_branco', 1);return false;">Mudar para branco</a>
>
link href="branco.css" rel="alternate stylesheet" type="text/css" media="screen" title="estilo_branco"
onclick="mudarestilo('estilo_branco', 1);return false;
A função:
function mudarestilo(title) {
var i, a, main;a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}Os efeitos adicionais faz com jQuery.
:bye:
>
to ligado mais eu quero q faça isso de forma lenta....
Na Internet, em 5 (ou menos) minutos de pesquisa, achei este artigo que explica como fazer o que você quer.
Para aplicar o efeito "fadeOut" (aquele `sumir lentamente´), ainda temos à disposição este excelente artigo.
Clique, leia, interprete, entenda. Se não conseguir, volte.
vixe o bg sumiu oq eu faço?
Edit: pera ae vo ver o artigo do mano ai
Edit2: lol vai direto ___
Isso é feito com Javascript/jQuery.
Quando se clica no botão, altera-se a classe (ou seja, a regra com as propriedades que definem o estilo da sua camada). Até aqui, tudo fácil. A questão é que você deverá fazer isso com um fadeIn.
Dá uma olhada aqui, porque é exatamente isso que você quer. A diferença é que o que você quer é com click (clicar), e o exemplo aí é hover (passar o mouse, mas a alteração é simples.
Você já usa jQuery?