Bringing Fluent to the web
This page shows off what I have done and brief overview of what the implementation involves. I will continue to add to this page so come back soon.
An eloquent design system for a complex world
Now’s the time for bold, scalable, universal design. This is a transformation. A step into the future of sensory experiences. The world is at our fingertips – join Microsoft in building a design evolution.
A rapid evolution is underway in user interfaces. The spectrum of dimensionality expands from zero to four. We speak, type, ink, touch, and gaze. We’re engaged and immersed. We’re surrounded by devices, interactions, and experiences. To translate across dimensions and contexts, we need to solve for a sensory digital world, and be fluent in our designs.Find out more >
For this effect to work properly you will need to be using Microsoft Edge (Windows 10 April 2018 Update or higher) or Google Chrome with Experimental Web Platform features enabled in chrome://flags
As can be seen in the header of this page there is a working Acrylic effect. There are a few elements to this in order for the effect to work on the web like it does on Windows. These include:
This gives the Acrylic its light or dark colouring. I use rgba(255,255,255,0.2) and rgba(0,0,0,0.2) values for the light and dark version respectively.
This blurs anything behind the element. I set the value to blur(30px) saturate(125%) to give the closet likeness to that of Windows.
This adds noise to the blur effect on the element. A file is used that has a very subtle noise effect, I have base64 encoded it and included it within the CSS itself so no external requests need to be made for the image.
More coming soon
This is very much a work in progress! I plan to add more Fluent inspired designs/implementations soon.