Jack_Sparrow
@Jack_Sparrow
Junior HTML/CSS

Как сделать рваный фон у текста?

Здравствуйте! Помогите, пожалуйста, решить проблему. Есть текст с фоном градиентом, но справа фон обрывается по длине строки, фон однородный для трех строк. Пробовал через разные строки, но появляются границы. Уже всю голову сломал. Приложил картинку как должно получится.5e2b3c9a47475181090985.jpeg
  • Вопрос задан
  • 1704 просмотра
Пригласить эксперта
Ответы на вопрос 6
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Если разбивать по строкам, то так


Если не разбивать, то будут видны полоски.
Ответ написан
Aetae
@Aetae
Тлен
SVG-фильтром захреначил как-то так:
Но это чисто из интереса. На бою стоит юзать вариант Ankhena, с добавкой js, если потребуется.
А вообще, по хорошему, стоило бы дизайнера отп*дить.
Ответ написан
sniggering_deus
@sniggering_deus
Frontend Engineer & Fullstack Designer
Для полной коллекции добавлю и свои пять копеек:



<div class="cont">
<span class="word word__one">Пошаговая инструкция</span> 
<span class="word word__two">по заработку с нуля</span> 
<span class="word word__three">до 8 млн за 2 месяца</span> 
</div>


.cont {
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
font-family: 'Roboto Condensed', sans-serif;
color: white;
}

.word {
font-size: 25px;
padding: 7px 15px;
  letter-spacing: 1px;
}

.word__one {
    background: linear-gradient(to top, #ef6e00, #ecb61e 90%);
}

.word__two {
background-color: #ef6e00;
}

.word__three {
background-color: #ef6e00;
}
Ответ написан
display: inline с однотонным фоном наложить градиент по маске


Для отступов на каждой строке используется box-decoration-break, поддержка которого слабая, но это уже другая задача. Основная часть состоит в mix-blend-mode.

В случае с белым фоном и текстом подходит mix-blend-mode: overlay с серым градиентом. С другими фонами придется поэкспериментировать, или их тоже сделать градиентом
Ответ написан
sfrancisco
@sfrancisco
Student =)
А как у тебя?
Ответ написан
Jack_Sparrow
@Jack_Sparrow Автор вопроса
Junior HTML/CSS
Всем огромная Благодарность за ответы ))
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы