27 bookmarks. First posted by jackfranklin 13 days ago.
Knockout text is a technique where words are clipped out of an element and reveal the background. In other words, you only see the background because the letters are knocking out holes. It’s appealing because it opens up typographic styles that we don’t get out of traditional CSS properties, like color.css fonts
3 days ago by siggiarni
TLDR; knockout text method 1: apply one of the four knockout-friendly blend modes to the top layer of a text-image stack and use dark/light (or black/white) color combination on the text and its enclosure. Method 2: set background-clip to text in the element carrying both a background image and a transparent text. Method 3: use CSS masking on a solid foreground with an image behind and dictate the cutout using an SVG text mask.fridayfrontend css masks background-clip blendmodes knockout design
10 days ago by spaceninja
tagsarticles background-clip background blend-modes blend blendmodes coding color css design effect effects feedly filter fonts fridayfrontend howto image images inspiration issue knockout mask masks multiply overlay pierce pocket read style styling technique text transition tutorial type typography web webdesign webdev