♦ 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