Bordas arredondadas com CSS sem usar imagens -
Estamos terminando o site de pré-lançamento. Quem chegou ver o Screenshot, pode perceber que todo o conteúdo é baseado em um box com bordas arredondadas sem utilizar imagens.
Lá vai nossa pergunta: Qual é a melhor forma de se fazer isso? Há muitas maneiras. Nesse caso, utilizamos essa, postado no site: códigofonte.com.br pelo Gabriel Fróes.
Vamos lá:
CSS:
.bordaBox {background: transparent; width:98%;padding-left:4px;}
.bordaBox .b1, .bordaBox .b2, .bordaBox .b3, .bordaBox .b4, .bordaBox .b1b, .bordaBox .b2b, .bordaBox .b3b, .bordaBox .b4b {display:block; overflow:hidden; font-size:1px;}
.bordaBox .b1, .bordaBox .b2, .bordaBox .b3, .bordaBox .b1b, .bordaBox .b2b, .bordaBox .b3b {height:1px;}
.bordaBox .b2, .bordaBox .b3, .bordaBox .b4 {background:#eff7e0; border-left:0px solid #eff7e0; border-right:1px solid #eff7e0;}
.bordaBox .b1 {margin:0 5px; background:#eff7e0;}
.bordaBox .b2 {margin:0 3px; border-width:0 2px;}
.bordaBox .b3 {margin:0 2px;}
.bordaBox .b4 {height:2px; margin:0 1px;}
.bordaBox .conteudo {padding:0px 10px 0px 10px;display:block; background:#eff7e0; border-left:0px solid #eff7e0; border-right:1px solid #eff7e0;}
HTML
Conteúdo do site.
Podem testar, funciona! Testamos com firefox, ie7 e ie6. Atestamos que realmente é uma forma bem elegante.
Qualquer dúvida, fiquem a vontade.
Wesley, testei seu código e realmente funciona no Firefox 3 e Internet Explorer 6. Porém tomei a liberdade de faze algumas alterações e ponderações que permitem sua dica continuar a funcionar.
Em primeiro lugar, troquei as tags por . A primeira é normalmente utilizada para dar ênfase enquanto a segunda é utilizada para definir um bloco de estilo do conteúdo.
Depois, confesso não entender o motivo de ter se repetido “.bordaBox” em todas as classes (ex.: .bordaBox .b1, .bordaBox .b2 …). Então notei que funcionava da mesma forma com ou sem, por isso retirei. “background: transparent;” no estilo “.bordaBox” também parecia não fazer sentido uma vez que o documento era renderizado da mesma forma sem a definição. O mesmo com “overflow:hidden;” pois não havia conteúdo dentro das tags de classe .b1 a .b4.
Foram definidas classes para .b1b, .b2b, etc mas em nenhum momento do documento html elas eram utilizadas. As removi também!
Para finalizar, percebi que a div “conteúdo” deveria, obrigatoriamente ter conteúdo ou então ser definida uma altura mínima. E também que nessa mesma div, não poderia começar e terminar com a tag e , respectivamente. Mesmo que fosse definida uma tag antes.
Exemplo que não funciona:
Conteudo
Gostaria de entender melhor sua dica, para saber se é possível fazer a borda com canto mais arrendodado.
E deixo aqui o link dos testes que eu fiz para entender e filtrar o código: http://www.int.awm.com.br/~henrique
(int = servidor interno | awm = nome empresa | ~henrique = meu ambiente de testes)
De qualquer forma, obrigado pelo tutorial. Foi de muita utilidade. Espero que possa ter, de alguma forma, contribuido de volta. Sinta-se à vontade para entrar em contato por email.
Atenciosamente,
Henrique Mattos
Comentário by Henrique Mattos — 09/07/2008 @ 17:29
Olá Henrique,
Primeiramente agradeço a sua contribuição com nosso blog. Sabemos que há várias formas de fazer a mesma coisa.
Vamos por parte:
- Sobre a utilização de .bordaBox .b1, .bordaBox .b2, .bordaBox, etc..
evita conflito com códigos legados, ou seja, se você já tivesse algum elemento .b1, nesse caso ele não seria afetado.
- Sobre o background:transparent: Muitas vezes no inicio da folha de estilo ele define que todas as divs tem fundo preto, ou amerelo, azul, isso garante que nesse caso independente do código legado essa css vá funcionar.
De forma geral, tudo que você disse tem toda razão, pode funcionar, porém, com a elaboração da css nesse caso, ela garante que as bordas vão funcionar em QUALQUER código legado de CSS com classes e elementos pré-estabelecidos.
Já existe uma forma padrão de se fazer bordas redondas, incluindo o dimensionamento, depois te passo o link, porém ela só funciona em IE7 e Firefox, logo, nossos visitantes de IE6 verão tudo quadrado.
Grande abraço e contamos sempre com sua visita em nosso blog.
Wesley
Comentário by Wesley — 09/07/2008 @ 20:54
Correção: aonde lê-se “Em primeiro lugar, troquei as tags por .” deveria ser “Em primeiro lugar, troquei as tags strongs por span.
Comentário by Henrique Mattos — 10/07/2008 @ 11:03
Na realidade o meu original também estava assim. Porém quando postei no editor do blog ele alterou.
Estamos alinhados?
Abraços
Comentário by Wesley — 11/07/2008 @ 12:28
Genial! Elimina a necessidade de se trabalhar com imagens, e pior, pngs com fundo transparente! Grato pela solução.
Danilo.
Comentário by Danilo Filgueira Mendonça — 28/10/2008 @ 11:41
Aew cara … que legal seu codigo … muito bom !!! Parabens pela contribuiçao a comunidade que se mata com uns POG’S pra resolver essas dificuldades … gostei da soluçao … um abraço e fica com DEUS !!!
Comentário by Odlanier — 10/11/2008 @ 17:27
Obrigado, mas esse código não é meu.. Apenas postamos aqui..Há em diversos sites.
Espero que o verdadeiro autor leia isso e de um comentário para fazermos a referência dele.
Abraços
Comentário by Wesley — 21/11/2008 @ 8:12
Cara parabéns funcionou perfeitamente… muito grato mesmo amigao.. e boa sorte ai.. o cara é fera =D
Comentário by Wenderson Sá — 27/02/2009 @ 10:25
muito bom, cara! era isso mesmo que eu queria! valeeeu.
Abraaço =D
Comentário by Tito Guillermo — 22/03/2009 @ 9:59
Olá Wesley gostei muito do código é extremamente prático e funciona, porém não consegui me organizar de forma a fazer que o mesmo aceitasse dentro da caixa com cantos arredondados um layout de duas colunas, uma localizada a esquerda e outra a direita. Você consegue resolver esse problema? grato.
Comentário by Felipe Callori — 25/03/2009 @ 12:09
Olá com uma melhor pesquisada consegui resolver meu problema, coloquei a div superior com display:table; e as divs de conteudo com display:column;
sendo que a coluna da esquerda fica como float:left; e a coluna da direita fica como float:right; ficando mais ou menos assim:
HTML(considere que isto esta dentro do código para deixar bordas arredondadas de uns 700px):
Conteúdo lado esquerdo.
Conteúdo lado Direito.
CSS:
#conteudo
{
width:700px;
display:table;
}
#left
{
float:left;
display:column;
width:450px;
}
#right
{
float:right;
display:column;
width:100px;
}
antes somente utilizando float left e float right eu destruia a tabela de canto arredondado.
flwss
Comentário by Felipe Callori — 26/03/2009 @ 9:34
o site nao deixou eu digitar html rsrs
Comentário by Felipe Callori — 26/03/2009 @ 9:35
ola queridos, ola chará.
Bom eu vi este script no codigofonte e o que me incomodou as ideias foi entender pela logica o que acontece nele, pois como vi utilizamos as tags de bold não é mesmo? mais não consegui entender como bold pode se tornar borda, no entanto achei excelente melhor do que adicionar radiun ou ate mesmo como o maujor colocar imagens.
Aguardo explicação.
Comentário by Wesley Fernandes — 14/09/2009 @ 23:19
Muito bom este artigo, estava procurando isso a muito tempo…. Valew…
Comentário by Diones — 09/10/2009 @ 16:48
mto bom esse tut, só n entendi pra q q serviu essa parte do código: “.bordaBox .b1b, .bordaBox .b2b, .bordaBox .b3b, .bordaBox .b4b”
Comentário by Felipe Cardoso — 12/10/2009 @ 1:24
muuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuito boa essa ideia, jamais imaginaria isso!
Valeu
Comentário by Charles — 21/11/2009 @ 10:09