12 de janeiro de 2010

Div com cantos arredondados usando JQuery

Algo muito útil que eu descobri esses dias foi uma forma de arrendondar os cantos de uma div de maneira muito simples usando JQuery. Você não precisa usar imagens e com poucas linhas de código sua div estará com os cantos suavizados e sem serrilhados.

Para isso, além do JQuery, você precisa instalar o plugin JQuery Corner.

Primeiramente, para usar o plugin, você precisa importar o JQuery e o JQuery Corner adicionando as seguintes linhas entre as tags <head></head>:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>

Lembre-se o que o conteúdo do src pode variar de acordo com a localização do JQuery e do JQuery Corner no computador.

Vamos usar o código HTML abaixo como exemplo:

<html>
    <head>
        <style type="text/css">
            #main {
                background-color: #0055CC;
                color: #FFFFFF;
                text-align: center;
                padding: 5px 0px;
            }
        </style>

        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="jquery.corner.js">
        </script>        
    </head>

    <body>
        <div id="main">
            <h1>yLog</h1>
        </div>
    </body>
</html>

Para arredondar os cantos da div #main precisamos apenas adicionar as seguintes linhas de código javascript entre as tags <head></head>:

<script type="text/javascript">
    $(document).ready(function() {
        $('#main').corner("15px");
    });
</script>

Onde "15px" define o tamanho da suavização da borda.

Existem outros efeitos aplicáveis aos cantos da div. Veja a documentação do JQuery Corner.

O JQuery Corner facilita muito o trabalho de fazer esse tipo efeito. Você não precisa usar nenhuma imagem, tudo é feito com javascript e o resultado não podia ser melhor.

4 comentários:

  1. Eu uso direto os atributos de css para fazer isso. É claro que não dá para esperar muita coisa de navegadores antigos.

    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;

    ResponderExcluir
  2. isso funciona?
    tentei e não aconteceu nada com minha div.
    se alguem puder me ajudar: allan.sduarte@hotmail.com

    ResponderExcluir
  3. Funciona sim, verifique se o caminho pro JQuery Corner está correto.

    ResponderExcluir
  4. Excelente dica ! Só tem um problema, não funciona nos IE's da vida.

    ResponderExcluir