Rounded corners – Cantos arredondados e como fazê-los
Não Esqueça .com
Home » cantos arredondados • css • exemplos • html • javascript • praticando • rounded corners » Rounded corners – Cantos arredondados e como fazê-los
cantos arredondados, css, exemplos, html, javascript, praticando, rounded corners
Atualmente os cantos arredondados, são uma grande dor-de-cabeça no desenvolvimento, pois existem vários modos de implementar, com uma, duas ou quatro imagens?, sem imagens?, só com css?, javascript? qual javascript utilizar?, essas questões incomodam a cada vez que é necessário implementar este tipos de borda, que até o presente momento, não tem como serem feitas somente com css, quem sabe um dia, quando o css3 for lançado.
Mas enquanto esta e muitas outras melhorias no css3 não chegam e não vão chegam nem tão cedo, temos que nos virar com o que temos, então abaixo listarei algumas técnicas que são as mais interessantes de se implementar, cada uma tem suas vantagens e desvantagens.
A imagem para criar os cantos arredondados é esta aqui embaixo, para o fundo branco e sem borda, o procedimento para criar a imagem é simples, faça um box de cantos arredondados, em seu software de edição de imagens preferido, e corte um dos cantos, faça uma imagem como a abaixo, colocando os cantos de forma que cada um fique na posição oposta ao outro.
Crie um div para segurar todo o conteúdo do box arredondado e outros dois, um para os cantos de cima e o outro para os cantos de baixo, com mais um dentro de cada um, parece complicado? mas olhe o código abaixo é bem simples…
<div class="wrap-rounded_corners">
<div class="top_corners">
conteúdo do box
<div class="bottom_corners">
</div><!-- /wrap-rounded_corners -->
/* define o estilo para o box que segura todo o conteúdo
o overflow hidden é para esconder o que estiver para
/* define que todos os divs abaixo terão posição relativa,
/* define que esta div tem o posicionamento relativo à esquerda negativa em 10px,
/* define que esta div tem o posicionamento relativo à direita negativa em 30px,
um bug do IEca que aparentemente não tem explicação para estar ocorrendo,
Você pode conferir aqui este exemplo funcionando.
Este tipo de canto arredondado é para um box com largura fixa, o procedimento é simples, é so criar duas imagens, uma com cantos arredondados de cima, e outra com os cantos de baixo, como estas do exemplo abaixo.
Agora, é só criar dois divs, como no exemplo abaixo, um dentro do outro e colocar uma classe em cada um, se quizer caso não queira não tem necessidade, mas é melhor para nao haver problemas, de herança de estilos, com outras divs que possam estar dentro do box:
</div><!-- /bottom_corners -->
</div><!-- /top_corners -->
Esta div é para segurar todo o conteudo do box de cantos arredondados,
e esta div é para os cantos inferiores, coloca-se a imagem dos cantos
inferiores com alinhamento ao rodape, esta div não deve ter cor de fundo,
pois caso tenha irá "esconder" os cantos superiores, e um espaçamento
para não ter nenhum conteúdo sobre os cantos.
Estes foram dois exemplos simples para dar a direção de como podem ser feitos boxes com cantos arredondados, existem uma grande variedade de possibilidades para fazer os cantos arredondados, é só colocar a cabeça para funcionar que surgirão idéias para resolver o problema.
Agora mostrarei alguns javascripts para fazer os cantos arredondados que você irá ver os prós e contras para ver se é melhor ou pior que fazer com imagens, um ponto a favor é que são "menos trabalhosos" de se implementar e um contra, se o site for "grande e/ou pesado" pode demorar "renderizar" os cantos arredondados.
O primeiro exemplo é o do transcorners, que foi criado por um(a) "cara" ou site chamado Inviz , que o site não está mais no ar, pelo menos não esta pagina, que por acaso eu so consegui depois de sofrer muito em achar para deixar de exemplo, e so me dei esse trabalho porque é um bom script.
Você pode conferir o exemplo funcionado. (em inglês)
Não sei se utilizei todas as configurações disponiveis no exemplo, caso não tenham sido, me avise que coloco todas as propriedades possiveis. Este script é bastante simples de ser implementado e compreendido, ele pode ser conferido aqui.
Esses foram somente alguns exemplos de como colocar em prática os cantos arredondados, caso queira mais algum exemplo vc pode usar um de seus amigos, o Google ou o Yahoo, ou o seu site de buscas preferido, ou este excelente link no CssJuice com uma lista de 25 técnicas diferentes de cantos arredondados.
[]´s e até o próximo post, que pretendo que não demore tanto novamente.
Share it! Article by Anderson Solano
jQuery plugin para rolagem suave de âncoras	Bug no IE, limite de regras por arquivo css	desabilitar plugin do skype na página	Palestra Engenharia de frontend de alta performance	Comments (2)
Chris	dezembro 25, 2007
Firmino	dezembro 25, 2007
Show de bola, parabéns
Arquivo	agosto 2011 (1)
Últimos posts	jQuery plugin para rolagem suave de âncoras
Verdades estão aí para serem ditas.
desabilitar plugin do skype na página
Últimos comentáriosAnderson Solano em jQuery plugin para rolagem suave de âncorasMarinho em jQuery plugin para rolagem suave de âncorasCesar em Bug no IE, limite de regras por arquivo cssCesar em desabilitar plugin do skype na páginaRafael Cardoso em desabilitar plugin do skype na página	Categoriasacessiblidade