Skip to content
This repository has been archived by the owner on Jul 28, 2024. It is now read-only.
/ acrylic-css Public archive

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

License

Notifications You must be signed in to change notification settings

kolappannathan/acrylic-css

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

55 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Acrylic CSS

Demo GitHub GitHub issues GitHub contributors

The repository is archived for reference. The package is no longer maintained.

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.

Screenshot from 2024-07-28 19-57-08

W3C Validated

Download via

NPM GitHub release

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.

About

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

Topics

Resources

License

Code of conduct

Security policy

Stars

Watchers

Forks

Languages