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 */
}
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
Obrigado Lucas.
Não compreendi muito bem o que disse, mas concerteza foi algo de bom.
Abraço!
SDL
Estou usando o Opera 9.62 e os DIVs não foram exibidos arredondados.
Obrigado Marcelo!
Vejo que teremos que aguardar…
Abraço!
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);
não consegui fazer funcionar no opera, aparece tudo quadrado no 9.6 e no 10 alpha. tem algum segredo? rsrs
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
É estranho isso acontecer,
o Opera 10 passou no teste do Acid3 http://acid3.acidtests.org/
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!
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.
Tô usando o IE 7.0 e não nele não tô vendo o arredondamento!!
Abs,
Alessandro
O arredondamento, é apenas visível no Firefox, Safari ou Chrome.
Abraço!
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
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! ><"
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!
o teu artigo está interessante, só que no IE 8 não funciona!
valeu geral pela dica!! uso o firefox e funcionou certinho na div q to construindo
abs
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 =-.
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
Olá Sérgio, muito bom garoto!
Mas… Tenho uma perguntinha, se alguém puder responder gostaria de saber.
Já que o IE é um dos navegadores mais usados no mundo, por que a RAPOSA em uma volta e outra sempre está superando o IE, isso é falta de interesse da Microsoft ou realmente é muita dedicação da RAPOSA?
Já que muito se ler alguém reclamando, ah, tal recurso em javascript não funciona no IE, tal comando em CSS não funciona no IE. É muita gente que reclama de falta de suporte do IE as inovações de seus sites. É crítica a coisa, mas acho que a RAPOSA está deslizando o pelo nos garranchos. (risos)
está tudo quadrado nos exemplos hehehe
parabens muito boa a dica se todos fosem assim
O Internet Explorer só existe por causa do Windows!
Essa é a unica explicação!
mas não se preocupe, temos agora o ie 6, 3% quase extinto,
O problema agora é o IE 7,8,9,10 e possivelmente o 11…haja teste de navegadores não….