Cantos arredondados com CSS e Java script sem a utilização de imagens

Esse artigo é uma tradução de alguns trechos que explica o Nifty Corners criado pelo Alessandro Fulciniti. O Nifty Corners é uma combinação de CSS e Java script para gerar cantos arredondados sem a necessidade de imagens. A técnica é composta de quatro elementos essenciais e que juntos pesam menos de 6kb:

1. Arquivo CSS para screen
2. Arquivo CSS para print
3. Arquivo Java script para gerar o Nifty Corners
4. O código Java script para chamar os elementos

Os três primeiros componentes não necessitam de mudanças, apenas ser incluídos dentro da Tag HEAD :

<link rel=”stylesheet” type=”text/css” href=”niftyCorners.css”>
<link rel=”stylesheet” type=”text/css” href=”niftyPrint.css” media=”print”>
<script type=”text/javascript” src=”nifty.js”></script>

O quarto elemento é necessário para passar os parâmetros para o Nifty Corners, o bloco de código Java script é esse:

window.onload=function(){
if(!NiftyCheck())
return;
Rounded(“div#nifty”,”all”,”#FFF”,”#D4DDFF”,”smooth”);
}

A função NiftyCheck verifica se há a suporte para DOM. Se o teste passar, a função Rounded é chamada. Para iniciar o arredondamento é necessário informar cinco parâmetros, nessa ordem:

1. Um seletor de CSS que indique qual elemento será arredondado
2. Uma string que indique quais cantos serão arredondados
3. Cor exterior dos cantos arredondados
4. Cor interna dos cantos arredondados
5. Um quinto parâmetro opcional que conterá as opções especiais para o Nifty Corners

Primeiro parâmetro: o seletor do CSS

Os parâmetros aceitos pelo Nifty Corners para arredonda elementos são:

• Tags: p, blockquote ou h2
• Seletor ID com a tag do elemento especificada, por exemplo: “div#content” ou “p#news” ou “li#home”
• Seletor de classe com a tag do elemento especificada, por exemplo: “div.entry” ou “h2.highlight”
• Seletor de agrupamentos, tem que ser composto por um seletor ID e seguido por uma Tag. Os exemplos válidos são: “div#news div” ou do “li ul#menu”

Segundo parâmetro: especificando os cantos que serão arredondados

Vamos ver outra vez a chamada do Java script para o primeiro exemplo:

Rounded(“div#nifty”,”all”,”#FFF”,”#D4DDFF”,”smooth”); ,

O segundo parâmetro especifica quais cantos serão arredondados. Podendo ser um ou mais dos seguintes keywords que devem ser separados por um espaço:

• all: todos os cantos redondos
• top: cantos superiores redondos
• bottom: cantos inferiores redondos
• tl: canto alto-esquerdo redondo
• tr: canto alto-direito redondo
• bl: canto fundo-esquerdo redondo
• br: canto fundo-direito redondo

Você também pode combinar os keywords. Por exemplo, você pode usar o parâmetro do “top br” para arredondar os cantos superiores e fundo-direito. Observe que os parâmetro “top bottom” e “br tl tr bl” também são válidos e geram todos os quatro cantos arredondados.

Terceiro e quarto parâmetros: especificando as cores

Vamos olhar outra vez a chamada do Java script para o primeiro exemplo:

Rounded(“div#nifty”,”all”,”#FFF”,”#D4DDFF”,”smooth”);

Os terceiros e quartos parâmetros são usados para especificar a cor externar e interna. Deve ser especificado o código hex com # símbolo, em três ou seis dígitos. A notícia boa é que pode ser transparente “transparent”. Você não pode gerar ambas as cores transparentes, somente uma.

Quinto parâmetro: opções especiais do Nifty Corners

Está aqui é a chamada do Java script para o primeiro exemplo:

Rounded(“div#nifty”,”all”,”#FFF”,”#D4DDFF”,”smooth”);

Como você pode ver, há um quinto parâmetro informado “smooth”, que serve para gerar cantos arredondados suavizados. O quinto parâmetro é opcional. Alguns keywords que você poder usar:

• smooth: suavizar os cantos aplicando um antialias automaticamente, que é gerado pelo Javascript que computará automaticamente a cor intermediária para misturar delicadamente a cor interna e extenar, neste caso ambas as cores devem ser especificada.
• border: (seguida por uma cor no código hex com # símbolo, em três ou seis dígitos) fará cantos com bordas. Observe que você pode também gerar cantos transparentes, mas fora das bordas.
• small: cantos pequenos

Os exemplos

Exemplo um: um único div com antialias
Este é o exemplo do inicio. A chamada do Javascript é:

Rounded(“div#nifty”,”all”,”#FFF”,”#D4DDFF”,”smooth”);

Neste caso todos os cantos foram arredondados com um antialias muito claro.

Exemplo dois: divs dos irmãos
Neste exemplo, dois divs foram arredondados. As chamadas dos js são:

Rounded(“div#content”,”all”,”#FFF”,”#9DD4FF”,”smooth”);
Rounded(“div#nav”,”tr br”,”#FFF”,”#FFC79D”,”smooth”);

Exemplo três: transparente
Este é uma das melhorias mais significativas do nifty corners. Você apenas tem que especificar a cor exterior e “transparente” para a cor interna:

Rounded(“div#box”,”all”,”#6385D8″,”transparent”);

Exemplo quatro: com ou sem elas
Neste exemplo, eu pus dois divs que compartilham da mesma classe em uma página. Um deles não tem uma ID,

Rounded(“div#nifty”,”top”,”transparent”,”#FFC5FF”,”border #C0C0C0″);
Rounded(“div#nifty”,”bottom”,”transparent”,”#F0F0E7″,”small border #C0C0C0″);

Exemplo cinco: explosão da cor
Neste exemplo, eu usei o seletor e a transparência do descendente para dentro nos quatro elementos redondos, mas apenas em dois cantos opostos. Está aqui a única chamada do Javascript:

Rounded(“div#news div”,”tr bl”,”#FFF”,”transparent”);

Código do tutorial: Webtutoriais:8BACF0AC