24 de jul de 2012

Pedido de Tutorial: Hover/Fade nos links


Oii minhas bebês, tudo bem?! Hoje eu ia trazer uns goodies bem legais, fica para quinta-feira, porque semana passada num post da Aninha a Francieli Perez  pediu o tutorial de opacidade nos links, o que a gente usa aqui no Pincelando. Queria então atendê-la :)

 Vamos começar?!

Vá em Desing ~> Editar HTML ~> Dê um Ctrl+F ou F3 e procure pela seguinte tag:

a:link {

Você vai encontrar os seguintes códigos, logo abaixo:

 a:link {text-decoration:none;
color: $(link.color);
}


a:visited {
text-decoration:none;
color: $(link.visited.color);
}


a:hover {
text-decoration:underline;
color: $(link.hover.color);
}



Pois bem, agora você vai apagar tudo, incluindo a Tag pesquisada e substituir por:

a:link {
color: #E9A1C0; /* Cor do link*/
text-decoration: none;
-webkit-transition: color 0.7s ease-out;-moz-transition:
color 0.7s ease-out;transition: color 0.7s ease-out;
}


a:visited {
color: #33CCCC; /*Cor dos links visitados*/
text-decoration:none;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
}


a:hover {
color: #707070; /*Cor do link quando passa o mouse*/
text-decoration:none;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;

}

Agora é só substituir as cores em itálico pela instrução ao lado. Indico essa tabela de cores aqui, mas pode ser outra à sua escolha.

Se você quiser aplicar só na área das postagens e no resto do blog, pare por aqui. Mas se você quiser usar ao todo,incluindo a sidebar, continue :)

Dê novamente um Ctrl+F ou F3 e procure por:

.sidebar .widget a:link {

Você irá encontrar:

.sidebar .widget a:link {  
color: $(widget.link.color);
  text-decoration: none;
}


.sidebar .widget a:visited {
  color: $(widget.link.visited.color);
}


.sidebar .widget a:hover {
  color: $(widget.link.color);
  text-decoration: underline;
}



Novamente, apague tudo e substitua pelo código:


a:link {
color: #E9A1C0; /* Cor do link*/
text-decoration: none;
-webkit-transition: color 0.7s ease-out;-moz-transition:
color 0.7s ease-out;transition: color 0.7s ease-out;
}


a:visited {
color: #33CCCC; /*Cor dos links visitados*/
text-decoration:none;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
}


a:hover {
color: #707070; /*Cor do link quando passa o mouse*/
text-decoration:none;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;

}


→ Créditos:  ←

Okayzinho pessoal?! Se vocês tiverem alguma dúvida, pode perguntar para mim, espero que tenha esclarecido tudo e com certeza de ajudado Francieli.

Por hoje é só, me aguardem quinta-feira.
Um beijo pitchukas:3

5 comentários:

  1. adorei seu blog.. é lindo ;) Primeira vez de muitas que estarei visitando ;)

    www.ejhonas.com {Seguindo seu blog para a próxima meta. Se puder seguir o meu o link tá do lado *-*}

    ResponderExcluir
  2. Liindo! Muito bom o tutorial :D
    Já to usando, viu?
    Beeijão
    #Raawn →Sweet Dreams

    ResponderExcluir
  3. olá legal a dica do tutorial,já estou seguindo seu blog,mto sucesso
    beijos

    www.dondokafashion1.blogspot.com.br

    ResponderExcluir
  4. Oi que show seu tutorial!
    Amei seu blog, seguindo!
    Beijos
    @maihferreira

    http://ithecloset.blogspot.com

    ResponderExcluir
  5. Aii q show*-* esse vou ter q por no meu blog...
    www.fashionemcores.com

    ResponderExcluir

Olá, aqui temos uma Mini F.a.q pra te auxiliar:

-Não aceitamos Tags e Selinhos
-Precisa de uma Postagem? Pode comentar :)
-Afiliação? Somente na página sobre como se afiliar. Pedidos nos comentários serão desconsiderados
-Por favor, sem xingamentos para o bem de todos
-Nunca deixe a URL do seu blog no final do comentário, o blogger considera isso SPAN e exclui seu blog :(
-Por favor não plageie.
Mais alguma pergunta? Comente aqui ou Leia nossa F.a.q completa

Obrigada