Идея здесь состоит в том, чтобы представить три слоя, уложенных друг на друга, где верхний слой используется для вырезания формы во втором слое, чтобы показать третий слой.
Если текст на верхнем слое схемы выше был формой, которую мы вырезаем из второго слоя, то следующее изображение иллюстрирует концепцию вырезаемого текста.
SVG фрагмент
Вот фрагмент, который настраивает нижний слой ( .knockout), который будет отображать текст выреза, средний слой ( .knockout-text-bg), из которого мы .knockout-textвырезаем , и верхний слой ( ), содержащий текст SVG, который будет действовать как маска для вырезания из второго слоя.
Knock Out Text В этом примере координаты полностью произвольны и могут быть скорректированы в соответствии с фактическим размером и размещением добавляемого текста.
Обратите внимание, что fillвторой слой черный, а fillверхний - белый. Вот как работают маски: белый цвет идеально контрастирует с черным и скроет черные части. Мы можем сделать верхний слой совершенно другого цвета, и он не скроет полностью черный цвет, но позволит некоторой его части проскользнуть сквозь него.
CSS стили
Остальное - стилизация CSS. Например, мы можем добавить фоновый градиент к нижнему слою и изменить размер шрифта, чтобы получить более драматический эффект.
.knockout ( /* Ensure the bottom layer is full screen */ height: 100vh; width: 100%; /* Add a colorful texture and cutom font-styling */ background-image: linear-gradient(to left, #ff4e50 , #f9d423); text-transform: uppercase; ) /* Knockout text font sizing for each line */ text:nth-child(2) ( font-size: 5em; ) text:nth-child(3) ( font-size: 5.1em; ) text:nth-child(4) ( font-size: 15em; )См. Текст Pen SVG Knock Out от Джеффа Грэма (@geoffgraham) на CodePen.