Bordas arredondadas sem imagem.
Agora a moda é Web 2.0 e até estilo já se atribuiu a este conceito. O layout Web 2.0 é composto por cores fortes, vivas, bordas arredondadas e letras grandes. Mas como fazer bordas arredondas? Existem várias maneiras:
| Abordagem | Pró | Contra |
|---|---|---|
| Substituir o elemento por uma imagem completa com bordas arredondadas. | Não há a necessidade de adicionar novos elementos que não têm significado semântico na sua página. | O elemento fica com tamanho fixo e caso seja redimensionado ficará distorcido |
| Utilizar imagem nos cantos da borda. | Os elementos não precisam ter tamanho fixo e a borda não fica distorcida. | Criação de elementos (div) extras sem significado(Antigamente, eram utilizadas tabelas para esse fim). |
| Utilizar javascript. | Facilidade de implementação. Menor trabalho. Não necessita de imagens. | São adicionados elementos à página dos quais você não tem conhecimento ou controle. |
Eu gosto da terceira abordagem porque é a mais simples. Você pode se livrar das bordas ou altera-las facilmente sem ter que mudar a estrutura do seu código. Para criar bordas arredondadas usando javascript, eu recomendo o jQuery Corner que é um plugin para jquery. Com ele você poderá criar bordas dos mais diversos tipos sem utilizar imagens com uma linha de código! Basta invocar o método corner utilizando o jquery. Veja o exemplo abaixo.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Exemplo do jQuery Corner</title>
<style type="text/css">
.bordas_arredondadas { background: #CEE574; }
</style>
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>
<script src='http://jqueryjs.googlecode.com/svn/trunk/plugins/corner/jquery.corner.js' type='text/javascript'></script>
<script type="text/javascript">
$().ready(function() {
$(".bordas_arredondadas").corner();
});
</script>
</head>
<body>
<div id="d1" class="bordas_arredondadas">
Esse div terá bordas arrendondas
</div>
</body>
</html>
A linha 12 do código acima é responsável por criar o efeito de bordas arredondadas no div d1. Note que eu utilizei a classe do div bordas_arredondadas como seletor do jquery. Dessa forma você pode ter vários elementos na página e utilizar uma única linha para criar o efeito em todos. Visite a página do plugin e verá que existem diversos outros efeitos disponíveis. Você poderá criar classes diferentes para cada tipo de efeito que utilizar na sua página e reduzir as linhas de código utilizadas.
Referências
O que você achou dessa postagem?
Tags: javascript, jquery
Excelente dica!
Eu já havia topado com essa feature do Jquery, mas não queira saber o que eu fazia antes disso...
Abraço,
Laércio
Olá Vinícios! Tudo bem?
Tenho uma suuuuper dúvida em relação ao formato padrão do Blogspot... disseram que era para fazer um upload do modelo do meu computador (para personalizar), mas quando fiz isso, naum deu certo. Primeiro fiz o upload do meu template oÔ (naum deu certo, lógico) depois fiz um upload da estrutura do meu blog (com as tags do Blogger) e tbm naum deu certo! Aff, não sei mais o que fazer... oderia me ajudar??
Fico agradecida desde já ^^
Tchau, tchau!! \o
Oi Raiza,
Desculpe a demora. Eu estava de férias e não vi o blog. Eu precisaria de mais informações para entender seu problema. O que você chama de 'não dar certo'? Ele não salva as alterações ou dá uma mensagem de erro? Verifique duas coisas:
1. Se seu blog está usando o modelo de templates do blogger ou se está usando o modelo antigo (clássico). O modelo antigo não funciona com os templates XML;
2. Se o seu blog estiver no modelo novo, quando você enviar o XML, se houver algum erro ele avisará dando uma mensagem de erro. A partir dessa mensagem é possível investigar o problema.
Pelo que eu entendi você fez o download do XML do seu blog e depois tentou fazer o upload novamente e deu erro, foi isso? Se foi isso eu imagino que você tenha aberto o arquivo num editor de texto. Talvez o editor tenha alterado o encode do arquivo que é, a grosso modo, a forma como as letras e caracteres são representados. Precisaria de mais detalhes Pra te ajudar melhor.
Obrigado pela visita.
Grande Vini!!! Gostei do seu blog está ótimo!! Um grande abraço desse seu amigo, manda notícias!
Ivan Queiroz
Grande Ivan, que surpresa MAIS QUE AGRADÁVEL! O blog está um pouco desatualizado porque estou sem tempo pra escrever mas em breve eu volto a atualizar. :)
Um abração!
Ola
poderia me ajudar
preciso de uma validacao com jquery
com alert
e nao com menssagem ao lado do campo
pode me ajudar
sao 14 form em torno de 350 campos
Obrigado Marcio
Marcio,
Eu recomendo usar este plugin de validação do jquery. Eu mostrei um exemplo de utilização dele (inclusive com personalização da exibição das mensagens de erro) nesta postagem. Como eu mostrei na postagem, você pode usar a função showErrors ou a função errorPlacement. Em caso de dúvida consulte a documentação do plugin.
Espero ter ajudado!
vc mostrou como coloca cantos arredondados, e agora como eu coloco borda?
Se você está falando sobre ter uma bordar de cor diferente em volta do div, eu creio que, devido as especificidades do plugin, você teria que ter um div externo com uma cor diferente e um valor de padding maior que zero. Aplicando o efeito do plugin a ambos os divs você conseguiria o efeito desejado.
Veja um exemplo baseado no exemplo original do artigo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Exemplo do jQuery Corner</title>
<style type="text/css">
.bordas_externas { background: black; padding: 5px; width:200px; }
.bordas_arredondadas { background: #CEE574; }
</style>
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>
<script src='http://jqueryjs.googlecode.com/svn/trunk/plugins/corner/jquery.corner.js' type='text/javascript'></script>
<script type="text/javascript">
$().ready(function() {
$(".bordas_arredondadas, .bordas_externas").corner();
});
</script>
</head>
<body>
<div id="d2" class="bordas_externas">
<div id="d1" class="bordas_arredondadas">
Esse div terá bordas arrendondas
</div>
</div>
</body>
</html>
Deu derto, vlw mano.
Só que uma vez eu achei um que vc colocava borda sem criar outro div, lembro que era só informar quantos pxs teia a borda, mas não estou achando.