• - ChapStique -

    - ChapStique -

  • - Crouton -

    - Crouton -

  • - Nadaddy -

    - Nadaddy -

  • - Fatty -

    - Fatty -

  • - Hollywood -

    - Hollywood -

13 de dezembro de 2012

Atualizado - Borda Hover em Torno Da Postagem*

Tumblr_liupnjpwoi1qgoiq8o1_500_large
Novo layout quase terminado
Olá doces de maracujá com sorvete adocicado pois sorvete sem açúcar é horrível

Trouxe um tutorial que encontrei no A.O, eu ia colocar ele no novo layout do A.N só que esse tutorial só fica com o resultado bonito quando as postagens são separadas.
Vamos aprender?


Vá no seu HMTL e procure por:


]]></b:skin>

Acima da tag procurada, cole:

.post-outer {
border: 2px solid #91c9a3;
margin: 0px 0px 0px;
background: #fff;
padding: 21px 22px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.post-outer:hover {
border: 2px solid #81bfad;
margin: 0px 0px 0px;
background: #fff;
padding: 0px 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}  

Já dá pra entender o que é para modificar, mais já que é um pouco complicado, vou explicar:

Essa parte é para você escolher se as bordas iram ficar aredondadas ou não. Se quiser bordas redondas deixa tudo que está em 5px do jeito que está, se quiser quadrada zere todos os 5px


-webkit-border-radius: 0px;

-moz-border-radius: 0px;

border-radius: 0px;





1px é o tamanho da borda, solid é o tipo e #af4949 é a cor

border: 1px solid#af4949;


Essa parte é de sua preferencia, é para você subir ou descer o titulo da postagem

padding: 0px 0px;

O resto são só as cores mesmo, e nem tem necessidade de mexer, mais então, curtiram?
Se quiserem uma ajuda de uma tabela de cores em HTML, aqui estão algumas opções: Nossa Tabela - Ótimos Geradores

7 comentários: