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 :)
See the Pen Mac OS - like window by Adrien Martinet (@Yexan) on CodePen.
Interesting points I’ve practiced on this POC :
backdrop-filter: blur()
is really easy to use and can be visually interestingdetails
andsummary
tags are pretty handy and accessible by default using keyboard events. We can be default use theopen
property on it to open the details- I’ve once more used svg in background cast as data:image for the folder icons