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.
Comments (4)
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;
isso funciona?
tentei e não aconteceu nada com minha div.
se alguem puder me ajudar: allan.sduarte@hotmail.com
Funciona sim, verifique se o caminho pro JQuery Corner está correto.
Excelente dica ! Só tem um problema, não funciona nos IE's da vida.
Escreva um Comentário