Glassmorphism Design in E-Learning #310: Challenge | Recap
It's a new year, and that means new design trends. In a recent challenge, we looked using the 2021 Pantone Color of the Year in e...
Published 4 years ago
Version 1.0
Blog Post
Updated my GlassMorphism sample and added a working interactive version to it.
In this sample course i show how to create and use your own HTML filters thus make it possible to create dynamic interactive GlassMorphism interfaces and dashboards.
Working Storyline sample added too.
https://360.articulate.com/review/content/5664589a-514f-4b18-8c41-c2abeaf19a0a/review
For the impatient ones here is the sample as shown in the end too..
https://360.articulate.com/review/content/89feafb2-791d-4dd3-bd4c-53eaa4c7e448/review
Now working on adding partially blurring. In the samples above a complete element gets blurred, but what you really need for GlassMorphisme is dynamic partial blurring. Using backdrop-filter it should be possible to show/animate elements and then make a given part below it blurry..
In this sample course i show how to create and use your own HTML filters thus make it possible to create dynamic interactive GlassMorphism interfaces and dashboards.
Working Storyline sample added too.
https://360.articulate.com/review/content/5664589a-514f-4b18-8c41-c2abeaf19a0a/review
For the impatient ones here is the sample as shown in the end too..
https://360.articulate.com/review/content/89feafb2-791d-4dd3-bd4c-53eaa4c7e448/review
Now working on adding partially blurring. In the samples above a complete element gets blurred, but what you really need for GlassMorphisme is dynamic partial blurring. Using backdrop-filter it should be possible to show/animate elements and then make a given part below it blurry..
This is very interesting and well documented. Thanks for sharing.
- Recheck the course as i got partial blurring working now. Only a sample and a video showing it is dynamic in now. Will update that when time permits...