Ciro Feitosa

• Início
• Sobre
• Projetos
• Blog
• Cursos
• Hospedagem
• Contato

Blog

Cantos arredondados com CSS e JavaScript

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

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

32 comentários

#1 | Felipe Diesel disse:

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

#2 | 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...

#3 | Ciro 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.

#4 | PC disse:

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

#5 | Pedro Rogério disse:

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

#6 | 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!

#7 | Cosme disse:

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

#8 | Rubens de Souza Silva disse:

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

Abraços

#9 | André de Castro Zorzo disse:

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

http://script.aculo.us/
http://openrico.org/

Baita abraço!

#10 | 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?

#11 | Ciro disse:

Cleber,

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

Abraço!

#12 | 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

#13 | pai natal disse:

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

#14 | Monthiel disse:

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

Abraços

#15 | 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!!!

#16 | felipe setlik disse:

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

#17 | brunnolou disse:

Os links estão quebrados....
Podem encontrar aqui:
http://css.html.it/articoli/leggi/1611/nifty-corners...

Espero ter contribuido, esse artigo merece! muito util

#18 | JRN INFO disse:

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

#19 | 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

#20 | 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!

#21 | Mayco disse:

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

#22 | 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 \\

#23 | 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.

#24 | 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

#25 | 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...

#26 | google disse:

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

#27 | 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.

#28 | 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

#29 | 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!

#30 | 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!

#31 | 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

#32 | 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

Deixe o seu comentário

As imagens que aparecem são Gravatars. Ao registrar um, sempre que comentar em algum blog que suporte essa funcionalidade, sua imagem aparecerá ao lado. Se você ainda não tem um gravatar, crie aqui.