web-dev-qa-db-fra.com

Ligne avant et après le titre sur l'image

Je veux créer un ligne avant et après un titre centré. La ligne et le texte doivent avoir un fond transparent pour pouvoir les positionner sur un fond irrégulier. La ligne ne doit pas avoir une largeur de 100%, comme ceci:

Centered text with line before and after over an image

Le texte du titre peut changer:

  • La largeur du titre n'est pas connue
  • Le titre peut s'étendre sur plusieurs lignes
h1 {
  text-align: center;
  border-bottom: 1px solid #000;
}
<h1>Today</h1>
csscss3css-shapes
35
JUO

Vous pouvez faire un ligne des deux côtés du titre avec 2 pseudo-éléments et bordures:

  • Cela fonctionne sur un fond transparent (les lignes et le titre ont un fond transparent).
  • La longueur de la ligne s'adaptera à la largeur du titre afin qu'ils commencent et se terminent toujours à la même position indépendamment de la longueur du titre.
  • Le titre peut s'étendre sur plusieurs lignes tandis que les lignes gauche et droite restent centrées verticalement ( Notez que vous devez encapsuler le titre dans un <span> tag pour que cela fonctionne. Voir la démo )

Title with line before and after over an image

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
 body {
  background-image: url(http://i.imgur.com/EzOh4DX.jpg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  font-family: 'Open Sans', sans-serif;
}
h1 {
  width: 70%;
  margin: .7em auto;
  overflow: hidden;
  text-align: center;
  font-weight:300;
  color: #fff;
}
h1:before, h1:after {
  content: "";
  display: inline-block;
  width: 50%;
  margin: 0 .5em 0 -55%;
  vertical-align: middle;
  border-bottom: 1px solid;
}
h1:after {
  margin: 0 -55% 0 .5em;
}
span {
  display: inline-block;
  vertical-align: middle;
}
<h1>Today</h1>
<h1>Today news</h1>
<h1><span>Today<br/>news</span></h1>
53
web-tiki

Voici une autre approche en utilisant flexbox display. The flex-grow La propriété spécifie comment l'espace libre doit être réparti entre les éléments lorsque leur taille totale est inférieure à la taille du conteneur.

Par défaut, aucun width n'est spécifié sur les éléments qui produisent les lignes et ils n'ont pas de content (ce qui signifie qu'ils sont essentiellement vides et ne prennent pas de place). Cependant, le flex-grow la mise en place de ces éléments rendrait l'espace restant (espace total du conteneur - espace du texte) réparti également entre eux. Cela donne l'impression que la ligne va de bout en bout, sauf là où se trouve le texte.

Ligne continue de chaque côté du contenu:

Dans l'extrait ci-dessous, un dégradé de haut en bas est utilisé pour produire l'effet d'avoir une ligne continue de chaque côté du contenu.

h3{
  display: flex;
  flex: 1;
  width: 70%;
  margin: 20px auto;
  line-height: 1em;
}
.heading:before, .heading:after,
.heading-ie span.after, .heading-ie span.before{
  content: '';
  flex-grow: 1;
  margin: 0px 4px;
  background: linear-gradient(to right, white, white);
  background-size: 100% 2px;
  background-position: 0% 50%;
  background-repeat: repeat-x;
}

/* Just for demo*/
body{
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<h3 class='heading'>Something broader</h3>
<h3 class='heading'>Something broader and broader</h3>
<h3 class='heading'>Something broader<br/> and spans multiple <br/> no. of lines</h3>

<!-- IE11 specific version -->

<h3 class='heading-ie'>
  <span class='before'></span> <!-- IE11 supports flex-grow only on actual elements -->
  Something broader and broader and broader
  <span class='after'></span> <!-- IE11 supports flex-grow only on actual elements -->
</h3>

enter image description here

Ligne avec effet de dégradé de chaque côté du contenu:

Dans l'extrait ci-dessous, un léger dégradé de gauche à droite est utilisé pour produire l'effet d'une ligne qui va d'une couleur unie près du contenu à une transparence de l'autre côté.

h3{
  display: flex;
  flex: 1;
  width: 70%;
  margin: 20px auto;
  line-height: 1em;
}
.heading:before, .heading:after,
.heading-ie span.after, .heading-ie span.before{
  content: '';
  flex-grow: 1;
  margin: 0px 4px;
  background-size: 100% 2px;
  background-position: 0% 50%;
  background-repeat: repeat-x;
}
.heading:before, .heading-ie span.before{
  background-image: linear-gradient(to right, transparent, white);
}
.heading:after, .heading-ie span.after{
  background-image: linear-gradient(to left, transparent, white);
}

/* Just for demo*/
body{
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<h3 class='heading'>Something broader</h3>
<h3 class='heading'>Something broader and broader</h3>
<h3 class='heading'>Something broader<br/> and spans multiple <br/> no. of lines</h3>

<!-- IE11 specific version -->

<h3 class='heading-ie'>
  <span class='before'></span> <!-- IE11 supports flex-grow only on actual elements -->
  Something broader and broader and broader
  <span class='after'></span> <!-- IE11 supports flex-grow only on actual elements -->
</h3>

enter image description here

Remarque: Dans l'extrait de code, j'ai utilisé un élément supplémentaire span pour les lignes car IE11 ne semble pas prendre en charge flex-grow sur les pseudo-éléments. Sinon, la même chose peut être obtenue avec un pseudo-élément également.

L'inconvénient de cette approche est le support du navigateur pour cette fonctionnalité, qui est assez faible pour le moment. Vous devrez peut-être également adopter certaines personnalisations spécifiques au navigateur qui sont détaillées dans ma réponse ici qui est similaire à cela.

À l'heure actuelle, cela ne donne rien de plus que la réponse de web-tiki mais est juste une autre option possible. Cette approche serait plus utile dans les cas comme ci-dessous :

h3{
  display: flex;
  flex: 1;
  width: 70%;
  margin: 20px auto;
  line-height: 1em;
}
.heading-ie .start, .heading-ie .middle, .heading-ie .end{
  content: '';
  flex-grow: 1;
  margin: 0px 4px;
  background: linear-gradient(to right, white, white);
  background-position: 0% 50%;
  background-size: 100% 2px;
  background-repeat: repeat-x;
}

/* Order specifies the order in which the elements should be presen within container */

.content-1{
  order: 2;
}
.start{
  order: 1;
}
.middle{
  order: 3;
}
.content-2{
  order: 4;
}
.end{
  order: 5;
}

/* Just for demo*/

body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<h3 class='heading-ie'>
  <span class='start'></span> <!-- IE11 supports flex-grow only on actual elements -->
  <span class='content-1'>Text here</span>
  <span class='middle'></span> <!-- IE11 supports flex-grow only on actual elements -->
  <span class='content-2'>and here too</span>
  <span class='end'></span> <!-- IE11 supports flex-grow only on actual elements -->
</h3>

<h3 class='heading-ie'>
  <span class='start'></span> <!-- IE11 supports flex-grow only on actual elements -->
  <span class='content-1'>Text with <br/> line break</span>
  <span class='middle'></span> <!-- IE11 supports flex-grow only on actual elements -->
  <span class='content-2'>and here with <br/> line break too</span>
  <span class='end'></span> <!-- IE11 supports flex-grow only on actual elements -->
</h3>

enter image description here

15
Harry