Blog Web Standards » bordas arredondadas http://www.webstandards.blog.br Soluções para os problemas enfrentados pelos desenvolvedores HTML e CSS em seu dia-a-dia Tue, 20 Dec 2011 19:14:07 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Cantos arredondados no Internet Explorer (sem imagens) http://www.webstandards.blog.br/css/cantos-arredondados-no-internet-explorer-sem-imagens/ http://www.webstandards.blog.br/css/cantos-arredondados-no-internet-explorer-sem-imagens/#comments Tue, 09 Feb 2010 00:19:05 +0000 Carlitos http://www.webstandards.blog.br/?p=201 Artigos relacionados:
  1. Conditional comments para Internet Explorer Uma boa maneira de fugirmos dos hacks é usar os...
  2. Hover, focus e active em qualquer elemento no Internet Explorer 6 Uma das diversas limitações apresentadas pelo IE6 está relacionada ao...
  3. Hack para Internet Explorer 6 Em desuso. Esse código está ultrapassado em nosso padrão, então...
]]> Em desuso. Esse código está ultrapassado em nosso padrão, então evitamos usá-lo.

Com os recursos que temos atualmente, podemos fazer cantos arredondados diretamente pelo CSS para os browsers Firefox e Safari, graças a propriedades exclusivas de suas engines.

O CSS3 promete unificar tudo isso introduzindo a propriedade border-radius mas, até o momento, a melhor opção que temos é o DD_roundies, um script que possibilita fazermos bordas arredondadas sem imagens para os browsers mais populares: Internet Explorer 6, 7 e 8 além de Firefox e Safari (Google Chrome).

Explicação

Faça download do script DD_roundies e coloque o arquivo junto com o HTML. Caso o arquivo baixado esteja na mesma pasta que o arquivo HTML inclua esse js em seu HTML dentro da tag head:

...
<head>
  <title>Exemplo</title>
  <script type="text/javascript" src="DD_roundies_0.0.2a-min.js"></script>
</head>
...

Agora para colocarmos canto arredondado em algum elemento siga o exemplo.

Coloque dentro da tag body uma div:

...
<body>
  <div>Meu exemplo de canto arredondado</div>
</body>
...

Logo abaixo do código que colocou antes no head, inclua também o código para fazer os cantos arredondados que desejar e um CSS para que veja o que fez:

...
<head>
  <title>Exemplo</title>
  <script type="text/javascript" src="DD_roundies_0.0.2a-min.js"></script>
  <script type="text/javascript">
    DD_roundies.addRule('div', '10px', true);
  </script>

  <style type="text/css">
    div { border: 1px solid red; }
  </style>
</head>
...

Esse código que colocou é apenas para fazer os cantos arredondados em qualquer div com um raio de 10 pixel e funcionar em todos navegados (true). Quando for usar em seu dia-a-dia mude conforme a necessidade, por exemplo:

...
DD_roundies.addRule('div.conteudo ol li', '20px', true);
...

ou assim, com cantos diferentes:

...
DD_roundies.addRule('div.topo .busca form', '20px 0 0 20px', true);
...

Essa ordem usada para deixar os cantos diferentes é a seguinte: Top-Left, Top-Right, Bottom-Left e Bottom-Right.

Veja o exemplo de pronto com cantos arredondados. Caso tenha uma dúvida, comente!

O interessante de usar essa técnica para todos os browsers (incluindo Firefox e Safari) é que mantemos nosso CSS limpo e sua aplicação mostrou-se muito eficaz, já que não se faz mais necessário o uso de imagens para fazer os cantos arredondados.

O único porém que percebi até o momento é no uso das bordas arredondadas para Internet Explorer 8, não mostrando a propriedade background-image caso utilizada.

Artigos relacionados:
  1. Conditional comments para Internet Explorer Uma boa maneira de fugirmos dos hacks é usar os...
  2. Hover, focus e active em qualquer elemento no Internet Explorer 6 Uma das diversas limitações apresentadas pelo IE6 está relacionada ao...
  3. Hack para Internet Explorer 6 Em desuso. Esse código está ultrapassado em nosso padrão, então...
]]> http://www.webstandards.blog.br/css/cantos-arredondados-no-internet-explorer-sem-imagens/feed/ 34