Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá pessoal.
Estou com um problema em customizar uma box de informações.
É uma box que tem textos no meio e as bordas laterais são diferentes, com um detalhe nas pontas.. como mostra o exemplo que eu fiz: http://i.imgur.com/Kj9sciB.jpg
Já tentei fazer utilizando 2 <div>, uma embaixo com a border sólida e outra por cima com background branco. O problema é que o conteúdo dessa box varia, então os tamanhos também variam, não ficou prático.
Já tentei fazer utilizando pseudo-elementos para colocar o efeito na direita e na esquerda, porém o tamanho varia e fica bem ruim.
Também já tentei usar border-image, mas não ficou legal.
Alguém tem outra sugestão? :(
Valeu L. Henrique.
Vou testar daqui a pouco. Também me sugeriram ficar nos pseudo-elementos que é simples, então também vou retestar eles.
Só não entendi se o texto vai escapar do box.
Bom, minha é : http://www.border-image.com/
>
Já tentei fazer utilizando 2 <div>, uma embaixo com a border sólida e outra por cima com background branco. O problema é que o conteúdo dessa box varia, então os tamanhos também variam, não ficou prático.
Esta seria uma boa solução para o que você quer. Porque não ficaria prático? Mesmo com conteúdo variável você pode trabalhar com as dimensões em percentuais ou auto, ajustar a div sobreposta definindo um margin nas laterais e margin negativa no topo e bottom para que o background branco cubra as bordas escuras da div inferior.
Att.
Então pessoal, consegui utilizando pseudo-elementos mesmo.
Um coleguinha me ajudou de outro fórum.
Segue o código CSS:
.borda {
position:relative;
float:left;font-size:20px;
}.borda:before,.borda:after {
content:''; display:block;position:absolute;
border:1px solid black;.borda:before {
left:2px; border-right:none;
}.borda:after {
right:2px; border-left:none;
}
Rikas,
Acho que tenho duas sugestões... Eu fiz um teste no JSFiddle e percebi que em cima do box fica tudo ok (margin negativa no texto), mas percebi que sobrou um baita padding no fim do box. Tentei com SVG e não deu muito certo, mas ai me lembrei que existia a propriedade outerHeight no jQuery que pode nos ajudar bastante.
Veja o meu exemplo aqui no JSFiddle. Eu adicionei a função no botão pra ilustrar, mas basicamente o que você vai precisar está ai.
Pega os elementos textos (via className ou byId), calcula a altura deles com o outerHeight, remove com uma subtração simples e aplica no box (pode ser aplicado com parent(), next(), prev(), dependendo de como montar).
Isso te ajuda?