Mudar BG, cores e imagens

[kenweb 0]

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.

[Guilherme Oderdenge 42]

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?

[Diéssica 140]

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.

[Guilherme Oderdenge 42]

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.

[Diéssica 140]

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

[Guilherme Oderdenge 42]

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.

[Diéssica 140]

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.

[kenweb 0]

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

[Diéssica 140]

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

[Guilherme Oderdenge 42]

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:

• Estilo A.css
  
• Estilo B.css
  

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.

[kenweb 0]

to ligado mais eu quero q faça isso de forma lenta....

[Diéssica 140]

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;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}

Os efeitos adicionais faz com jQuery.

:bye:

[Guilherme Oderdenge 42]

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.

[kenweb 0]

vixe o bg sumiu oq eu faço?

 

 

Edit: pera ae vo ver o artigo do mano ai

 

Edit2: lol vai direto *___*