fluent-design

CSS-only Acrylic Material from Fluent Design System

浪子不回头ぞ 提交于 2019-11-27 09:19:42
问题 With the advent of Microsoft's Fluent Design System and the propagation of the new Acrylic Material around the Windows ecosystem, I thought it would be great to use it in some Web layouts. Acoording to the spec, the composition of an acrylic layer is: So I went to try a CSS-only approach inspired by the layers in that picture, this way: body { margin: 0; font: 1em/1.4 Sans-serif; background: url("https://cdn.pixabay.com/photo/2017/03/27/16/50/beach-2179624_1280.jpg") center center; background

How to use Acrylic Accent in Windows 10 Creators Update?

我只是一个虾纸丫 提交于 2019-11-27 02:53:05
I can't find any detailed document to use Acrylic Accent ( CreateBackdropBrush ). I found a post in StackOverflow which is somewhat useful but it doesn't help to get started. So please create a detailed answer to this post so that everyone can learn. Update: Microsoft has released an official Acrylic material document Note: If anyone doesn't know about Acrylic Accent. Acrylic Accent is the new feature in Windows 10 Creators Update that allows the app background to be Blurred and Transparent. Sven Borden CREATOR UPDATE XAML You need to use a component that you put on the background of your app,