First.. big thanks to #132 and #88 (@xplosionmind and @jakeparis) who both did similar work. But I've been a super stickler for accuracy and wanted a pixel perfect match to the YT gradient.
I used https://github.com/bluesmoon/pngtocss/ to get the exact gradient definition. (Perfect alpha values are typically the part that's hard to get by hand).
YT's png file is 198px but is displayed within a div thats 98px tall. So then we just needed to take half of the values, double the color stop positions.. and then code-golf the bytes down.
Overall it's a 161 byte savings. But more importantly one less network request (yes data-uri's still invoke a whole bunch of network request stuff in the browser).
First.. big thanks to #132 and #88 (@xplosionmind and @jakeparis) who both did similar work. But I've been a super stickler for accuracy and wanted a pixel perfect match to the YT gradient.
Turns out 13 years ago Nicole Sullivan inspired some folks to make exactly the tool that we needed: https://www.stubbornella.org/2011/04/25/css-3-gradients/
I used https://github.com/bluesmoon/pngtocss/ to get the exact gradient definition. (Perfect alpha values are typically the part that's hard to get by hand).
YT's png file is 198px but is displayed within a div thats 98px tall. So then we just needed to take half of the values, double the color stop positions.. and then code-golf the bytes down.
Overall it's a 161 byte savings. But more importantly one less network request (yes data-uri's still invoke a whole bunch of network request stuff in the browser).