Главная » Статьи » Техники и эффекты CSS для Knockout Text

Техники и эффекты CSS для Knockout Text

Техники и эффекты CSS для Knockout Text

От автора: Knockout text – это техника, в которой слова вырезаются из элемента, открывая задний фон. Другими словами, виден только фон, поскольку буквы проделывают отверстия в элементе. Это привлекательно, так как открывает типографические стили, которые нельзя получить из традиционных свойств CSS, таких как color.

Раньше мы уже видели несколько способов создания knockout text. Сейчас же есть современные CSS эффекты и техники, которые можно использовать и даже усилить результат плавными переходами и анимацией. Посмотрим их в действии.

Режимы смешивания

Существует 4 режима смешивания, которые легко могут вырезать текст: multiply, screen, darken и lighten. Если применить эти значения к верхнему элементу в стеке из изображения и текста (текст сверху), мы получим дизайн knockout.

В большинстве случаев для получения более четкого разделения между текстом и фоном используется черный или белый цвет. Но я предпочитаю использовать более темный или светлый цвет, чтобы оставить видимым заднее изображение, как показано ниже:

<div class="backdrop"> <p class="text">Taitō</p>
</div>
/* Background layer with an image */
.backdrop { background: url("/path/to/image.jpg") center; ...
} /* Dark foreground layer, with white text, set to "multiply" mix blend mode */
.text { color: white; background: rgb(59, 2, 6); mix-blend-mode: multiply; ...
}

Более темный или светлый цвет также создает приятную «тему» с изображением, просвечивающимся через текст. Режим смешивания multiply сохраняет более темный цвет, а более светлые цвета пропускают через себя все, что расположено за ними: черный цвет на верхнем слое будет полностью непрозрачным, а белый – полностью прозрачным.

В примере сверху белый текст стал полностью прозрачным, а темные цвета вокруг позволяют просматривать изображение позади, так как темные оттенки остаются нетронутыми.

Режим смешивания screen инвертирует поведение: более темные цвета становятся прозрачными, а более светлые остаются, загораживая все, что под ними расположено.

Режимы darken и lighten похожи на multiply и screen соответственно, за исключением того, что детали теряются за просматриваемыми участками заднего изображения. Вместо того, чтобы смешивать оттенки, режимы выбирают более темный или более светлый оттенок двух показанных слоев.

Ниже показана разница смешивания цветов с помощью 4 режимов:

/* Knockout text within a dark area */
.multiply { color: white; mix-blend-mode: multiply; background-color: rgb(59, 2, 6);
} /* Knockout text within a bright area */
.screen { color: black; mix-blend-mode: screen; background-color: rgb(244, 220, 211);
} /* Knockout text within a dark area that's less detailed */
.darken { color: white; mix-blend-mode: darken; background-color: rgb(59, 2, 6);
} /* Knockout text within a light area that's less detailed */
.lighten { color: black; mix-blend-mode: lighten; background-color: rgb(244, 220, 211);
}

Режим смешивания – самый удобный способ получения эффекта knockout text. Он позволяет применять дополнительные стили. В других техниках этого может не быть.

Давайте подробнее разберем стили, с помощью которых можно усилить эффект knockout text.

Теневое размытие

Если к тексту добавить белую/черную или светлую/темную тень, получится эффект размытия. Например, я добавлю text-shadow с большим радиусом размытия:

.text { text-shadow: 0 0 9px white; ...
}

Теперь края менее резкие с облачным эффектом:

Анимация

Мы даже можем заставить все слегка двигаться. Например, давайте возьмем пример с text-shadow с сделаем так, чтобы текст стал светиться:

.text { animation: glow 3s infinite; ...
} @keyframes glow { 0% { text-shadow: 0 0 10px white; } 15% { text-shadow: 2px 2px 10px rgba(255, 255, 255, 1), -2px -2px 10px rgba(255, 255, 255, 1); } 30% { text-shadow: 2px 2px 4px rgba(255, 255, 255, .7), -2px -2px 4px rgba(255, 255, 255, .7); } 50% { text-shadow: 20px 20px 50px rgba(255, 255, 255, .5), -20px -20px 50px rgba(255, 255, 255, .5); }
}

Плавный переход

Transition – еще одно свойство, которое можно применить к knockout text. Свойство открывает еще больше интересных возможностей (например, text-indent на псевдоклассах типа :hover).

Вот так с помощью transition на псевдоклассах можно представить новый элемент в knockout text:

/* The knockout text */
.text { transition: text-indent .5s; ...
} /* On hover, trigger the transition */
.text:hover { text-indent: 5px; transition: text-indent .5s;
} /* The thing that slides in on hover */
.text:hover::before { display: inline-block; content: '&amp;amp;#x2708;︎';
}

Background Clip

Значение text свойства background-clip вырезает задний фон по форме текста, расположенного спереди.

<p class="text">Taitō</p>
.text { background: url("/path/to/image.jpg") center; background-clip: text; color: transparent; ...
}

Прозрачный текст показывает изображение позади него, и изображение вырезано по форме текста. Хотя это настоящий метод knockout text (он буквально удаляет задний фон вокруг текста на экране), отсутствие фона ограничивает применение других эффектов, таких как размытие, движение текста. Здесь у mix-blend-mode есть преимущество.

CSS маска

Первая рассмотренная нами техника использует маску, концепцию, в которой формы создаются на переднем плане и с помощью цвета определяют, какая часть формы будет показывать фон. Черные части переднего плана прячут (или маскируют), а белые части – показывают задний фон, или наоборот. Все серые значения между черным и белым считаются разной степенью частичной прозрачности.

CSS маска работает по схожему принципу: вы прямо указываете, что одно изображение будет маской для другого, и тип примененной маски будет определять вырез. На момент написания статьи CSS маска полностью поддерживается только в Firefox.

Поскольку мы рассматриваем knockout text, маска должна быть сделана из текста. Очень удобно это делать с помощью SVG <mask> — создает маски из SVG фигур и текста.

<div class="backdrop"> <p class="text"></p>
</div> <svg> <defs> <mask id="m"> <rect width="100%" height="100%" fill="white" /> <text x="50%" y="75%" text-anchor="middle">Taitō</text> </mask> </defs>
</svg>
/* Background layer with an image */
.backdrop { background: url("/path/to/image.jpg") center; ...
} /* Dark foreground layer with masking applied */
.text { background-color: rgba(59, 2, 6, 1); mask-type: luminance; /* Referrer to an SVG mask */ mask: url("#m"); ...
} svg { width: 75vw; height: 20vw;
} /* SVG text inside the mask */
text { font: bolder 12vw 'Alfa Slab One';
}

Значение luminance свойства mask-type, примененного на элементе переднего плана, реализует механизм маски, где части этого слоя (соответствующие черным частям маски) становятся прозрачными. Части, соответствующие белым частям маски, остаются непрозрачными. Свойство mask использует значение url() для обозначения SVG элемента, используемого для маски.

Элемент SVG <mask> создает изображение маски из его содержимого. Внутри тега я создал белый прямоугольник (<rect>) и черный текст (<text>). После маскирования черный текст показывает часть изображения за ним.

Размытие, анимация и плавный переход

CSS маски позволяют использовать те же эффекты размытия и анимации, что с для mix-blend-mode.

Ниже также хорошо применяется эффект светящегося текста, на этот раз напрямую к тегу SVG:

text { font: bolder 12vw 'Alfa Slab One'; animation: glow 3s infinite;
} @keyframes glow { 0% { text-shadow: 0 0 10px white; } 15% { text-shadow: 2px 2px 10px rgba(255, 255, 255, 1), -2px -2px 10px rgba(255, 255, 255, 1); } 30% { text-shadow: 2px 2px 4px rgba(255, 255, 255, .7), -2px -2px 4px rgba(255, 255, 255, .7); } 50% { text-shadow: 20px 20px 50px rgba(255, 255, 255, .5), -20px -20px 50px rgba(255, 255, 255, .5); }
}

В отличие от mix-blend-mode, здесь можно анимировать не все из тех же свойств. Например, не будут работать text-indent и transform. CSS трансформации можно применять к SVG элементам, но поскольку наша маска используется как реальная маска, браузеры не могут применить трансформации.

Мы всегда можем вставить SVG атрибут transform с помощью JS, тем самым применяя трансформации к элементам внутри маски:

t = document.querySelector('text');
b = document.querySelector('.backdrop');
b.onmouseover = ()=>{ t.setAttribute('transform', 'translate(20)');
}
b.onmouseout = ()=>{ t.removeAttribute('transform');
}

Заключение

В плане поддержки в браузерах и безопасного продакшен кода маска CSS отстает из-за ограниченной поддержки в Firefox. Режимы смешивания поддерживаются почти во всех основных браузерах, кроме Edge. Свойство background-clip уже поддерживается во всех браузерах, но все еще требует префикс –webkit.

Режимы смешивания и маска дают один и тот же результат. В отношении background-clip и mix-blend-mode – выбор определяет дизайн. Что можно сделать с помощью background-clip, можно сделать и с помощью смешивания, при условии, что используется только черный или белый фон, соответствующий тексту страницы.

Если коротко. Первый метод knockout text – применяйте один из четырех knockout-friendly режимов смешивания к верхнему слою стека из изображения и текста и используйте комбинацию темных/светлых (или черных/белых) цветов на тексте и его окружении. Второй метод: установите background-clip в значение text на элементе, который несет фоновое изображение и прозрачный текст. Метод три: используйте CSS маскирование на сплошном переднем фоне с изображением позади и управляйте вырезом с помощью текстовой SVG маски.

Автор: Preethi

Источник: https://css-tricks.com/

Редакция: Команда webformyself.