Mac OS like window in CSS with backdrop filter

When I discovered the CSS property backdrop filter it made me think at Finder, the Mac OS file explorer.

Say no more, I opened a new pen and challenged myself with a quick POC :D

The idea was to keep the HTML as small as possible and make most of the job in CSS. I’ve used a bit of typescript in the end to be able to move the window but even the file navigation is foldable without javascript :)

Interesting points I’ve practiced on this POC :

• backdrop-filter: blur() is really easy to use and can be visually interesting
• details and summary tags are pretty handy and accessible by default using keyboard events. We can be default use the open property on it to open the details
• I’ve once more used svg in background cast as data:image for the folder icons