Cabeçalho em hover no blog + Icons Taeyeon


E ai, gente bonita, gente bacana, gente legal

E novamente eu estou adoentada, marquem mais um dia ai na listinha. Mas, mesmo doente, a três dias seguidos, venho para casa acompanhada de duas amigas cantando/berrando no meio da rua músicas extremamente ridículas como "Aonde está a baleia?" que aprendemos na quinta série. Desta vez, enquanto cantava-mos, meus vizinhos nos olhavam mais ou menos assim

Cantorias á parte, hoje trouxe um tutorial que foi pedido umas duas vezes em minha ask : Um tutorial de pôr esse efeito "hover" que tenho no blog. Quer testar? ponha o mouse no bg/header, ou nos posts; depois, tire o mouse da página. Então, verá essa diferença:
Normal
 Hover


image
 Você irá achar as tags derivadas de " Body { ". Então, você vai colar isso no lugar de body{ :

body, html {
 height: *tamanho da sua imagem para primeiro back*px;
 margin: 0;
 padding: 0;  }
body {
 font: $(body.font);
color: $(body.text.color);
background: url("*primeiro background*") no-repeat; -webkit-transition-duration: .90s; }
body:hover {
 font: $(body.font);
color: $(body.text.color);
background: url("*hover do primeiro bg*") no-repeat;
-webkit-transition-duration: .90s;}
html {
 background: url("*2° bg (plano de fundo do blog)*) repeat; -webkit-transition-duration: .90s; }
html:hover {
background: url("*hover do segundo bg*")repeat;
-webkit-transition-duration: .90s;}
a:link {
  text-decoration: none;
  color: #e3938b;
}
Sugiro que apenas mude o que está destacado em negrito, para que o efeito fique mais agradável. Caso prefira, troque os números "90", destacados em itálico, por um número entre 76 e 90.
O resto do código, creio que esteja bem explicadinho, mas caso haja dúvidas, estarei aqui.
Espero que tenham gostado e entendido tudo certinho.

image

Icons - Taeyeon 

♥ Tamanho: 150 x 150 ♥
♥ Efeito : PSD criado por mim e action também criado por mim. ♥

       

Desculpe, são poucos icons, por esse motivo, resolvi juntar os dois posts. Espero que não tenha problemas.
Beijos >3<

10 comentários:

  1. O tutorial ficou lindo, vou usar no meu próximo lay ^^
    Os seus icons ficaram lindos *0*

    ResponderExcluir
  2. Ai, justo o que eu precisava. Vi aqui no blog e fiquei louca, KKKKKKKKK. Obg.

    ResponderExcluir
    Respostas
    1. sajlkhdsajkh Faça bom uso, e obrigada ^^

      Excluir
  3. Donte? De novo? ;c
    Melhoras.
    Ai mds, nunca vi esse efeito em nenhum blog. É tão legal de ficar passando o mouse -qn
    E os icons ficaram perfeitos, como todos. Eu sou apaixonada por esse efeito *0*

    ResponderExcluir
    Respostas
    1. Pois é né, dessa vez não é preguiciti -q.
      SUAHSUAHAS obrigada ,3

      Excluir
  4. Que tutorial divo, OMG *OO* Eu sempre via no blog da Roberta, o Cake Pop e sempre quis aprender ♥ Obrigada pelo tuto, diva o3o'

    Awnnnnnnn, perfeitos os icons u-u Essa Taeyeon, perfeita, cara !

    Beijinhos,

    Juu-Chan ;3 | Nescau com Nutella

    ResponderExcluir
    Respostas
    1. skjhsakj Obrigada. É, o que a Rô usa é apenas o cabeçalho, ainda não sei fazer isso, sasadhgjhdsa.
      De nada ^^
      Obrigada, e é, ela é linda de bonita o3o

      Excluir
  5. *O* Que efeito lindo que fica ;) Acho que usarei num próximo layout meu *-*
    Os icons estão maravilhosos :)) A Taeyeon é super bonita e esse psd e action são diwos ;)

    Kiss~

    from Niik ll Letter of Pain (perfil)

    ResponderExcluir
    Respostas
    1. Ai, obrigada <3
      Fica a vontade U_U
      E obrigada de novo, sdlakhdsa.

      Excluir

Obrigada por deixar suas opniões sobre o post !
1 - Leia o post, -please
2 - Aceito criticas, sugestões, requests ..
3 - Porfavor, não se esqueça de tratar todo mundo bem :3
4 - Deixe o Url do seu blog ! *-*
Beijos ;*