It takes as much energy to wish as it does to plan. — Eleanor Roosevelt
… Read article “The Contrast Triangle”Let’s say you’re building a site, and you’re working with a designer. They come to you with some solid designs, and you’re ready to go. You’re also a conscientious front end developer and you like to make sure the sites you build are accessible. The designs you’re working from have some body copy, but you notice that the links inside the body copy are missing underlines.
You are now in The Contrast Triangle.
It started with seeing a recent Pen of Mandy Michael’s text effects demos. I’m a very visual creature, so the first thing I noticed was the effect, not the title (which clearly states how the effect was achieved). Instantly, my mind went “blend modes!”, which turned out to be wrong.
The demo actually uses clip-path. First of all, the text is duplicated. We have black text below as the actual text content of the element and the white … Read article “Methods for Contrasting Text Against Backgrounds”
Much has been written about how SVG filters can be used to style images or manipulate shapes or even make crazy animations.
But I haven’t seen much about how SVG filters can be used to style text recently. Thankfully, Dudley Storey has written a neat introduction to the topic by showing how to make regular letters look like text from an illustrated comic book. It’s part of a series, starting with the bubbles and staggering letters. … Read article “Comic Book FX Lettering with SVG Filters”
