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
<div class="bordaBox"> <strong class="b1"></strong><strong class="b2"></strong><strong class="b3"></strong><strong class="b4"></strong> <div class="conteudo">Conteúdo do site.</div> <strong class="b4"></strong><strong class="b3"></strong><strong class="b2"></strong><strong class="b1"></strong> </div>
Podem testar, funciona! Testamos com firefox, ie7 e ie6. Atestamos que realmente é uma forma bem elegante.
Qualquer dúvida, fiquem a vontade.
Loading ...
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
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
Correção: aonde lê-se “Em primeiro lugar, troquei as tags por .” deveria ser “Em primeiro lugar, troquei as tags strongs por span.
Na realidade o meu original também estava assim. Porém quando postei no editor do blog ele alterou.
Estamos alinhados?
Abraços
Genial! Elimina a necessidade de se trabalhar com imagens, e pior, pngs com fundo transparente! Grato pela solução.
Danilo.
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 !!!
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