Как сделать задний фон у заголовка?

Question

Задача следующая: есть задний фон и маленький заголовок. Нужно сделать так, чтобы надпись была по центру, а задний фон делал отступы от неё (15px, например).

В данном случае заголовок-MY LATEST WORK. Как Вы видите у картинки на заднем плане есть отступы от надписи, как это можно реализовать?

Answer 1

вот так?

div {
  display: flex;
  justify-content: center;
  background-color: lightgray;
}

span {
  padding: 0 20px;
  background-color: white;
}

<div>
  <span>MY LATEST WORK</span>
 </div>

Answer 2

Такой фон у заголовка можно сделать с помощью псевдоэлементов :before и :after.

* {
  margin: 0;
  padding: 0;
}

body {
  margin-top: 20px;
}

h1 {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  text-align: center;
  text-transform: uppercase;
  height: 30px;
  line-height: 30px;
  font-size: 33px;
}

h1:after {
  content: 'My latest work';
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  margin-left: 20px;
  
  text-align: left;
  font-size: 12px;
  color: white;
  padding: 0 0 0 10px;
}

h1:before {
  content: 'My latest work';
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  margin-left: calc(-100% - 20px);
  
  text-align: right;
  font-size: 12px;
  color: white;
  padding: 0 10px 0 0;
}

h1:after,
h1:before {
  background-color: lightgray;
  background-image: -webkit-repeating-radial-gradient(center center, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) 1px, transparent 1px, transparent 100%);
  background-image: -moz-repeating-radial-gradient(center center, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) 1px, transparent 1px, transparent 100%);
  background-image: -ms-repeating-radial-gradient(center center, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) 1px, transparent 1px, transparent 100%);
  background-image: repeating-radial-gradient(center center, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) 1px, transparent 1px, transparent 100%);
  -webkit-background-size: 3px 3px;
  -moz-background-size: 3px 3px;
  background-size: 3px 3px;
}

<h1>My latest work</h1>

Answer 3

* {
	box-sizing: border-box;
}


body {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
}

.subject {
	display: flex;
	height: 50px;
	align-items: center;
	color: gray;
}

.subject::after, .subject::before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background-image: repeating-linear-gradient(-45deg, transparent 0 2px, currentcolor 2px 4px);
}

.subject span {
	flex-shrink: 0;
	margin: 0 30px;
	font-weight: 1000;
}

<div class="subject">
	<span>MY LATEST WORKS</span>
</div>

Сделал с помощью flex'ов.

Отступы задаются от span (margin).

Цвет задаётся от класса .subject (color).

В основе лежит флекс контейнер, в котором находятся 3 элемента: 2 псевдоэлемента и один span . Псевдоэлементы делят между собой всю ширину контейнера и дают место под текст. Текст в свою очередь использует flex-shrink: 0 , что не даёт блоку текста сжиматься из-за псевдоэлементов.

Не знаю почему такое поведение у градиента, он неравномерный и выглядит не точно как на картинке, но в любом случае делался как пример.

БЛОГ НА HUSL

Как сделать задний фон у заголовка?

Ответы (3 шт):