Unsplash image for article hero image

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