[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)