♦ Tutorial ~ Efeito shadow no rodapé das postagens.

Hey Rilakkumas
  Como estão vocês? Eu estou morrendo de sono, essa volta as aulas fizeram muito mal a minha rotina de sono rsrsrsrs. Estou realmente ficando sem nada de interessante para fazer e quero muito voltar para o frio de SP, mas nada é como queremos. Nem nós mesmos.
  O tutorial de hoje foi um pedido da ask, onde um anônimo (juro que pensava que anonimo era um nome de pessoa) pediu o tutorial do efeito do rodapé desse layout, é um efeito bem simples, que quando passamos o mouse uma sombra colori a barra. É bem bonito. Vamos lá.


Vá em MODELO >> EDITAR HTML e procure por ]]></b:skin>
Acima dele cole esse código, altere o que for preciso e depois salve.
.post-footer-line-1{
color: #fff; /*cor da letra*/
background: #e8e8e8; /*cor da barra*/
text-align:center;
margin-left:-10px;
margin-right:-10px;
box-shadow: 0px 1px 1px #e3e3e3;
-webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; transition: all 1s ease-out;
}
.post-footer-line-1:hover{
box-shadow:  inset 800px 0px 0px #0d0d0d; /*cor da sombra*/
-webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; transition: all 1s ease-out;
}
.post-footer-line-2{
color: #fff; /*cor da letra*/
background: #e8e8e8; /*cor da barra*/
text-align:center;
margin-left:-10px;
margin-right:-10px;
box-shadow: 0px 1px 1px #e3e3e3;
-webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; transition: all 1s ease-out;
}
.post-footer-line-2:hover{
box-shadow:  inset 800px 0px 0px #0d0d0d; /*cor da sombra*/
-webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; transition: all 1s ease-out;
}
.post-footer-line-3{
color: #fff; /*cor da letra*/
background: #e8e8e8; /*cor da barra*/
text-align:center;
margin-left:-10px;
margin-right:-10px;
box-shadow: 0px 1px 1px #e3e3e3;
-webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; transition: all 1s ease-out;
}
.post-footer-line-3:hover{
box-shadow:  inset 800px 0px 0px #0d0d0d; /*cor da sombra*/
-webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; transition: all 1s ease-out;
}

  AQUI tem uma tabela de cores para você usar, ou se preferir temos paletas de cores AQUI 


5 comentários:

  1. sério que você pensava que era nome? isuasuahsuahs'

    É o mesmo efeito daqui do blog? Se for, é muito fofo *-*

    ResponderExcluir
    Respostas
    1. Pensava sim, rsrsrs, tinha me esquicido que isso existia.
      É o mesmo sim, obrigado.

      Excluir
  2. É perfeito >3<

    - HTML Secret

    ResponderExcluir
  3. oiee tenho uma tag pra vc >>
    http://k-dramaonline.blogspot.com.br/2013/08/tag.html

    ResponderExcluir