Microsoft 365 Community Experts from the field, 8 Jun 2023

Previous Meeting

Next Meeting

⏯

youtube image

►

From YouTube: GRADIENT TEXT IN POWER APPS?! 😳 *say no more*

Description

Gradient text in #PowerApps?! 👀

A lot is changing in Power Apps. But did you know that we can now also add gradient text to our apps (with 3 lines of code)? This wasn't possible before, and now you can make your applications look even better. Your users' happiness right now - 📈📈📈

Links:
- My socials - https://linktr.ee/kristine94
- Buy me a coffee - https://www.buymeacoffee.com/KristineK

Thank you very much for watching, any feedback is most welcome!

Kristine 😊

#PowerApps #PowerPlatform #UI #lowcode

0:00 Intro
0:15 Overview
0:28 Creating gradient text Option 1 - white theme
4:58 Don't forget about the emojis
5:18 Outro

#PowerApps #LowCode #NoCode #PowerPlatform #UIUX #CSS

A

A

Text to your power apps with literally just a couple of lines of code. So let's dive writing okay. So this is the screen. As you can see, we have the gradient six in here. It's just a really really simple. Welcome screen just to have the great insects somewhere, I didn't really know what to come up with it for the screen.

A

So, let's start building it first things first I will add the HTML control onto the screen, and what we will do first is I will just quickly add a very simple div element in here active and then we'll close, that off and I will just pop hello in here now. It's not great practice to add text within a diff. We'd probably need to add, like a paragraph as an example, but for the purpose of today and for the purpose of powerapps. It really doesn't make much difference at all because it doesn't do anything unfortunately.

A

So what we're going to do now is I'm just going to apply some basic inline styling, so I'm going to say. First of all, we want the color of the text to be, let's say, white for the time being, just to make sure that it comes up and I will just assign a font. Now for the font, I am going to use Poppins black, which is my favorite font. However, I am going to add a fallback of sans serif, just in case someone doesn't have this font already installed, especially if they're using a mobile phone.

A

So now we've done this, we are ready to pretty much start the collar styling. So the first thing that we'll need to do is: we will need to remove the text color from here in a second, but, let's quickly, add some styling into this.

A

So the way this works is uh or the way gradient text works in CSS is we assign a background fill to the background, so we are effectively coloring the the diff on the background and what we are then doing is we are clipping the diff element into the text in to the size of text and what this would effectively do is it will clip it underneath the text. So then, what we'll have to do is we'll have to make sure that the text on top is transparent. That probably didn't make any sense at all.

A

So let me just show you so, first of all, I'm going to add the background, which is going to be 3D gradients now for the gradient I'm, going to use my gradients from my website, so I'm just quickly going to navigate to my website right click and go to inspect element I, just like this gradient, so I'm just going to do that.

A

If you stack for gradients, what you can do is you can just type in CSS gradients in Google, and it will come up with thousands of CSS generators that you can use to copy the gradients from and now I'm going to navigate back to the website application here and, as you can see, what's happened now is the background has been changed to gradient, which is the behavior that you'd expect when you sign the gradient property uh to the background now.

A

The next thing that we want to do is, we want to say, add: What's called the background clip now. The way background clip works, like I said, is it will clip the background to the shape of the text. So what we're going to do in here is I'm just going to go into my styling and I'm just going to pop um webkit web kits background clip oh points clip and now we're gonna clip it to this uh to the shape of the text.

A

So, as you can see, the gradient has now disappeared and, like I said, the gradient hasn't disappeared because we've accidentally done something wrong, but it's because it's sitting underneath the text in here so right now the color is white. If only if I remove the color there's going to be nothing here. The reason why is because by default text in CSR in HTML is black, so of course we have black text on top of this.

A

However, if I zoom in hopefully you'll be able to see the very subtle Shadow- that's kind of peeking through in here so I'm just going to quickly go into here and I've removed the color. What we have to do now is just we have to make sure that the text on top of is transparent.

A

So what I'm going to do is I'm going to add another web kit and then text and fill color, and the reason why we use webkit is that um browser, especially if you're, using it on a mobile, will support this CSS property by default. So this just allows us to make sure that it's actually rendered.

A

We could add Mozilla, which is Moz um but um fall back in here, but I'm just going to skip that for the time being and all I have to do is just add, transparent and just like that, we now have gradient text again. You can't see properly that it's gradient just because the text is so small, so it doesn't look that great in just yet.

A

So what I'm going to do is I'm just going to change the size and, let's say we'll, make it font size and we'll just make it I, don't know 80 pixels as an example, and there you go, that's pretty much it so anything you add within this diff now will be converted to gradients and that's including any Emoji. So if I was just quickly pop and hand sample you'll see that that's going to be gradient if I use any of these they're all going to be grading.

A

So if you do decide to use an emoji, um just make sure that you're aware that's going to be gradient and the reason why is because the Emojis are Ended as text don't forget, so they will also be included when we are clipping the background and adding the gradients and that's pretty much it. And that brings us to don't forget to fight of the future. Videos and I'll see you soon. Bye. Now.