A clientside twitch extension
https://dashboard.twitch.tv/extensions/36v8y6ngrvjl6f1nfmgdg9fw25wyfe
Click on the BACKDROP badge on the left to open the settings menu. Play around with the filters. The presets automatically updated the BackgroundCSS related input elements. The "none" preset resets the entire effects.
v0.0.3
- updated contact and support email
- updated author name
v0.0.2
- Renamed extension to Backdrop
- Added SVG filter presets
- Added reset preset button
v0.0.1
- Implement toggleable extension UI via mouse click on "BACKDROP" button
- Integrate browser compatible supported CSS BackdropFilters: blur, brightness, contract, grayscale, hue-rotate, invert, sepia and saturate
- Min form values are set to 0
- The default css property values are the default values in the settings
- Animated SVG filters
- Interactive SVG filters (like a sponge cleaning up a window to see through)
- Store presets in localStorage
- Set a max cap for form values (css prop specific)
- Observe feedback to decide to hide button badge on the left if mouse is not hovering the screen
- Observe feedback and rename extension back to "Backdrop" (https://discuss.dev.twitch.tv/t/extension-naming-issues/24264)
https://github.com/p4dd9/backdrop
https://css-tricks.com/almanac/properties/f/filter/
https://css-tricks.com/using-svg-to-create-a-duotone-image-effect/
https://codepen.io/lentilz/pen/KybBdg
https://alistapart.com/article/finessing-fecolormatrix/
http://una.github.io/CSSgram/
https://blog.logrocket.com/complete-guide-using-css-filters-svgs/
https://codepen.io/cassie-codes/pen/zWJxXj
https://codepen.io/damianmuti/pen/MvYPPa
https://codepen.io/eliortabeka/pen/WOWOdW