Tinnitus Tracker
Rob has turned his exhaustive spreadsheet of all the concerts he has attended into a beautiful website. Browse around—it’s really quite lovely!
Rob’s also writing about the making of the site over on his blog.
Link tags: filters
6
The Many Ways to Change an SVG Fill on Hover (and When to Use Them) | CSS-Tricks
This article by Cassie is so, so good!
First off, there’s the actual practical content on how to change the hover styles of SVGs that aren’t embedded. Then there’s the really clear walkthrough she give, making some quite complex topics very understandable. Finally, there’s the fact that she made tool to illustrate the point!
Best of all, I get to work with the super-smart developer who did all this.
Dark theme in a day – Marcin Wichary – Medium
On Ev’s blog, Marcin goes into great detail on theming an interface using CSS custom properties, SVG, HSL, and a smattering of CSS filters.
I was kind of amazed that all of this could happen via CSS and CSS alone: the colours, the transitions, the vectors, and even the images.
The Contrast Swap Technique: Improved Image Performance with CSS Filters | CSS-Tricks
A clever performance trick for images:
- Reduce image contrast using a linear transform function (Photoshop can do this)
- Apply a contrast filter in CSS to the image to make up for the contrast removal
Instagram-style filters in HTML5 Canvas | Viget
Una’s [Instagram filters in CSS}(https://github.com/una/CSSgram) are great, but the browser support for CSS filters isn’t as good as, say, the browser support for canvas. Here’s a clever bit of scripting to polyfill filters using canvas.
The “Blur Up” Technique for Loading Background Images | CSS-Tricks
Quite a few moving parts in this technique from Emil, but it’s very clever.