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 scale well and look crips. However, complex vector graphics can sometimes get huge, and a raster version can be smaller. This can happen with tiny images too where the low amount of pixels is efficient.
If you’re using Eleventy, you’re in luck. Zach wrote about a feature called SVG Short Circuiting. It allows Eleventy to generate raster versions of SVG images for efficiency. If the SVG version is smaller than the raster versions, it will automatically discard them.
A Nice Looking Font That Helps Dyslexia
According to the International Dyslexia Association, up to 20% of the U.S. population may have symptoms of dyslexia, such as slow reading and weak spelling. Better typefaces can help people with dyslexia by being less confusing and problematic.
Olivia King’s “Inclusive Sans” font is designed to meet specific criteria for dyslexia-friendly typefaces, making it extremely nice looking and functional.
An HTML Element as a Mask
Artur Bień introduces a creative concept of using any HTML element as a mask. By setting up a simple SVG filter to filter out all black, you can achieve interesting visual effects.
Check out this cool trick and give it a try yourself here.
Motion Extraction with Mostly CSS
Javier Bórquez showcases an innovative technique called “Motion extraction with mostly CSS” to create video effects where only moving elements are visible. This trick is achieved by layering two videos and using CSS to show pixels that have changed between frames.
Discover this impressive CSS trick here.
Single Element Gradient Borders
Gradient borders are a popular trend in web design. Ben Frain shares a clever trick to create rounded gradient borders with just one element. By utilizing pseudo-elements and CSS properties like mask and mask composite, you can achieve complex border styles with ease.
Learn more about this border trick here.