Давайте разберём 5 разных подходов к стилизации заголовков. Я подготовил примеры, которые расширяют вашу идею с линиями и добавляют новые техники.
1. Заголовок с «прорубленной» линией (Line-Through)
Этот стиль похож на ваш пример, но линия проходит сквозь текст, который перекрывает её своим фоном. Это создает очень современный, «журнальный» вид. 📖
Код
<style>.line-through-header {
display: flex;
align-items: center;
text-align: center;
}
.line-through-header::before,
.line-through-header::after {
content: "";
flex: 1;
border-bottom: 2px solid #4bb;
}
.line-through-header::before {
margin-right: 15px;
}
.line-through-header::after {
margin-left: 15px;
}</style>
display: flex;
align-items: center;
text-align: center;
}
.line-through-header::before,
.line-through-header::after {
content: "";
flex: 1;
border-bottom: 2px solid #4bb;
}
.line-through-header::before {
margin-right: 15px;
}
.line-through-header::after {
margin-left: 15px;
}</style>
2. Эффект «Маркера» (Highlighter)
Текст выглядит так, будто его выделили текстовыделителем. Здесь мы используем linear-gradient, чтобы закрасить только нижнюю часть строки. 🖌️
Код
<style>.marker-header {
display: inline;
background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
background-repeat: no-repeat;
background-size: 100% 0.4em;
background-position: 0 80%;
padding: 0 5px;
}</style>
display: inline;
background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
background-repeat: no-repeat;
background-size: 100% 0.4em;
background-position: 0 80%;
padding: 0 5px;
}</style>
3. Двойная подчеркивающая линия разной длины
Вместо обычного text-decoration, мы создаем две аккуратные линии под заголовком, которые делают акцент более изящным. 📐
Код
<style>.double-underline {
position: relative;
padding-bottom: 15px;
}
.double-underline::before,
.double-underline::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
height: 3px;
background-color: #4bb;
}
.double-underline::before {
width: 50px;
}
.double-underline::after {
width: 25px;
bottom: -7px; /* Смещение второй линии ниже */
}</style>
position: relative;
padding-bottom: 15px;
}
.double-underline::before,
.double-underline::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
height: 3px;
background-color: #4bb;
}
.double-underline::before {
width: 50px;
}
.double-underline::after {
width: 25px;
bottom: -7px; /* Смещение второй линии ниже */
}</style>
4. Текстовая тень с эффектом объема (3D Soft)
Использование нескольких слоев text-shadow позволяет создать мягкий, «выпуклый» эффект без использования картинок. ✨
Код
<style>.soft-3d-header {
color: #fff;
background: #4bb; /* Фон для контраста */
padding: 20px;
text-shadow:
1px 1px 1px #3aa,
2px 2px 1px #3aa,
3px 3px 1px #3aa;
font-weight: bold;
text-transform: uppercase;
}</style>
color: #fff;
background: #4bb; /* Фон для контраста */
padding: 20px;
text-shadow:
1px 1px 1px #3aa,
2px 2px 1px #3aa,
3px 3px 1px #3aa;
font-weight: bold;
text-transform: uppercase;
}</style>
5. Скобки вокруг текста (Bracket Header)
Псевдоэлементы можно использовать для создания декоративных рамок или скобок, которые появляются только по краям текста. ⛓️
Код
<style>.bracket-header {
position: relative;
display: inline-block;
padding: 0 20px;
}
.bracket-header::before,
.bracket-header::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 10px;
border: 2px solid #4bb;
}
.bracket-header::before {
left: 0;
border-right: none; /* Оставляем только левую скобку */
}
.bracket-header::after {
right: 0;
border-left: none; /* Оставляем только правую скобку */
}</style>
position: relative;
display: inline-block;
padding: 0 20px;
}
.bracket-header::before,
.bracket-header::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 10px;
border: 2px solid #4bb;
}
.bracket-header::before {
left: 0;
border-right: none; /* Оставляем только левую скобку */
}
.bracket-header::after {
right: 0;
border-left: none; /* Оставляем только правую скобку */
}</style>
Заключение.
Каждый из этих стилей можно адаптировать под ваш дизайн, меняя цвета и толщину линий. Мы можем разобрать один из них подробнее или попробовать скомбинировать несколько эффектов.
