2

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

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

3 ответа 3

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>

0
1

вот так?

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

span {
  padding: 0 20px;
  background-color: white;
}
<div>
  <span>MY LATEST WORK</span>
 </div>
 

1

* {
	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 , что не даёт блоку текста сжиматься из-за псевдоэлементов.


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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.