0

How to create a Microsoft Fluent Design transparency with CSS or other tools? I like this design language and want to add some elements to my webpage.

Neil Lunn
  • 148,042
  • 36
  • 346
  • 317
Ulukbek Abylbekov
  • 449
  • 1
  • 6
  • 19

2 Answers2

1

Use one of the Github projects that implement Fluent Design in ReactJS:

For example:

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Theme as UWPThemeProvider, getTheme } from "react-uwp/Theme";
import MyComponent from "./MyComponent";

export class App extends React.Component<void, void> {
  render() {
    return (
      <UWPThemeProvider
        theme={getTheme({
 themeName: "dark", // set custom theme
 accent: "#0078D7", // set accent color
 useFluentDesign: true, // sure you want use new fluent design.
 desktopBackgroundImage: "http://127.0.0.1:8092/staticimages/jennifer-bailey-10753.jpg" // set global desktop background image
        })}
      >
        <MyComponent />
      </UWPThemeProvider>
    )
  }
}
ReactDOM.render(
  <App />,
  document.getElementById("app")
);

./MyComponent.js

import * as React from "react";
import Button from "react-uwp/Button";

export default class MyComponent extends React.Component<void, void> {
  render() {
    return (
      <Button tooltip="Mini Tooltip" />
    )
  }
}

References

Paul Sweatte
  • 24,148
  • 7
  • 127
  • 265
0

You can use this library for Reveal Effect in Fluent Design System. And you need to wait for the backdrop-filter CSS supported for background blur effect (Safari and Edge support -webkit-backdrop-filter).

https://github.com/d2phap/fluent-reveal-effect

enter image description here

Phap Duong Dieu
  • 164
  • 2
  • 7
  • Please don't post the same answer to multiple different question, like [you did here](https://stackoverflow.com/q/44171246/119775). Instead, consider voting/flagging to close one question as a duplicate of the other. – Jean-François Corbett Jun 13 '18 at 06:48