1

inserir a descrição da imagem aqui Olá, queria colocar uma borda da mesma maneira que está na imagem. Não sei como chama este tipo de borda, então fica difícil pesquisar.

<h1> Destaques </h1>

-------------------------------- Destaques --------------------------------

Sei que é possível fazer isto com css, pois já usei vários temas bootstrap que usam isto com css. Porém quero saber como fazer manualmente.

No caso percebi que não pode sobrepor uma imagem, pois se tiver um background-image ficaria com a letra riscada no fundo.

inserir a descrição da imagem aqui

E se tirasse o background color e colocasse transparente ficaria assim:

inserir a descrição da imagem aqui

Mas teria que ficar assim:

inserir a descrição da imagem aqui

Igual a este site aqui: http://adtrends.com.br/sobre.php

inserir a descrição da imagem aqui

2
  • Opa Amigo acho que o que você esta procurando é uma div para ficar em volta desse cabeçalho faz o teste, você pode colocar essa div e por o mesmo plano de fundo , tirando as bordas e posicionado ela encima da linha, e se você for usar esse titulo como link link fica até maior a área de contato.
    – mtperes
    8/09/2015 às 21:51
  • o site de exemplo utiliza os ::before e ::after, utilizar o inspetor de elementos do Chrome e Firefox (botão direto > inspecionar elemento) pode ajudar 9/09/2015 às 12:36

4 Respostas 4

4

Amigo, não sei se você está falando da borda dos produtos, ou sobre esse HR junto ao destaques. Mas caso seja sobre os produtos, é um simples

border: solid 1px;

Os destaques eu faria um HR normal, e colocaria o texto dentro de uma div sobrepondo o HR, usando position.

5
  • Estou falando dos destaques. 8/09/2015 às 14:26
  • Sabe como se chama este efeito? 8/09/2015 às 14:33
  • O Diego Souza mandou um exemplo acima: jsfiddle.net/btxdm6ut 8/09/2015 às 14:34
  • Mas, acredito que seja sobreposição de objetos. 8/09/2015 às 14:46
  • Não é apenas sobreposição, existem várias maneiras de fazer isto. E sobreposição é apenas uma maneira de fazer. E acredito que não seja a correta pois com um fundo transparente não iria funcionar. 8/09/2015 às 17:24
3

Veja esse exemplo:

http://jsfiddle.net/btxdm6ut/

Com position: absolute.

A borda está com valor solid, mas se quiser colocar tracejada pode usar dotted ou alguma imagem e colocar como background-image.


Veja com fieldset.

http://jsfiddle.net/bLoz10by/1/

8
  • Tem um erro, no caso e se o fundo tiver um background image? Não teria como a letra ficar transparente. 8/09/2015 às 17:23
  • background-color: transparent no H3, onde eu defini branco. 8/09/2015 às 17:28
  • Mas na verdade não tem um erro. Eu respondi o que você perguntou. Agora é apenas um adendo. 8/09/2015 às 17:30
  • A questão é que não pode ficar com a imagem por cima, pois daria bug caso alguém quisesse colocar um background-image. Tendo respondido ou não, não posso aceitar a resposta pois está errada. teria que ser como este site aqui. adtrends.com.br/sobre.php No caso o que está sendo feito só funciona no fundo branco ou do fundo da mesma cor. Porém se tiver uma textura daria errado. 8/09/2015 às 17:47
  • 1
    Então explique melhor na sua pergunta e poste uma imagem de exemplo. 8/09/2015 às 17:56
2

Uma maneira de fazer sem precisar de sobreposição é usar os pseudo-elementos after e before, segue o exemplo:

h1 {
  text-align: center;
  position: relative;
}
h1:before,
h1:after {
  content: "";
  width: 35%;
  height: 1px;
  background: #555;
  position: absolute;
  top: 50%;
}
h1:before {
  left: 0;
}
h1:after {
  right: 0;
}
<h1>Meu título</h1>

0
2

Existe um exelente tutorial sobre o assunto no seguinte link: Create Headings with Lines in CSS

Das soluções propostas, a minha referida é utilizando Flexbox:

h1 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  text-align: center;
}
h1:before, h1:after {
  background-color: #ddd;
  content: '\a0';
  flex-grow: 1;
  height: 1px;
  position: relative;
  top: 0.5em;
}
h1:before {
  margin-right:10px;
}
h1:after {
  margin-left:10px;
}
<h1>Destaques</h1>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .