H1 stylized with center edge with css

Asked

Viewed 2,318 times

1

inserir a descrição da imagem aqui Hello, I wanted to put a border the same way it is in the image. I don’t know what you call this type of border, so it’s hard to search.

<h1> Destaques </h1>

-------------------------------- Highlights --------------------------------

I know it’s possible to do this with css, because I’ve used several bootstrap themes that use this with css. But I want to know how to do it manually.

In this case I realized that you cannot overwrite an image, because if you have a background-image you would have the letter scratched at the bottom.

inserir a descrição da imagem aqui

And if you took the background color and put it in transparent it would look like this:

inserir a descrição da imagem aqui

But it would have to stay that way:

inserir a descrição da imagem aqui

Like this site here: http://adtrends.com.br/sobre.php

inserir a descrição da imagem aqui

html css

  • Opa Amigo I think what you’re looking for is a div to stay around that header makes the test, you can put that div and put the same background , taking out the edges and positioned it above the line, and if you are going to use this title as link link is up the contact area.

  • the example site uses the ::before and ::after, using the Chrome and Firefox element inspector (direct button > inspect element) can help

4 answers

4

Buddy, I don’t know if you’re talking about the edge of the products, or about this HR next to the highlights. But if it’s about the products, it’s a simple 

border: solid 1px;

The highlights I would make a normal HR, and put the text inside a div superimposing HR, using position.

  • I’m talking about the highlights.

  • You know what this effect is called?

  • Diego Souza sent an example above: http://jsfiddle.net/btxdm6ut/

  • But I believe it’s object overlap.

  • It’s not just overlapping, there are several ways to do this. And overlapping is just one way to do it. And I believe that it is not the right one because with a transparent fund it would not work.

3

  • There is an error in the case and if the background has a background image? There would be no way the letter would be transparent.

  • background-color: transparent in H3, where I set white.

  • But there’s actually no mistake. I answered what you asked. Now it’s just an addendum.

  • The point is that you cannot keep the image on top, because it would bug if someone wanted to put a background-image. Having answered or not, I cannot accept the answer because it is wrong. would have to be like this site here. http://adtrends.com.br/sobre.php In this case what is being done only works on the white background or the background of the same color. But if it has a texture would go wrong.

  • 1

    Then explain better in your question and post an example image.

  • I have improved the explanation of the question

  • I added a LINK to my reply.

  • Since you answered first, I put as resolved.

Show 3 more comments

2


One way to do it without having to overlap is to use the pseudo-elementos after and before, follow the example:

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>

2

There is an excellent tutorial on the subject in the following link: Create Headings with Lines in CSS

Of the solutions proposed, my referred is using 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>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.