HTML/CSS

Фон под текстом

С фоном у текста есть проблема – у элемента с display: inline при переносах текста не работают отступы (padding) по бокам. Исправить  это можно следующими способами:

1

Вариант №1 – разметка тегами

Первый вариант так себе, но работает – обвернуть каждую строку в <span> и добавить переносы строк <br>.

<h1 class="title">
    <span>Lorem Ipsum is simply</span>
    <br><span>dummy text of the printing</span>
    <br><span>and typesetting industry</span>
</h1>
HTML
.title {
    font-size: 50px;
    line-height: 56px;    
    color: #000;
}
.title span {
    padding: 0 10px;
    background: rgba(37,219,237,0.8);
}
CSS
2

Вариант №2 – box-shadow

Второй без лишних тегов. Отступы задаются с помощью box-shadow: -10px 0 0 #FE8020, 10px 0 0 #FE8020;.

<h1 class="title">
    <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry</span>
</h1>
HTML
.title {
    font-size: 50px;
    color: #000;
    padding-left: 10px;
    line-height: 59px;
}
.title span {
    display: inline;
    background-color: #FE8020;
    box-shadow: -10px 0 0 #FE8020, 10px 0 0 #FE8020;
    padding: 10px 0;
    color: #FFFFFF;
    font-size: 45px;
}
CSS

Пример с полупрозрачностью:

<h1 class="title">
    <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry</span>
</h1>
HTML
.title {
    font-size: 50px;
    color: #000;
    padding-left: 10px;
}
.title span {
    display: inline;
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: -10px 0 0 rgba(0, 0, 0, 0.5), 10px 0 0 rgba(0, 0, 0, 0.5);
    padding: 0 10px 0 0;
    color: #FFFFFF;
    line-height: 14px;
    font-size: 45px;
}
CSS
3

Вариант №3 – box-decoration-break: clone

CSS свойство box-decoration-break: clone; добавляет отступы у переносимых строк, но не все браузеры его поддерживают.

<h1 class="title">
    <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry</span>
</h1>
HTML
.title {
    font-size: 50px;
    color: #000;
    padding-left: 10px;
    line-height: 59px;
}
.title span {
    display: inline;
    background-color: #b5226c;
    padding: 5px 10px;
    color: #FFFFFF;
    font-size: 45px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;   
}
CSS
4

Проблема градиента

Во всех вариантах градиент нормально не работает из-за отдельных тегов, box-shadow или «переносится» в месте с текстом, как в примере:

Есть один способ – mix-blend-mode: lighten; (режим смешивания фоновых слоев). Минус его в том что фон страницы должен быть однотонным и белый цвет текста.

<h1 class="title">
    <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry</span>
</h1>
HTML
.title {
    position: relative;
    background-color: #fff;
}
.title span {
    font-size: 50px;
    color: #fff;
    background: #000000;
    padding: 0 10px;
    line-height: 56px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.title::after {
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(37,219,237) 0%,rgba(183,60,210) 100%);
    mix-blend-mode: lighten;
}
CSS
02 июля 2019

Другие публикации

Начиная с версии 64 Chrome начал добавлять разрывы в подчеркивании у ссылок, связано это с введением нового CSS...
Бывает так - есть сайт на CMS c множеством статей и нужно вставить в каждую статью баннер, лучше в ее центр т.к. в...
Сделать так, чтобы редактор растягивался на всю высоту контента можно с помощью плагина Auto Grow для CKEditor 4,...
HTML ссылки для открытия чата и других функций популярных мессенджеров.
Отследить появление блока при скроллинге можно с помощью события onscroll, вычисляя его положение методами jquery...
Сборник примеров установки меток на карту по координатам и адресу, изменение их вида и вывод балунов.