Todos nós já vimos pela web designs “Web 2.0″, com os cantos arredondados usando CSS para posicionar imagens de forma a dar essa “ilusão”. Embora essas imagens sejam “leves” do ponto de vista de bandwidth, o site sem elas daria menos trabalho ao browser que consequentemente o carregaria mais rapidamente e o visitante agradeceria concerteza.
Parece algo distante do nosso tempo, mas é algo que se encontra a ser trabalhado e estará disponível em CSS 3. Provavelmente estão a pensar: “Mas ainda falta algum tempo para que as especificações finais de CSS 3 fiquem disponíveis, mais tempo para que os browsers as suportem na totalidade…”.
Dou-vos um pouco de razão aí, mas à excepção do IE (para variar um pouco) os frameworks que alimentam os browsers mais conhecidos já começam a suportar – de uma forma nativa porque as especificações de CSS 3 ainda não se encontram muito bem acordadas – algumas das melhores novidades da terceira versão de Cascading Style Sheet.
Uma dessas grandes novidades é a que refiro no título deste artigo, que (felizmente) já se encontra nos frameworks (Gecko, Webkit, KHMTL e Presto) mais conhecidos.
Vamos então ao que interessa. Os próximos exemplos, só não serão visíveis aos internautas que estejam a ver o artigo com o Internet Explorer (lamento fãs do IE).
Heis exemplos de divs com os cantos arredondados
Com um Radius de 7 pixeis
Com um Radius de 14 pixeis:
Com um Radius de 75 pixeis (circulo perfeito, cool hã?):
Agora o código CSS:
Exemplo com Radius de 7 pixeis:
div {
-moz-border-radius:7px; /* Firefox, etc */
-khtml-border-radius:7px; /* Konqueror, etc */
-webkit-border-radius:7px; /* Safari, Google Chrome, etc */
-opera-border-radius:7px; /* Opera */
}
12 Novembro, 2008 às 0:18
Muito boa a tua dica. Nem testei, mas com certeza ainda não havia encontrado algo de útil em CSS.
Parabéns.
Atenciosamente
Lucas Oliveira – POA RS
12 Novembro, 2008 às 0:45
Obrigado Lucas.
Não compreendi muito bem o que disse, mas concerteza foi algo de bom.
Abraço!
SDL
2 Janeiro, 2009 às 4:15
Estou usando o Opera 9.62 e os DIVs não foram exibidos arredondados.
2 Janeiro, 2009 às 10:07
Obrigado Marcelo!
Vejo que teremos que aguardar…
Abraço!
6 Janeiro, 2009 às 6:13
Infelizmente o opera 9.63 ainda não tem suporte ao border-radius
[...]
Outra coisa interessante do CSS é o opacity
opacity:0.65;
-moz-opacity: 0.65;
filter: alpha(opacity=65);
29 Janeiro, 2009 às 5:31
não consegui fazer funcionar no opera, aparece tudo quadrado no 9.6 e no 10 alpha. tem algum segredo? rsrs
29 Janeiro, 2009 às 11:22
Olá Rafael!
Obrigado pelo seu comentário.
Infelizmente não parece resultar com o Opera. Este ainda não parece suportar tal capacidade.
Abraço!
Sérgio
29 Janeiro, 2009 às 14:56
É estranho isso acontecer,
o Opera 10 passou no teste do Acid3 http://acid3.acidtests.org/
29 Janeiro, 2009 às 15:09
Olá Duke!
Não é tão estranho assim. Esta é uma propriedade que ainda irá sair oficialmente com CSS 3.
Alguns já decidiram implementar esta propriedade nos seus frameworks via códigos internos (uma iniciativa, a meu ver, inteligente, porque desta forma será mais fácil “activar” o suporte assim que CSS3 “sair”), outros, preferem aguardar pela especificação oficial, como parece ser o caso do Opera.
Abraço!
19 Abril, 2009 às 6:56
pois é… mas no Mozila funciona perfeitamente já. fiquei muito feliz em saber. Sempre achei que canto arredondado, alpha, e giro deviam prazer parte da Css, pelo menos alguns deles já estão presentes.
5 Maio, 2009 às 11:25
Tô usando o IE 7.0 e não nele não tô vendo o arredondamento!!
Abs,
Alessandro
5 Julho, 2009 às 15:07
O arredondamento, é apenas visível no Firefox, Safari ou Chrome.
Abraço!
5 Julho, 2009 às 17:09
Bom depois de 6 meses voltei aki…
O Opera 10 ainda nao tem suporte ainda
a rumores que o IE8 suporta CSS2.1, talvez no IE16 vejamos algo de CSS3 funcinando nele
Flw
20 Agosto, 2009 às 16:12
Como sempre o IE é sempre o último a se atualizar. Nada se faz com este navegador. E meu professor ainda tem a coragem de dizer que é o melhor navegador! ><"
4 Setembro, 2009 às 11:30
Já utilizei em alguns projetos meus estas funcionalidades (projetos pequenos que não tem problemas com carga) mas ainda ficamos por desejas nos browsers atuais… o google esta realmente revolucionando e acredito que vai acabar ditando as regras nesta área também!
O CSS3 está muito bom de se trabalhar (apenas com testes por enquanto), uma delícia a liberdade que ele permite!
Ótimo tópico que levantaste aqui!
Parabéns!
31 Outubro, 2009 às 18:18
o teu artigo está interessante, só que no IE 8 não funciona!
11 Novembro, 2009 às 2:26
valeu geral pela dica!! uso o firefox e funcionou certinho na div q to construindo
abs
30 Novembro, 2009 às 14:51
Olá, eu usei essas propriedades ai, e funcionou perfeitamente no firefox, más quando uso a -webkit-border-radius para o chrome, não faz nada, não arredonda nada, saberia me dizer o porque disso?
hehe! vlw ai
abraço.
.-= William´s last blog ..Flagrante de superlotação no Camboja =-.
8 Agosto, 2010 às 0:11
Descobri como fazer a borda arredondada no Opera 10.60(versão q eu uso)…
Como dito ali nos ultimos parágrafos:
“Podem também acrescentar a propriedade “border-radius” ao código, dado que essa será provavelmente a que sairá nas especificações finais de CSS 3.”
A função border-radius já ta funcionando no Opera 10.60, estou usando ela no meu site, ta igual com -moz-border-radius no firefox, ficaram identicos os 2…
Agora falta só 1 para o IE