In my first article on the new CSS Paint (Houdini) API, I covered three use cases for Houdini along with polyfilling it in non-supporting browsers and building with webpack. Today I want to discuss combining Houdini with a knockout text technique to easily create attractive, generative text effects. Since I have already covered the polyfill, I have chosen not to use it for this article's demos, so they only work in Chrome; other browsers will just show a black fallback. The repo for this article is here:
Knockout text is a visual effect where the text content of an element is cut out, revealing the background behind it, thereby giving color to the letters so that they contrast with the foreground and can be read. In web development, there are several ways to achieve knockout text; for these demos I went with using the
background-clip: text CSS property as it is widely supported (prefixed), simple, and accessible. Check out my 15 Puzzle Generator to see another knockout text technique using images, pseudo content and the
mix-blend-mode CSS property, and the accessibility hack (a tiny, invisible
<h1> tag) that was subsequently required. The demos for this article are live here.
Here we just have three
<h2> tags with our text, as you might see in a real document. Throw on an
<h1> for a page title and this is accessible to screen readers as a set of level 2 headings. The
<style> tag for calling our
paint worklets is needed to work around an apparent caching issue as discussed in my previous article.
Pretty simple styles, just some basic flexboxing on the body then some typical text styling for the
<h2> tags, each of which has a CSS custom property that we will use in their respective worklets. The knockout text effect is created by the transparent text color (the background will only be visible to the extent the text color is transparent) coupled with the
background-clip: text property (limits the appearance of the background image to the area of the text), which must be prefixed in most browsers.
We want the background to be just big enough to completely cover the text. Any uncovered text will just be the text
color. However, if our background size far exceeds the area of the text, our worklet will be doing a lot of unutilized work, which is sub-optimal and could be a problem if you animate the background. Making a few simple tweaks to properties such as
font-size (and also
border) minimizes the background size and our
paint function's complexity while still containing the text. Now, let's check out the worklets!
Here I'm trying to recreate Claude Monet's famous haystacks as seen, for example, in this painting. By limiting the width of the background, I can keep the number of brushstrokes down to a reasonable 3,825 😃. If the background were wider, the brushstrokes would be diluted and more black areas would be visible, so more strokes would be required for the same look, increasing the complexity of the
paint function. I chose the Dr Sugiyama Google font to vaguely mimic Monet's signature. To see the underlying background drawing, open up dev tools and uncheck
Pretty simple, just looping through the number of brushstrokes from CSS and drawing a short line of 'hay' in a random straw color.
This one is also just a bunch of colored lines, very simple to do yet attractive visually.
The font here is the Amarante Google font, about the most Art Nouveau-style font they have.
Tip: On Google fonts you can only search font names, but if you want to search for a certain style of font (or anything that appears in the font descriptions but not the names), search the GitHub repo!
For Demo 3, I experimented with drawing spheres (adapted from the MDN) and I think they turned out great. Just a little more complex than stripes but nothing too heavy. The font is Limelight, one of many Art Deco-style Google fonts.
Radial gradients in canvas drawing take two circles as arguments and then color stops can be added. You can then apply the gradient as either a fill style or a stroke style.
Knockout text is a cool effect that is easy to implement accessibly, and when we use Houdini to make the backgrounds, we can randomly generate attractive patterns to show through our knocked-out text as an alternative to having to load images. This technique works with the Houdini polyfill and can be used anywhere; the only limit is your imagination! I hope that you found this article useful and that you will please like and share with the world!