[HN Gopher] Browser in the Dark: flashlights with CSS and canvas ___________________________________________________________________ Browser in the Dark: flashlights with CSS and canvas Author : voussoir Score : 93 points Date : 2022-04-14 17:06 UTC (5 hours ago) (HTM) web link (voussoir.net) (TXT) w3m dump (voussoir.net) | oblak wrote: | Not bad. canvas is perfectly suited for that sort of thing | | But where does "CSS" come in? | voussoir wrote: | dsmmcken has shown that making a full blackout with CSS is | possible with clip-path, but at the time I wrote this, I didn't | know that. | | The CSS comes in the form of the mix-blend-mode divs, | "grayscale", "bright white", "inverse", etc. They are more like | lenses than flashlights since they don't illuminate what's not | already there, but flashlights were my inspiration for doing | this so that's the term I stuck with, though I did use the word | lens once. | | The CSS idea came first, and the canvas idea came second when I | wanted to make a full blackout and didn't know about clip-path. | rexf wrote: | Very neat. | | I wonder if you could put the canvas/flashlight controls in a | fixed corner of the page (instead of inline as you scroll up & | down). Fixed, omnipresent controls would be more video game like. | voussoir wrote: | Yes, good idea. For the purpose of this article I want the | reader to encounter the features as I talk about them, but for | other applications I would fix the controls. | | Plus, inlined controls add to the suspense -- you might truly | get lost in the dark! And breathe a sigh of relief when you | find the button again :) | matsemann wrote: | Funny how the images change when you click "canvas on". | wbobeirne wrote: | I actually had the same thought and came up with a much simpler | solution for this years ago, a giant box-shadow + border radius: | https://codepen.io/wbobeirne/pen/WvyBQM. | | The mix-blend-mode trick is cool for all of the variety of | effects though! | voussoir wrote: | That's a beautiful effect too, thanks! | dsmmcken wrote: | > I wanted to come up with a flashlight that really works for all | elements on the page, but I don't think any combination of DOM | elements and mix-blend-modes would do it. | | I think CSS clip-path might be a solution like you want but | without the canvas. Just tried it out here to confirm: | https://codepen.io/dsmmcken/pen/BaJqrwX | voussoir wrote: | Wow! That's perfect, thanks for your help. I'll add that to the | article soon. | Rygian wrote: | Was nicely surprised by the dream theater reference. | eurasiantiger wrote: | A radial gradient from transparent to black could work to mask | away the darkness, then add the soft light layer to make it more | flashlighty. ___________________________________________________________________ (page generated 2022-04-14 23:01 UTC)