Cantos arredondados com CSS e JavaScript

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.

Anúncios

Deixe um comentário

Arquivado em CSS . Cascading Style Sheets

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s