06 agosto 2012

Tutorial:Bordas arredondadas somente nos cantos externos

Oi pessoal,lembrando que eu vou dar os b
créditos no finalzinho!
Vamos começar o tutorial!

Para deixar só o topo do blog com os cantos arredondados:                                                                 
 Para olhar o código leia mais!



Código para arredondar a área da postagem:

 -webkit-border-top-left-radius: 20px;

-moz-border-radius-topleft: 20px;

border-top-left-radius: 20px;

  Código para arredondar as colunas:

 -webkit-border-top-right-radius: 20px;

-moz-border-radius-topright: 20px;

border-top-right-radius: 20px;

  Para deixar só a parte de baixo do blog com os cantos arredondados:                                                                                   

Código para arredondar a área da postagem:

 -webkit-border-bottom-left-radius: 20px;

-moz-border-radius-bottomleft: 20px;

border-bottom-left-radius: 20px;

  Código para arredondar a coluna:

 -webkit-border-bottom-right-radius: 20px;

-moz-border-radius-bottomright: 20px;

border-bottom-right-radius: 20px;

  Para deixar todos os cantos externos arredondados:                                                                                                       

Código para arredondar a área da postagem:

-webkit-border-top-left-radius: 20px;

-webkit-border-bottom-left-radius: 20px;

-moz-border-radius-topleft: 20px;

-moz-border-radius-bottomleft: 20px;

border-top-left-radius: 20px;

border-bottom-left-radius: 20px;

  Código para arredondar a coluna:

 -webkit-border-top-right-radius: 20px;

-webkit-border-bottom-right-radius: 20px;

-moz-border-radius-topright: 20px;

-moz-border-radius-bottomright: 20px;

border-top-right-radius: 20px;

border-bottom-right-radius: 20px;

 Importante: Caso sua coluna seja do lado esquerdo inverta os códigos, use o código referente a área da postagem na coluna e o código referente a coluna use na área do post ok?


Como aplicar no seu HTML:     

                                                                                                                                                                                   Vá em Design > Editar HTML e pesquise por: 
.main-inner .column-center-outer {
logo abaixo terá o seguinte código:  _background-image: none;
então cole ABAIXO dele o código de borda que você escolheu, referente a área da postagem.

Após pesquise por:
.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {    (caso sua coluna seja no lado direito)
e se sua coluna for no lado esquerdo pesquise por:
.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {
logo abaixo terá o seguinte código:
background:$(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left; então cole logo ABAIXO dele o código de borda que você escolheu, referente a coluna.                                   
Caso você não ache os códigos procure pela parte que se refere a área do post e da sidebar e faça os mesmos procedimentos. Quem desenrola um pouco mais pode criar outros modelos de borda usando esse site aqui.                                     


Bom é isso pessoal!
Beijos ^^
Créditos:(www)

Um comentário: