Cantos arredondados com CSS e JavaScript

Quinta-feira, 23 de Março, 2006 | 35 comentários

Para quem trabalha com a dobradinha xHTML e CSS, sabe da "dor de cabeça" que é para arredondar os quatros cantos de um bloco. No mínimo, você teria que usar 4 elementos, com 1 background para cada canto.

Pois bem. Nesta última semana, estive testando o Nifty Corners Cube, criado pelo Alessandro Fulciniti, e achei muito interessante.

A solução foi testada com sucesso nos browsers IE5.5, IE6 e IE7 beta 2 preview, Opera 8.5, Firefox 1.5 e Safari 2.0.

Em primeiro lugar, você não precisa de imagens para fazer o arredondamento. O seu funcionamento é um tanto quanto simples: no evento onLoad da janela é feito a chamada a função do Nifty.

Exemplo (veja online):

<script type="text/javascript">
window.onload=function(){
Nifty("div#box","big");
}
</script>

Explicando: O primeiro parâmetro da função é o nome da camada onde qual será aplicado o efeito. O segundo parâmetro é uma palavra-chave que indica o tipo de arredondamento que será feito (vide tabela abaixo).

No exemplo acima, aplicou-se o arredondamento de tamanho maior (big) na camada #box. Pode-se ainda aplicar o efeito em várias camadas, separando-as por vírgula (veja um exemplo). Da mesma forma, pode-se aplicar utilizando várias palavras-chaves, separando-as por espaço (veja um exemplo).

palavra-chave	significado
tl	canto superior esquerdo
tr	canto superior direito
bl	canto inferior esquerdo
br	canto inferior direito
top	cantos superiores
bottom	cantos inferiores
left	cantos da esquerda
right	cantos da direita
all (padrão)	todos os cantos
none	nenhum dos cantos
small	tamanho dos cantos pequenos (2px)
normal (padrão)	tamanho dos cantos normal (5px)
big	tamanho dos cantos maior (10px)
transparent	aplica transparência do canto para o preenchimento interno (veja um exemplo)
fixed-height	para ser aplicado quando uma altura (height) é fixa e definida no CSS

Para maiores informações, veja: Nifty Corners Cube.

35 comentários:

Felipe Diesel disse:

O único problema que vi, foi o fato dele não arrdendondar as bordas... mas mesmo assim é muito útil.

Leonardo A. Souza disse:

Tava procurando um jeito de arredondar bordas sem usar imagens a um tempão. Finalmente! Só falta arredondar bordas como disse o Felipe...

Ciro Feitosa disse:

O CSS3 promete trazer o arredondamento de bordas, com a propriedade border-radius. Maiores informações em http://www.w3.org/Style/Examples/007/roundshadow1.html.

PC disse:

manu...coloca umas tutorias legais de dreamweaver ,eu gosto muito de usar ele pra meus projetos e umas tutorias ajudam....abraços.

Pedro Rogério disse:

Já conhecia esse site, bem legal o efeito!!!!

Leonardo A. Souza disse:

Eu uso o Firefox e ele nao reconhece os "arredondamentos" do CSS3... Só nos resta esperar, afinal o CSS3 ta em desenvolvimento... Valeu Ciro!

Cosme disse:

Enquanto não chega à tona o CSS3 acho que essa forma de cantos arredondados é a melhor/mais semântica.

Rubens de Souza Silva disse:

Td bom Ciro?
Gostei bastante desse post... muito útil. Parabéns pelo site, muito legal.

Abraços

André de Castro Zorzo disse:

Só para contribuir com mais dois links que fazer efeitos legais, inclusive arrendondamento de bordas...

<a href="http://script.aculo.us/">http://script.aculo.us/</a>
<a href="http://openrico.org/">http://openrico.org/</a>

Baita abraço!

Cleber Moreira disse:

Não rodou copiei o código fonte da página do primeiro exemplo e peguei o arquivo javascript niftycube.js coloquei tudo na mesma pasta.
E nada.
Tem mais algum detalhe?

Ciro Feitosa disse:

Cleber,

Sim, precisa de um CSS onde você deve colocar na mesma pasta do JavaScript. Baixe o CSS em <a href="http://pro.html.it/niftycube/niftycorners.css">http://pro.html.it/niftycube/niftycorners.css</a>.

Abraço!

Michael disse:

Levei um tempão até descobrir como usa. Tem um arquivo ZIP no final da pagina. Baixe ela que tem os CSS e os arquivos necessários.
Para quem não quer se esforçar:
http://pro.html.it/niftycube/NiftyCube.zip

pai natal disse:

este blog até é interresante...
pá o blog k ta ai a bombar é o seguinte:
http://texugovoador.blogspot.com/
É EXCELLENTE

Monthiel disse:

Muito bacana, muito útil, parabéns pelo seu site, o design está fantástico..

Abraços

Dinho disse:

Achei perfeito, já usei muito em meus projetos, o único problema que percebi depois de muito tempo foi a utilização do mesmo no AJAX, quando acessamos através do "AMIGO" IE, ele carrega direitinho, mas ao mudar o tema do windows, ela separa as linha que fazem o arredondamento. Claro que ninguém vai ficar alterando o tema do windows ao acessar um site...rs, mas o preoblema maior é que, em ALGUNS computadores com o winXP, acontece isso quando acessado normalmente. Eu tenho o WinXP e não acontece, mas o meu chefe tem o mesmo SO que eu e acontece sempre...rs
Um grande abraço, e se alguém tiver uma solução ou passou por problemas parecido, compartilhe, valeu!!!

felipe setlik disse:

haha! Imagino a cena: "Ô, chefe! Olha que massa essse efeito que coloquei no nosso site..."

brunnolou disse:

Os links estão quebrados....
Podem encontrar aqui:
<a href="http://css.html.it/articoli/leggi/1611/nifty-corners-cube-angoli-arrotondati-mai-cosi-fac/1/">http://css.html.it/articoli/leggi/1611/nifty-corners...</a>

Espero ter contribuido, esse artigo merece! muito util

JRN INFO disse:

Achei muito boa a materia vou testar, e começar a usar em meu site, Abraço a todos

ZÉNABALADA.COM.BR disse:

GOSTARIA DE SABER COMO FAÇO PRA ARREDONDAR OS CANTOS DAS TABELAS SEM USAR O CSS E SIM TABELAS MESMO!
OBRIGADO

k1k0borba disse:

Ciro funcionou direitinho com o mozilla , mas no IE nao funciona com o fundo cinza(gray), por que será ???
Alguem ja teve esse problema ?

Falow Abraço a todos, ate mais!

Mayco disse:

Muito massa esses efeitos, da para fazer muita coisa com eles, parabéns pelo trabalho!!!!

Gustavo Campos disse:

Ciro, estou tentando utilizar um em cima do outro, para o que fica por trás servir como borda de 2px de outra cor do que o que fica por cima, porém o que fica por cima fica com a cor(background) do que \\

Thiago Reis Pontes disse:

Nossa... Muito bom, estava procurando a um bom tempo uma forma de arredondar os cantos dos box\\\'s. Sempre fazia com imagens mas nunca ficava satisfeito com o resultado final, não que as caixas não ficavam com boa qualidade, mas sim pela complexidade do código.
Valeu.

Matheus disse:

nossaaaa...valeew!!!
estava tentando arredondar os cantos e naum conseguia, aí então axei a resposta aqui...
isso é sensacional arredondei tudu que eu pude!!!!
valew cara!!!!
beijos

rudimar disse:

uma beleza... gastei horas tentando fazer funcionar... nao funciona nada...

acho que tem que entender com mais profundidade esta história de css, até etendendo algo, mas pelo o que vi ai nisto daí, descobri que nao sei é de nada.

Abri todas as paginas, olhei o codigo fonte deles, bem enfim... nao entendi, e nao funcionou nada...

nao sei como tem gente dizendo ai: OHH!! é maravilhoso... acho que esse pessoal nao testou é nada...

google disse:

a idéia é boa mas dá muito trabalho e o pior é q mesmo assim não funciona perfeitamente

Gerson disse:

Meu deus!
Com esse monte de trambolho no meu código eu acabei desistindo de usar.

Muito complicado ainda a utilização.
Bastante código para um resultado que nao é prioridade na maioria das vezes em seu site.

Hailton Assis da Silva disse:

Eu achei muito bom mas só ficou faltando um exemplo completo de como é feito os links vão para uma página completamente em inglês e eu sou péssimo. Não consegui compreender.
Pode me enviar um e-mail com exemplo?
Um abraço

Ronnie disse:

Sou mais CSS Puro

Borda Arredondada sem utilizar imagens

.bordaBox {bbackground: ttransparent; width:30%;}
.bordaBox .b1, .bordaBox .b2, .bordaBox .b3, .bordaBox .b4, .bordaBox .b1b, .bordaBox .b2b, .bordaBox .b3b, .bordaBox .b4b {display:block; overflow:hidden; font-size:1px;}
.bordaBox .b1, .bordaBox .b2, .bordaBox .b3, .bordaBox .b1b, .bordaBox .b2b, .bordaBox .b3b {height:1px;}
.bordaBox .b2, .bordaBox .b3, .bordaBox .b4 {background:#CECECE; border-left:1px solid #999; border-right:1px solid #999;}
.bordaBox .b1 {margin:0 5px; background:#999;}
.bordaBox .b2 {margin:0 3px; border-width:0 2px;}
.bordaBox .b3 {margin:0 2px;}
.bordaBox .b4 {height:2px; margin:0 1px;}
.bordaBox .conteudo {padding:5px;display:block; background:#CECECE; border-left:1px solid #999; border-right:1px solid #999;}

Box com bordas arredondadas sem utilizar imagens
Fácil utilização e implementação com CSS puro!

Diogo Braga Mednes disse:

Muito, mas tem como aplicar a função a uma camada de uma arquivo *.css externo?
Testei aqui e não consegui, coloquei da mesmo forma só que utilizei uma chamada LINK.
Obrigado!

Anderson Dorneles disse:

Olá, gostei muito do artigos e dos exemplos, porem não sei se procurei direito, não achei pra baixar algum exemplo desse css, e ja q ele usa uma função script, achei tb q teria q baixar ela. To tentanto por bordas arrendondadas nesse site :www.gurupifacil.com/site/

Qualquer coisa me add no msn.

Anderson Dorneles

Fabiano Shark disse:

O uso do Nifty é muito mais simples flexível! Mas para quem quiser o exemplo de CSS PURO que o Ronnie postou aí em cima, o HTML fica assim:

>lt;div class=\'bordaBox\'>gt;
>lt;div class=\'b1\'>gt;>lt;/div>gt;
>lt;div class=\'b2\'>gt;>lt;/div>gt;
>lt;div class=\'b3\'>gt;>lt;/div>gt;
>lt;div class=\'b4\'>gt;>lt;/div>gt;
>lt;div class=\'conteudo\'>gt;
Mensagem teste, mensagem teste>lt;br>gt;
mensagem teste, mensagem teste>lt;br>gt;
mensagem teste, mensagem teste>lt;br>gt;
mensagem teste, mensagem teste.>lt;br>gt;
>lt;br>gt;
Mensagem teste, mensagem teste>lt;br>gt;
mensagem teste, mensagem teste>lt;br>gt;
mensagem teste, mensagem teste>lt;br>gt;
mensagem teste, mensagem teste.
>lt;div class=\'b4\'>gt;>lt;/div>gt;
>lt;div class=\'b3\'>gt;>lt;/div>gt;
>lt;div class=\'b2\'>gt;>lt;/div>gt;
>lt;div class=\'b1\'>gt;>lt;/div>gt;
>lt;/div>gt;

--
Abraços,
Fabiano Shark
http://blog.fshark.com

Chris Benseler disse:

Algum dia o CSS3 vai acabar com isso! hehe

Abraço!

Gustavo disse:

Muito bom post, uma outra forma bem legal e simples de fazer Canto arredondado sem imagem foi postada no Blog Web Standards ( http://www.webstandards.blog.br/css/cantos-arredondados-no-internet-explorer-sem-imagens/ ).

Toni Roger Bonete disse:

Show de bola o script, estou usando em um sistema de representação que estamos desenvolvendo, funciona direitinho...Parabêns.

Blog

Cantos arredondados com CSS e JavaScript

35 comentários:

Comente: