Cantos arredondados em todos os browsers – jQuery Corner

jQuery Corner - Example

jQuery Corner – Example

Olá,  galera pra manter a frequencia que prometi a mim mesmo to vim com mais um post interessante, hoje vou falar de como usar aqueles cantos arredondados que quase todo design coloca em um projeto ou outro, vejo muitas pessoas colocando imagens e tendo terriveis trabalhos para resolver isso, tem até algumas dicas muito boas de como fazer isso no site/blog do maujor, porém oferecer uma simples e fácil que poderá ser usado na maioria de seus, projetos, digo maioria, pois já tive alguns projetos com um design tao incrivel (absurdo) que ficava dificil usar o que estou à lhes mostrar.

Maujor explicando sobre cantos arredondados em box: http://maujor.com/tutorial/box-arred.php

Porém já temos varios browsers que já usam o CSS3 o que permite cantos arredondados de forma fácil, porém NÂO funciona no bendito IE, mas é bom ter noção que existe, é algo bem simples de se usar basta inserir, as seguintes linhas no css do elemnto desejado como um div, código abaixo permite todos os cantos ficarem com 7px de curvatura(acho que é assim que se fala):

div{
  -moz-border-radius:7px;
  -webkit-border-radius:7px;
  border-radius:7px;
}

Para saber mais leia um post que fala bem sobre isso em Design.Blog – Como criar cantos arredondados com CSS3:
http://design.blog.br/web-design/como-criar-cantos-arredondados-com-css3

Porém isso tudo na minha opnião é muito trabalhosso quando temos que nos preocupar com IE em geral que não aceita o CSS3 ainda, porém venho lhes oferecer um plugin em jQuery que pode lhe ajudar muito a resolver esse problema de forma simples mega rápida.

Primeiramente é bom que tenha um pequena noção de jQuery para fazer isso, porém caso não tenha não é dificil de entender, primeiro temos que carregar o jQuery no html depois o plugin de cantos arredondados (corners), você pode mais como fazer o que foi ensinar no link abaixo que é a página oficial do plugin criado pelo Dave Methvin, no site você pode baixar o plugin:

jQuery Corner: http://jquery.malsup.com/corner/

Código

No html você irá colocar o jquery e o plugin da seguinte forma, e uma das coisas legais é que não precisa adicionar CSS de nada, vejamos como adicionar abaixo:

<html>
 <head>
 <title>Titulo da pagina>
 <script type="text/javascript" src="http:www.SEUSITE.com/js/jquery.min.js" />
 <script type="text/javascript" src="http:www.SEUSITE.com/js/jquery.corner.js" />
 <script>
 <!-- aqui entra a parte onde voce define o que quer arredondar -->
 jQuery(document).ready(function($){
 $('div#box_arredondada').corner();
 $('div.arredondados_pilulas').corner("100px");
 });
 </script>
 <style>
 /* coloca cor no fundo para ver as bordas*/
 .arredondados_pilulas,
 #box_arredondada{
 background-color: #000000;
 }
/* deixa a div que nao sera arredonda com borda pra ver a
diferença */
 .nao_arredonda{
 border: 1px solid #ff00ff;
 }
 </style>
</head>
 <body>
 <h3>Titulo 3 de pagina</h3>
 <div id="box_arredondada">
 Aqui entra o conteudo desejado, e nao precisa fica preocupado com a altura e largura,
 pois o plugin se adapta automaticamente, o que é otimo.
 </div>
 <div class="nao_arredonda"></div>
 <div class="arredondados_pilulas"></div>
 <div class="arredondados_pilulas"></div>
 <div class="arredondados_pilulas"></div>
 </body>
 </html>

Ao ler o código acima se faz claro o que se pode fazer com o plugin, porém esse post so descreve se forma simples e rápida ao entra no site oficial do plugin você verá que pode colocar vários tipos de borndas e vários tamanhos de arredondamentos.

Espero que ajude, pois tem me ajudado e muito.
abraços

, , , , , ,

Comments are closed.