Ідея тут полягає в тому, щоб уявити три шари, складені один на одного, де верхній шар використовується для вирізання фігури у другому шарі, щоб виявити третій шар.
Якщо текст на верхньому шарі діаграми вище мав форму, яку ми вирізаємо з другого шару, то наступне зображення ілюструє концепцію тексту з нокаутом.
Фрагмент 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; )Перегляньте текст SVG Knock Out від Джеффа Грема (@geoffgraham) на CodePen.