Cantos arredondados

Na minha opinião existem pequenos detalhes numa página WEB que por mais insignificantes que sejam tornam a página mais agradável.
Um desses detalhes é os cantos de uma pagina, ou de certos elementos da página, que por serem completamente rectos dão um ar de "caixa" a uma página. (disse caixa porque não encontrei palavras para me exprimir como gostava).
Com o constante avanço da linguagem web, podemos encontrar regularmente inovações que podem ser aplicadas e tornar o "nosso cantinho" mais apelativo.

Não vou incentivar ninguém a mudar de navegador, mas o que vou explicar a seguir (à semelhança de outras alterações que já fiz) não é possível ser visualizado no Internet Explorer. Cada vez mais reparo que o navegador da Microsoft não consegue acompanhar a evolução e por isso este artigo apenas se destina a quem usa o Firefox, o Safari, o Google Crome ou o Opera.

O que vou explicar é a forma de arredondar os cantos do blog ou areas do blog.

Para isso é necessário entrar na edição do código fonte do blog e na parte de edição de estilos, que está compreendida entre as tags e , procuramos a área que queremos alterar.
As areas são as seguintes:
#header - corresponde ao cabeçalho do blog.
#outer-wrapper - corresponde ao corpo do blog na totalidade.
#main-wrapper - corresponde à coluna onde se publicam os artigos.
#sidebar-wrapper - corresponde à coluna lateral.
#footer - corresponde ao rodapé do blog.

Existem também outras areas que podem ser alterada, como por exemplo a de citação (.post blockquote) a do rodapé do artigo (.post-footer) ou até a da imagem (.post img).
Resumindo, qualquer parte do blog em que se possa adicionar um contorno (border) pode ser alterado com este código.

Depois de encontrar a area a alterar basta adicionar os seguintes códigos no estilo da mesma:

-moz-border-radius:7px;
-webkit-border-radius:7px;
-opera-border-radius:7px;

Neste código a medida usada, 7px, pode ser alterada (quanto maior o valor, maior o arco de curvatura)
A primeira linha destina-se ao Firefox, a segunda ao Safari e Google Crome e a terceira ao Opera.

O efeito final é o que podem ver no contorno da área onde inseri os códigos e que também pode ser visto no corpo deste blog.

Existe ainda a possibilidade de aplicar este efeito apenas a alguns cantos individualmente e para isso, no Firefox, é necessário adicionar, logo depois da palavra radius e antes dos 2 pontos os seguintes parâmetros:
topleft - canto superior esquerdo
topright - canto superior direito
bottomleft  - canto inferior esquerdo
bottomright - canto inferior direito

Para os outros navegadores adiciona-se entre a palavra border e a palavra radius o seguinte:
-top-right
(como devem entender top e right pode ser mudado para o canto que queremos alterar)

O código final para o canto superior direito e canto inferior esquerdo (como exemplo) é o seguinte:

-moz-border-radius-topright:7px;
-moz-border-radius-bottomleft:7px;
-webkit-border-top-right-radius:7px;
-webkit-border-bottom-left-radius:7px;
-opera-border-top-right-radius:7px;
-opera-border-bottom-left-radius:7px;

Ler mais...

Fechar...