33 bookmarks. First posted by jackfranklin march 2018.
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
march 2018 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
march 2018 by spaceninja
tagsarticles background-clip background blend-modes blend blendmodes coding color css-clip css design effect effects feedly filter fonts fridayfrontend howto ifttt image images inspiration issue knockout mask masks multiply overlay pierce pocket read reading_list style styling technique text transition tutorial type typography web webdesign webdev