Chris Corner: Unusual Ideas with Great Results

SVG Short Circuiting

SVG is normally a pretty efficient file format. If an image is vector in nature, leaving it as vector is normally a good plan as it will like scale well and look pretty darn crips. But of course, It Depends. Super complex vector graphics can get huge, and a raster (i.e. JPG, PNG, etc) version can actually be smaller. This can happen with little tiny images too where the straight up low amount of pixels is just pretty efficient.

This should be the kind of thing computers are good at, right? You’re in luck if you’re using Eleventy. Zach wrote about a thing the Image component can do for Eleventy called SVG Short Circuiting. The idea is, if your source image is SVG, it can make raster versions to help with efficiency. But if the SVG version ends up smaller than any of the other produced versions, it will discard the raster versions.

A nice looking font that helps dyslexia

Worth knowing:

According to the International Dyslexia Association, as much as 15 to 20 percent of the U.S. population may have symptoms of dyslexia. Those include slow or inaccurate reading, weak spelling, and poor writing.

Jill Stakke

Also worth knowing: these people, and really probably anybody can be helped along with better typefaces. That is, typefaces designed in such a way that the are less confusing and less problematic for people with dyslexia.

I’ve seen Dyslexie before, which is pretty neat. But to be frank, it does look a smidge childish which might make it a tough choice when a brand voice needs to be more serious looking. A crappy trade-off, but such is life.

I’ve just seen Oliva King’s Inclusive Sans which, to my eyes, it extremely nice looking and covers the general criteria laied out by Sophie Beier in Designing for Legibility.

1. Clear distinction between I, l and 1
2. Non-mirroring of letters d, b, q and p
3. Distinction between O and 0
4. Wider, more open counter forms on c, o, a and e
5. A higher x-height for easier readability at small sizes
6. Wider default letter-spacing
7. Clear difference between capital height and ascender height

Just look at how #2 is handled:

Super classy if you ask me. I wanna use it for something. I’m stoked at how good it looks at body copy sizes.

An HTML element as a mask

The vast majority of masks are either shapes in black/white such that they hide or reveal what is behind them in that shape exactly. Or a gradient, such that they fade out what is behind them little by little.

Artur Bień has another idea of what a mask can be: any HTML element. You can set up a simple-but-clever SVG filter to filter out all black.

I gave it a quick shot myself just to have a play and it worked great.

Now that you’re primed into thinking of layering things on top of each other and doing exotic filtering to get weird and cool results, you’re ready for this next one.

Javier Bórquez: Motion extraction with mostly CSS.

Say you wanted to look at a video where only the things that are moving are visible, and the rest is essentially blacked out. Why? I don’t know don’t think about that part too hard. Maybe it’s a way to spot changes in security video easier. Or more likely it’s just a really cool final effect.

You’d think getting that done would involve sophisticated video processing technology. But nope: CSS. The trick is so perfect:

One video is placed on top of the other, playing slightly ahead. Then, by styling the top video with mix-blend-mode: difference in CSS, we make is so only the pixels that have changed between the two frames are shown.

So cool. That’s my favorite trick I’ve seen in a while.

Single Element Gradient Borders

Actually I have another trick that is right in the zone with the last two that is also just extremely cool. You gotta admit the gradient border look is pretty hot right now.

There are number of ways to pull that off, but they typically involve multiple stacked elements and decently involved trickery or limitations. The above is just one element, and it’s showcasing how you also aren’t limited with what you want to do in the body of the element (there using a backdrop-blur).

Ben Frain documents a trick he found in the freeCodeCamp forums. You slap a pseudo element on the main element to create the border, and then essentially knock out a hole in the middle.

Here is the clever bit I have never seen before; we then use a mask, and a mask composite. This allows us to create a ‘shape’, that our gradient border will inhabit. To create this shape, we need to composite two images together and find the difference. That might sound like a lot of work but we can make those two images with CSS using a linear-gradient. It doesn’t matter that the linear-gradient is actually just a flat white colour, the fact that it is defined as a linear-gradient means that the browser renders the outcome of that notation as an image and the image can be composited. So the first mask is a linear gradient set to the padding-box, which then crucially does not include the border, and the second gradient is the full size, and the difference between them is the border shape. Genius!!!!

Genius indeed.