Glassmorphism in Power Platform Canvas Apps

📣 If you find my videos and content helpful, please consider buying me a coffee and becoming a supporter! 📣
🍵 www.buymeacoff...
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
Glassmorphism Generator - css.glass/
AnimatedSVG Generator - svgwave.in/
Thanks for watching another Novalogix Video with Colin Kelly-Cook
Music by www.bensound.c...
www.novalogix....
/ colin-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! 👍

[@Novalogix-ltd]

Haha thanks, now I know for next time!

[@imran002ali]

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

[@Novalogix-ltd]

You're welcome!

[@DaHooka]

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

[@Novalogix-ltd]

I try not to use them too much but it certainly gives you more flexible styling options for some cool effects!

[@fcnc3024]

Took Power Apps to another level! That’s hot

[@Novalogix-ltd]

Thank you, it does look pretty snazzy doesn't it!

[@petsworld000]

Great ❤🎉

[@Novalogix-ltd]

Thank you!

[@yogeshm8344]

Awesome work! ❤

[@Novalogix-ltd]

Thank you! Sometimes it's the simple things that really shine!

[@yogeshm8344]

@@Novalogix-ltd Yes... I was worked like this glassmorphism..but use images like glass..but use container it's really awesome 😁

[@Muhmmmadibrahim_]

Appreciate 🎉, Great videos

[@Novalogix-ltd]

You're welcome!

[@mosesmhango9197]

This is great video

[@Novalogix-ltd]

Thank you!

[@RyanKuy-t4c]

more tutorials please

[@Novalogix-ltd]

You got it! More coming soon

[@shehanpeiris2838]

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

[@fcnc3024]

Oh! Good call out. Would definitely want to know how to resolve that for sure

[@Novalogix-ltd]

Hi, good call out, you will notice the html styles also use webkit-backdrop-filter to cover all devices, add as many other styles in as you like! Enjoy

[@fcnc3024]

@@Novalogix-ltd I recreated what you showed in your youtube video. It's perfection again. I did go into PowerApps app on my Iphone 13 Pro Max and the background is not moving. I am wondering what needs to be changed?

[@Novalogix-ltd]

Hi, it works on my Android in the app player, I pulled the SVG directly from the website in my video but didn't check it for cross platform it may need some tweaks to the animation functions used?