SVG Short Circuiting
SVG is typically an efficient file format, especially for vector images. It is advisable to keep vector images as vectors for better scalability and crispness. However, in some cases, raster versions of complex vector graphics can be smaller in size. Even tiny images with a low pixel count can be more efficient as raster versions.
If you are using Eleventy, you are in luck. Zach has written about a feature in the Image component of Eleventy called SVG Short Circuiting. This feature creates raster versions of SVG images to improve efficiency. If the SVG version turns out to be smaller than the raster versions, the raster versions are discarded.
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. These include slow or inaccurate reading, weak spelling, and poor writing.
Jill Stakke
It’s important to note that better typefaces can help individuals with dyslexia and potentially benefit a wider audience. Typefaces designed specifically to be less confusing and problematic for dyslexic individuals can make a significant difference.
Dyslexie is one such font, although it may appear somewhat childish. Olivia King’s Inclusive Sans also meets the criteria for legibility outlined by Sophie Beier in Designing for Legibility.
Clear distinction between I, l, and 1
Non-mirroring of letters d, b, q, and p
Distinction between O and 0
Wider, more open counter forms on c, o, a, and e
A higher x-height for easier readability at small sizes
Wider default letter-spacing
Clear difference between capital height and ascender height
Just take a look at how #2 is addressed:
Extremely classy in my opinion. I’m eager to use it for a project, especially considering how well it looks at body copy sizes.
An HTML element as a mask
Traditionally, masks are shapes or gradients that hide or reveal parts of an image. Artur Bień introduces a unique concept where any HTML element can act as a mask. By using a clever SVG filter to filter out all black, this technique creates interesting effects.
I experimented with this technique myself, and the results were impressive.
Now, let’s delve into another exciting concept of layering elements and applying exotic filtering for unique results.
Javier Bórquez: Motion extraction with mostly CSS.
Imagine viewing a video where only moving objects are visible, while the rest remains hidden. This effect can serve various purposes, from enhancing security footage to creating visually appealing effects.
Surprisingly, achieving this effect doesn’t require sophisticated video processing technology. It can be done using CSS by overlaying two videos and applying a mix-blend-mode to reveal only the changing pixels between frames. A simple yet brilliant trick.
Single Element Gradient Borders
Here’s another cool trick that aligns with the previous concepts: single element gradient borders.
Creating gradient borders usually involves multiple elements and complex techniques. However, Ben Frain shares a clever trick from the freeCodeCamp forums that uses a single element with a pseudo element to create gradient borders. By utilizing CSS masks and composites, a unique border shape can be achieved, showcasing the versatility and creativity in design possibilities.
The clever bit involves using masks and a mask composite to create a ‘shape’ for the gradient border. By compositing two images created with CSS linear gradients, the border shape is defined. This innovative approach allows for a gradient border effect within a single element, offering a fresh perspective on design possibilities.
Truly a genius technique that opens up a world of creative design options.
