Bringing Fluent to the web
I'm a web developer and love the look of Fluent Design System so I am investigating ways of bring the look of Microsoft's design to the web. So far none of this has been easy as the technologies for the web aren't geared towards some of the elements of Fluent, however I've been able to mimic most of the effects through CSS and JavaScript.
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 >Acrylic
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:
-
Transparent background
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.
-
backdrop-filter
This blurs anything behind the element. I set the value to blur(30px) saturate(125%) to give the closet likeness to that of Windows.
-
background-image
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.
Reveal
Coming soon...
Highlight
Coming soon...
Parallax
Coming soon...
More coming soon
This is very much a work in progress! I plan to add more Fluent inspired designs/implementations soon.