You can do WHAT in Power Apps 😨😨 GLASSMORPHISM UI
Вставка
- Опубліковано 8 лип 2024
- Well this is my favourite discovery of Power Apps so far 😎
We've been waiting for it for SO LONG, and now finally this (and a lot more things) are possible. In today's video we will look at how you can implement glassmorphism in 10 seconds and 2 lines of code (but the video is 11 mins lol).
Links:
- Claymorphism generator - hype4.academy/tools/claymorph...
- My socials - linktr.ee/kristine94
- Buy me a coffee - www.buymeacoffee.com/KristineK
Thank you very much for watching, any feedback is most welcome!
Kristine 😊
#PowerApps #PowerPlatform #UI #lowcode
0:00 Intro
0:59 Overview
2:13 Option 1 - white theme
6:55 Hack - Claymorphism Generator by Michal Malewicz
7:49 Option 1 continued
8:51 Option 2 - dark theme
10:57 Outro
Haters can't deny the skills, I have been doing this for over a decade and I still can come close to the UX skills. I've watched videos but never subbed, you got talent. +1!
Wooow! Very nice! Thanks for this kind of content, Kris!
Thank u so much Kristine ! Super tutorial !
I'm going to take this into the application I'm building right now. Thanks Kristine! 👏👏👏
Very cool, simple code and logic but really adds a polished professional feel to the UI 👏👏👏👏👏.......I am using that going forward.😎
yay! I was looking for it! Thank you for this video
Ahh thank you sooo much!! Hope you like it 🥰
it's beautiful, I can't believe power apps can implement really cool UI
Amazing update
thanks for sharing. great watching this🎉
That's cool 👍👍 Thanks.
You are the GOAT of Design in Power Apps !!! you save my life
Oh thank you so much!!!! I really appreciate it 🤩
love it!!! 😍
Love it
Your content very useful!
Hi Kristine, love your channel! Just would like to point out that your webcam inset covers up the properties pane on the designer. Would it be possible to move it to the other side and mirror it when you're doing PowerApps demos?
Enjoy your ☕! Amazing content. Thank you!
Thank you so much for all the coffees David!! That's really generous of you and I appreciate it 😊
Source code -" "
Hi Kristine. Loved your suggestion. Unfortunately, when coding (on web), it works, but when published (on app), it doesn't work.. Any suggestions? Thanks.
@@JanaiPaiva hi! Thank you so much for watching the video! Apologies, I forgot to update the above comment - I hadn't realised that the Power Apps for mobile runs on an old framework. All we have to do is add an extra line in our code for compatibility - ' -webkit-backdrop-filter: blur(8px);' and it'll work seamlessly - so the full code will be:
" "
Let me know if you have any other questions :)
@@KristineKolodziejski It worked!! Thank you
@@KristineKolodziejski I copy pasted the above code and got the exact output with vertical scroll bar. What is the reason for getting scrollbar?
@@srikanthb8549 turn padding to 0 on all directions.
You are awesome and so amazing.❤
Hi, Kristine. First of all, thanks for sharing. I've implemented your code and in my laptop with powerapps maker it works. The problem is when i see it in my mobile: the top right corner is not rounded.
Awesome! Thanks for sharing. I need to give PowerApps a proper go, so I will be baring this in mind for the visuals when I get to decide on what that's going to be.
Are there any websites out there (and that are good) for project inspiration?
Some kind of gallery site with screenshots?
excellent!!!!
早速試してみまっす
Thank you so much!!
excelente te ganaste un suscriptor 🩷
Thanks for the amazing video. Actually , I tried this long before but I couldn't be able to achieve this blur effect. The secret background alpha value you revealed it😅, that I have missed.
you are the best , and please if yoou can make more about using html animation in power apps
Can these techniques be applied to Sharepoint buttons as well?
07:28 generator
This is amazing! Thank you for sharing your talents with us once again Kristine! One issue, this doesn't seem to render on iOS ???!! 😰Has anyone had the same issue?? 😭
Wow, I just tested this and on iOS 16.4.1 you need to also include the alternative -webkit-backdrop-filter: blur(3px) to have the blur render... Hopefully this helps others with the same issue!
So this works for me on desktop but when the app is used through the power apps app on mobile the backdrop-filter blur effect disappears but everything else still works. Any Idea why that could be?
Need to add -WebKit before backdrop filter, this removed the blur in the online editor but at least it works in the mobile app
I've been using filter: blur() and -webkit-filter: blur(). Is this better than using those? I can't see a difference
Hi
thanks for Sharing
in your HTML code i think it could be more easy to read / write with the Building string interpolation function to write the code, ex : $"my text {mycode_here} my text again"
$" "
How can I make the same gallery
You can do the same with a container.
Blur with Container?