Glassmorphism in Power Platform Canvas Apps

📣 If you find my videos and content helpful, please consider buying me a coffee and becoming a supporter! 📣

Supporters will get access to download the solution from this video and future content!

In this video I take a look at how to create a "Glassmorphism" effect in a Canvas app, I use animated SVG in Images and HTML styling to come up with a cool effect you can easily apply in your next Canvas App

Thanks for watching another Novalogix Video with Colin Kelly-Cook

#powerplatform #microsoft #canvasapps #lowcode #webdevelopment #glassmorphism #userinterface #design

There is a 5px padding by default in HTML control. I usually get rid of that first, and than subtract 1 px from the height and no scrollbars. Well done Colin! 👍

[imranali]

Hi, great video, thanks for sharing the knowledge. 👍

[UncleBubba]

Great video, thanks.
By the way, a quick PSA: When you took the SVG code into VSCode to do a Find/Replace... I like to work in VSCode for a lot of stuff, but for simple things Find/Replace... you can do that directly in the formula bar in Power Apps itself.
Just highlight the formula/text range you want to do the Find/Replace on, then press Ctrl+H. You'll get a little Find/Replace box right there in the formula bar.

[fcnc]

Took Power Apps to another level! That’s hot

[DaHooka]

Nice one, never thought of using html control to force webstyles

[shehanpeiris]

This is great! But the only concern is that "backdrop-filter: blur" doesn't work in iPhones or iOS if you want this to be a mobile app and integrate it on MS Teams

[aliyuahmed-om]

how do u reduce the speed of the wave effect?

[rowanreynolds]

Great video, the SVG does not seem to animate using the native ios app, any idea why?

[JohnHall]

Creating cross platform problems on a platform designed to eliminate cross platform problems.