sexta-feira, 3 de setembro de 2010

Arredondando borda da colunas

Para arredondar a borda de uma sidebar, vamos usar as novidades do CSS3.
Vá em "Design" - "Editar HTML" e procure por #sidebar-wrapper {

Abaixo coloque o código caso NÃO tenha a linha border: .... ;

border-width: medium;
border-style: solid;
border-color: #0000FF;

em seguida coloque um dos seguinte código...

-moz-border-radius: 10px;
-webkit-border-radius: 10px;

-moz-border-radius: 9px 3px 9px 3px;
-webkit-border-radius: 3px;
-webkit-border-top-left-radius: 9px;
-webkit-border-bottom-right-radius: 9px;

-webkit-box-shadow: 5px 5px 8px #818181;
-moz-box-shadow: 5px 5px 8px #818181;
-moz-border-radius-topleft: 25px;
-moz-border-radius-bottomright: 25px;
-webkit-border-top-left-radius: 25px;
-webkit-border-bottom-right-radius: 25px;


Visualize e salve!

Obs. Testado  no template clássico do blogger.

Marcadores: ,

4 Comentários:

Às 22 de dezembro de 2010 01:07 , Blogger Jalls disse...

Olá. Dentro do editor HTML não tem #sidebar-wrapper { mesmo com a extensão. O que eu faço então para colocar o código?

 
Às 22 de dezembro de 2010 16:20 , Blogger Códigos Blogger disse...

@Jalls
É porque você está usando um template criado pelo blogger. Recomendo que instale outro template, que não seja criado pelo Editor de templates do blogger.

Aqui tem uns templates bem legais.

http://www.cblogger.tk/search/label/Templates

 
Às 20 de setembro de 2011 13:59 , Blogger Thyago disse...

Fiz a alteração da borda, mas as bordas arredondadas(com efeito sombreado, o terceiro que vc apresentou) que coloquei só aparecem no Google Chrome e no Firefox , no Internet Explorer continuam com os cantos "quadrados". Pode ter uma idéia do por que disso? Grato. E valew pelo post, estava procurando isso : )

 
Às 20 de setembro de 2011 16:11 , Blogger Códigos Blogger disse...

Isso é incompatibilidade.

 

Postar um comentário

Se você gostou deste artigo deixe um comentário!

Duvidas ou sugestões comentem aqui! =D
*Não insultar autor ou leitores da postagens
*Não pedir parceria por comentários
*Não publicar spam ou similar.

Assinar Postar comentários [Atom]

Links para esta postagem:

Criar um link

<< Página inicial