kolappannathan/acrylic-css

A CSS based style for using acrylic effect in websites. This is inspired from Microsoft's Fluent Design Language.

Acrylic CSS

A pure CSS based style for using acrylic effect in websites. This is inspired from Microsoft's Fluent Design Language. The CSS is validated using W3C validation tool.

Download via

How to use it

1. Add acrylic.min.css to your website.
2. Change the image URL in background-image:url("https://source.unsplash.com/random"); to the point to your website background.
3. Now the effects should work

Credits

I thank the StackOverflow users shramee and GibsonFX for their contributions based on which this CSS is written.

acrylic-css's Issues

NPM

publish the css file to NPM

Switch to backdrop-filter

Do this after Chrome supports it in general release.

Ref:

1. https://medium.com/microsoft-design/diy-a-web-version-the-fluent-design-systems-acrylic-material-fe2eac2a40bb
2. https://caniuse.com/#feat=css-backdrop-filter

Add reveal effect for acrylic div

Use random images from unsplash

CSS file format

Change the info in css file according to the following format

https://github.com/kolappannathan/code-conventions/blob/master/css/sample-dist.css

Nuget

1. Add a nuget folder
2. Add a nuspec file
3. Add nuget packaged file into git repo