20/06/2015

Tutorial: Bordas arredondadas somente nos cantos externos

||

Esse tutorial é ótimo para quem ama layout estilo caixa como nesse layout aqui. Eu irei ensinar como aplicar bordas arredondadas (ver aqui) no modelo o deixando gracioso e um detalhe a mais para os que amam um blog detalhado! Vou ensinar como aplicar nele todo ou somente em algumas partes, os créditos vão para o blog Wonderland, pelas imagens ilustrativas. 

Isso é muito fácil irei mostrar alguns modelos possíveis de bordas aplicadas, depois basta escolher o modelo e aplicar na área escolhida, seja postagem ou sidebar. O tutorial estará mais abaixo. 


Topo do blog com os cantos arredondados:
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 a sidebar:
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topright: 20px; 
border-top-right-radius: 20px;


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 sidebar:
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
border-bottom-right-radius: 20px;


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 sidebar:
-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;


Aplicando

Escolha qual blog deseja aplicar depois em Layout >> HTML. Ao abrir o HTML. 

1) Se deseja aplicar bordas na postagem procure por:
.main-inner .column-center-outer {

Após o trecho background-image: none;, escolha um dos modelos acima e cole.

2) Se deseja aplicar na sidebar direita, procure por:
.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {

Após o trecho background:$(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;, escolha um dos modelos acima e cole. 


3) Se deseja aplicar na sidebar esquerda, procure por:
.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {

Após o trecho background:$(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;, escolha um dos modelos acima e cole. 

Nenhum comentário:

Postar um comentário

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram