How to transform black into any given color using only CSS filters?
The answer:
Use simultaneous perturbation stochastic approximation to probabilistically obtain an approximation of the color through a chain of filter transforms...
stackoverflow.com/a/43960991
Web development.
Conversation
You may have noticed grapheneos.org now includes a logo in the navigation bar. The site reuses the same SVG with a mask of the GrapheneOS logo for the header, footer and Safari tab icon.
Setting the color to match the color of the text for the active page is ridiculous.
1
2
Can use codepen.io/sosuke/pen/Pjo to generate a filter chain closely approximately the color via the probabilistic algorithm above. Tweaking it to use a loop until it gets one with insignificant loss is simple enough and it doesn't take long.
How is the web this screwed up though?
1
3
Replying to
1
Replying to
It has serious issues with browser support despite being around since 2014:
caniuse.com/css-masks
I don't really want to rely on features that are behind prefixes and partially implemented. Currently only using one of those kinds of features and it's a minor optional thing.
1
1
The grapheneos.org footer is placed at the bottom of the viewport even when there isn't enough content to fill the page. We don't use any JavaScript for page styling or workarounds so we actually have to do these things properly with CSS. It's another example of pain.
1
Using 100vh as min-height is our baseline approach but that doesn't actually work consistently / properly. We need the CSS stretch feature (formerly called fill-available and fill, forget the exact history) which isn't fully standardized yet so it's as -webkit-fill-available.
Chromium silently broke the design at one point and started showing the footer immediately under the content since they changed the semantics of -webkit-fill-available as the spec evolved. We didn't notice for a while and then had to figure out the weird workaround needed for it.
1
2
Ended up having to set -webkit-fill-available for html in addition to body and that resolved it. Guess you need to apply it all the way up the page in order to fill the available space now. Anyway, depending on underspecified, evolving and often buggy WIP features isn't great.
1
Show replies