 Hello, my friend and friends. Sometimes when we write CSS, we're just doing some boring layout stuff. But other times we can muck around and have a little bit more fun with some fun effects, like you can see I've done here. We have this underline effect that goes across multiple things. We have this sort of crazy button going on. I have images in the text or gradient text. They even have this underline that changes into the gradient on my link there, instead of one that just appears. And so we've done some different stuff here, definitely gone a little bit overboard in this example. But I think there's a lot we can learn by sort of pushing the limits and sometimes making things a little bit more exaggerated. So let's move this version out of the way. We'll start with this nice blank slate that we have right here. We're going to have some fun with this and dive into it. And I think the first one we're going to do is the text effect that we have right here. And we'll look at two different things you can actually do with this one. So what we're going to start off with here is right here in my CSS. Let's just come in with, I have this called my page title, which is just the whole title along here. And you'll notice, actually, I have this span here. So we're going to see this is going to sort of cause a problem. We'll see how we can fix it along the way. And I'm just going to do a nice simple text shadow on this. And for this, I'm going to use an offset of about two pixels in both directions. For now, I'm going to put a blur. We are going to remove it, but I'll put that there. And I do have some custom properties set up. So the very first one I'm going to put here, and I'll just put this on one line, so it's easier to see. And it'll be my color accent 400 that we'll put on that. And you can see it there a little bit. Maybe just for fun, actually, I'm going to make this 20 pixels, 20 pixels and 20. So you can really see that that shadow is there. The fun thing with the shadows, though, is if you don't have a blur on them, you put a zero for the blur, it just recreates the same text again, but offset. And then if you come in with a small amount on there, that can be nice because it's there. It's really subtle. I don't particularly like it in this case with the red. I don't think it looks fantastic. But we can also put multiple shadows just by putting a comma after the first one, and then we can offset the next one by a little bit more. And these will be layered on top of each other. This is the one closest to us. Then we'll go one back, one back, one back. So the offsets do need to increase each time. And this time I'll just do a color secondary 400, and I'll put a comma. And let's do one more six, six, zero, var color. And I have my primary 400 that we can throw in there. And you can see we sort of get this fun effect going on. I did have to get a little bit creative on how I did my and easy, because I have a span here for the word fun, which has the position of relative on it. And actually that wraps like all around there. And then I have another span here. There's other ways of doing this, obviously. But I sort of did it this way with some nested spans. So however you did it, if you have something like this, and you want that effect on some texts, but maybe not all the texts like I don't want here, we can come in with you probably won't like this selector, but we're going to do it anyway. A page title span span. And we'll just say none right there and hit save. And you can see that now it looks a little bit nicer. And you know, it's just it's one of those things you can muck around with for certain titles or something to give yourselves a little bit of an extra effect along the way. The next one we're going to do is since we're on this idea of tech shadows, we can do this similar type of thing with a box shadow. And what I've done here is I've actually just used a regular HR, which I don't tend to use very often, but we have my horizontal rule right here that separating everything. And I used to hate using them because they were hard to style. But then I realized, I guess the trick to styling HRs in general. So we're just going to come down here. And for whatever reason, HRs are by default use a border. And I think that's why it's kind of annoying, but we can just say border zero. And then we get a blank slate to style ourselves from or everything from. And for this one, I'm actually going to come in with a custom property called size. And it's a locally scoped one. It could be in your root and you could call it HR size or something like that if you wanted to. But the reason I'm going to come in with that custom property there is because what I want to do is first let's come in with a height and we'll use that var size here to give it an actual height. And let's just add a background for now of white. And we'll look at a few interesting things here. We'll increase this at one point. And I'll show you another little trick with this that's not necessarily for box shadows, just for anything. But we'll circle back to that in a second. But as I said, just like we did here with my tech shadows, we can do similar things with box shadows. And I won't make you go through the whole process of me writing it out. It's very similar to what I did last time. But now I'm only offsetting them downward and not offsetting left and right like I did there. And you can see my colors are coming in. And I don't know, it's a bit of a fun effect. If you had this type of thing going on, I think it's a nice little recurring thing. But the main thing here isn't don't take what I'm doing in this video just to use as is just take it like, Oh, I can use multiple box shadows on stuff and find your own ways of doing stuff like that. So there you go. Though you can see I have the multiple there. But the reason I put the size on here is let's say I made the size bigger and I make it 10. Well, that's kind of awkward now because that's just covering and it doesn't look quite as good, right? So what we can do is we can actually play around with these offsets that are coming based on the size and it makes things look a little bit weird. But it makes it all so much more usable where we come in here. And if actually let's go back to the original because it is sort of help us with her math a little bit. So this originally was double the size. So I can just say come here and I can say calc and say var size. And that would be my times two. And then my next one, this would be a times four. And then this one here would be a times six and hit save on that. And now if I made that one, it's going to work. And if I make it a four, it's going to work. And if I make it too big, it's not going to work because they're box shadows and it's getting a little bit awkward. But at least the offsets as I'm increasing the size here are working. And the reason those are matching the original size is it's a box shadow with no blur. So it's just copying the same element offsetting it downwards. And of course, I mean, you could do this for something, you know, if maybe each one of those was getting a little bit lighter or something like that, it could be a bit of an interesting effect or something along those lines. And while we're here, the other thing that I did sort of allude to earlier on was if ever you have an element and you want it to have a rounded border radius, like a pill shape, I've talked about this before. So if you watch a lot of my videos, you know this one. And just on that note, if you've been watching a lot of my videos, but you find you're not yet subscribed, maybe consider subscribing because, you know, you're watching a lot anyway. But let's come in here and do a border radius. And for the border radius, I'm just going to do a 100 VW because if it's a really big number, then it gives you that roundness there. And you can see that roundness is coming on to all of them. Let's make it a little bit bigger. Just so we can see that it's giving me that. And the nice thing with doing a gigantic number here is it's always going to work. It doesn't matter if this is two pixels or 2000 pixels, you'll probably be fine. It's a little bit harder to notice, I guess, when it's small, but it's still there. Awesome. Let's move into these fancy links that we have here because that's exactly what I called it. And I showed that we had two. So let me just go and find one of them here. There it is. We're going to do my fancy link one for now. And we'll come over to my fancy link two down at the bottom in a little bit, but we'll focus on this one for the time being. And so let's jump in and come down. I just copied my selectors. We'll do my fancy link right here. Fancy link one. I said I copied it, and then I wrote it out. I do that all the time, even when I'm coding on my own. Okay, cool. So we have my fancy link one. And for this one, if you remember the original one, it didn't have an underline at all. So that makes it easy. We can just do a text decoration of none on there. And what we want to do is sort of fake that text decoration a little bit, but with a gradient. And we can actually do that with a background image, which is kind of interesting, where we can come in with a linear gradient. And when we do this, let's just do it really fast of red, blue. And you're going to see it's going that way, which is not what we want. And so first we can just do a 90 degrees here. So of course, don't replace your parentheses. But we just want to do 90 degrees red to blue. So it goes from red all the way to blue like that. And just there you go. There is my full gradient. Now the next trick here is to come in with a background size. And this I guess is a little bit of where the magic happens where I'm going to do a 100% for the width. But I'm going to say the height is only three pixels. And it might not feel like it's working, but it actually is. Let's turn off that 90 degrees for a second. You're going to see it's repeating itself over and over because the height's actually three pixels now. The problem when it goes this way is we don't really notice it because of the way it's repeating. So it looks like it's the same gradient we had before. So let's do a background repeat of no repeat, which I wish was none, but it is no repeat. And it's looking a little bit better. The problem is it's on top instead of underneath the link, which is where we want it to. So now we can come in with a background position. I'm going to right left for now. And then the fun part is figuring out how high you actually want it to be. We do have an LH unit now that I think should help us. But it doesn't have the best browser support. So I'm going to come in and use m's along the way here and sort of magic number my way to where I want to be. The problem is, as we move off the bottom here, notice right now it's gotten really thin. And it's because it's actually, it's not really overflowing, but it's a background image. So because it's a background image, if we go outside of the actual size of the element, it just sort of starts to disappear. And even though this is an inline element, you can add padding to inline elements. And the advantage actually of adding padding to an inline element is it doesn't influence other stuff around it. So let's take off this no repeat for a second, just so I can show you what I'm talking about, where I'm going to do a padding block, which is a logical property for the padding top and bottom and make it really big. And I wouldn't necessarily keep that. But you can see it's, it's added that padding, but it hasn't influenced the layout at all just because it is an inline element. So the padding is visual only and not actually influencing things in a negative way. But of course, this, we probably don't really need it to be that big. So I'm going to make it like maybe a 0.25 or something like that, um, 25m, just so it's far enough down that I can position the line where I want it to be. And we'll put that no repeat back on. And I think, you know, you just sort of get to where you want it to be along the bottom, maybe a 1.5 or something like that will depend a little bit on the font. Or as I said, you could also potentially use an LH unit, which is the line height unit. So the nice thing with one LH is it will be basically move down to the very bottom, um, and right underneath. So you can see it's lining up just underneath the descenders that are on there. Kind of handy. Um, but again, browser support for the LH unit isn't perfect. So I think I'll stick with my 1.5 m for now. And I am using m here. So if ever I change the font size, it would move along with it. Same with this padding, I want it to sort of adjust if I ever adjust my font sizes. Now, the real magic here, of course, is getting it to slide in and out. Ingredients are something that we can't currently animate, uh, because there are background image and eventually there'll be ways of doing the colors within them with custom properties, um, with Houdini and stuff, but we're not there yet. So for now what we can do is just come in and say this is actually a 0% for the background size. And just if I put this at 50%, you'll see it's going to go 50% of the way across and you can see it here too. This is a short link, so it's halfway across that one. This one's going halfway across that one. But I'm going to do a 0% for now. And the reason I want to do a 0% is because let's take this and actually copy and paste it this time. Uh, if I do my fancy link cover or focus, what we want to do is actually just change the background size. And this is an animatable property. So I can come in with 100% there. You can see when I have her on top of them, it's coming in. And because it's animatable, it means I can do a transition of my background size. Let's say 500 milliseconds and check that out. It slides in and out. So nice and cool. The one downside for this is longer links will go much faster than shorter links because they're both, you know, one has a lot further of a distance to travel. One has a much shorter distance to travel. But I think in general, you're not really going to have too many sites where you have these giant long links like this one. Most links will probably be similar in length, but I just wanted to show that it would work across multiple lines if ever a link did break over multiple lines. And just really quickly, of course, if you did want to add other things here, like maybe my text color also changes, I can make my text turn to white. On my transition here, we can transition multiple things. So I can also say that my color is 500 milliseconds, just comma, separate them. And then my color will also go along with that instead of just flashing over and a change or something. So I think that looks pretty good. I did mention that we can do one where the underline actually changes into the gradient. And the idea here is that we can actually control the size of this. Say I do that as four pixels, then it's thicker. We're controlling the positioning of it as well with my offset. So I don't want to try and match the one that's currently here. I want to sort of replace it with this one. But we're going to get to that in a second. The next thing I want to talk about is this button that's going to be right here. I'm going to scroll down a bit because you can see I've already styled my button a little bit where I've changed the color of it and done some other stuff. And I definitely don't want you to match exactly what I do with this button. It's very over the top, but I want to show you interesting things that we can do and fun effects we can do and some interesting tricks as well. And one of them is going to revolve around the border. And the reason I have my border zero on there is because a lot of the time we on buttons, I actually used a button element here. So there is a default border on there. It's a little bit tricky to see right now, but there always is one. So it's very common to come in with a border of zero. But what I'm going to recommend is sometimes we don't really actually want to use a border of zero. We want to use a border color of transparent. And the advantage of that is the border is still actually there. And maybe the border color won't be transparent. The border could, you know, or it will be, but you could do like a five pixels transparent, right, something like that. And you'll notice actually if I make this bigger, it's that border color like that transparent, it's actually the bigger I make this. The background is actually spilling out into that border area, which is good. Again, I'm going to make this maybe five pixels for now. But the advantage of doing this is if ever you have other buttons that have borders, they're not going to get inconsistent sizing. And also, then you can add in borders or change border colors and have interesting things happen with that sometimes as well. So just as an example, if I start with that, and then I can come in here and I can add in a border color and I can change my border color and you can see that that color has switched. And for this one, just because we're going to be playing with a lot of stuff, usually when I do my transitions, I always want to say what properties I'm transitioning, I'm just going to put 500 milliseconds, which makes everything. So you can actually see that border is like slowly fading in and out as I do that. And again, maybe it's not the nicest transition in the world right now, but just one of those things that could come in handy from time to time. Another thing I like to play with instead of borders, though, is outlines and outlines can be useful. And especially now outlines should follow the shape of buttons. If ever you change them, including in Safari, where it was added, then I think it reverted. And now I think it's finally back. But let's come in with an outline here of three pixels solid. And I'm going to do current color. And that's current colors like the original custom property, right? Well, we'll match your text color. It's hard to see right now, because it's so dark. So let's go like much bigger. And you can see that it's actually there. The nice thing with outlines, though, and the reason they have an upper hand over borders is first of all, you can see they don't take up room in the box model. So sometimes that can be useful. But we also have an outline offset, which is really cool. And I'm going to do a negative six pixels, and I'm going to put this back to three pixels. I mean, it's ready to get these like inlaid things like that, which can be kind of cool. And because it's set to current color, when I change my color on my, you know, I did this before this was part of my default styling or what I had before we started. But when I have it, I was changing the color to white. So the color of the borders change or not the border, but the color of the outline is also changing at the same time, which is kind of cool and fun. And it has a nice little look to it there, I think. And it's a little bit hard to notice. But because I changed my border color, that outside color is actually a little bit different, I think let's change that border color actually to a accent, just so we can see that it's actually a different color on the outside. So that might be the type of thing that you're after, you need sort of this multi layered thing or something like that. But let's switch that one back for now. But another thing we can do is actually change our outline offset. So my outline offset here, maybe I actually want to change that and make it go over to zero when I'm hovering. And now you can see that line is sort of like sliding in and out, which is kind of interesting. You will notice the animation for it's not perfect. It doesn't seem to do sub pixel rendering, at least on Chrome for Windows, you might get different experiences in different browsers along the way. But sometimes at the very ends of animations, it can sometimes get a bit choppy. So I do want to let you know about that. But maybe that's not enough for you, you want more layers or more things to play around with. And again, don't go over the top like this. We're just sort of exploring some fun stuff you can do. And you can use these in your own creative ways. But another thing, we've looked at box shadows already. So why am I doing box shadows again? And it's because we can actually come in and I have some preset ones here that I'm going to just paste in. So you don't have to watch me do it all. And of course, this isn't a box shadows, it's box shadow. And let's not do the inset right now. Actually, let's just do a box shadow like this, where now when I hover, you're going to see like we get extra layers on the outside. Maybe once again, I'll make one of let's do this odor one as an accent color just to make it stand out a little bit more. So you can see that red is coming in. We do want to be careful with animating box shadows, it can definitely be a little bit janky. So do some testing, if ever you are animating them, like we're going to be doing here. And the reason it's animating is because I don't have a box shadow set here. So it's going from like the zero to what we're coming in with here. But as I showed, you can also inset box shadows. So by doing the inset on here, if I hit save on that, you can see it's now like those are kind of like sliding in as other stuff is sliding out. And it just sort of creates this like sort of interesting effect. Now I'm going to go back to my primary here, because I think it looks a little bit nicer. Kind of weird, kind of over the top, kind of, I don't know, I don't think I would do all of this at once, but we're just sort of throwing a whole bunch of the wall, because it's fun. And it's always good to go overboard and then rain yourself back in. You can see all these different things we're discovering along the way by doing this. So a little bit of fun. But again, maybe you rain it in and don't overdo a button animation like that, just because it's a lot. But yeah, that one's done. We're going to cover a couple of really fast ones and we're going to get to that second link that I have down at the bottom. And these next two ones are actually really fast. So for these ones, I'm going to move back up to here. And I have this here, this class of image text and a class of gradient text. So I'm going to select both of them because whichever one you're doing, if ever you need to do this, make sure your font size is really big. Small font sizes, it's not going to work very well. So I already have this ready. I'm going to paste it in where I'm selecting both that image text and the gradient text. And I'm just going to give them a really big font size, make them uppercase as bold as I can possibly get and have a line height of one. And the reason we want to do that is every you're putting textures or other things in text, it doesn't work unless the text is very big. I want uppercase to make it as big as possible, the bold, all of that. The line height one is just because it looks terrible if I don't do that with a large font size. Cool. And let's start with the image text because I mean, they're both very similar here. It's sort of a two for one. But my image text, we can just come in. The idea is you want a background image, which I guess makes sense. And I have one here just from on splash. You can see the text has come in or the text, the images come in. Obviously, you don't want to be using on splash ones like this, but I'm just doing it for a quick demo. Now, the next thing we want to do, and this is important to have on there just based, depending on the size of your image and all that, but we're going to do a background size of cover just because we want to make sure it never repeats itself and it sort of matches our text. Though you will notice that the image is bigger than like where this line break in my text is. And that's because it's following the element. And the element here, it needs to take up all that room. It's just the way it works. We can't really get around that. So sometimes if you're worried about parts of your image getting cut off, it's inside of text. So please don't worry too much about that. It should just be the decorational more of a texture than ever anything else. You have to be very careful that it still keeps the text readable because it's really easy for images to have lots of shades and colors that all of a sudden you can't read the text. So be very careful with this one if you're going to do it. Now where the magic comes in is with a background clip of text. And when I do that, it all seems to disappear. And that's because it's clipping the image to the actual text that's here. You might see other demos where this has a web kit, a web kit background clip of text. This until recently, you had to do this in Chrome, but I think it was Chrome 120 or 121 finally dropped the prefix for this one. Though if you do want decent browser support, you should include both. So you can always just duplicate the line and include the prefix version as well as the regular one just so you know you have good browser support. And then the last thing to do is to say that your color of your text is transparent. And as soon as I do that, I can see the background image that is behind my text. And the nice thing with this is you could actually come in with like an RGB and let's just do black so 000 and over 0.5 or something. And that I probably should have done white instead of black, but you can sort of overlay that color on top of the image if ever. You need something that makes it more readable instead of less readable like I'm doing here, but for now we'll stick with a transparent like that. And again, it's not like this T is getting a little bit lost. You really want to be careful with this and make sure your text is very readable. Different screen sizes test all the different possibilities and don't do it just for the fun of it. The bigger the text, the easier it is going to be to read. And for my other one, as I said, this is sort of a two for one. So if ever you want to do a gradient text, you can just come in with your gradient text. And instead of a URL, as you might guess, you can just come in with a linear gradient. And let's just do 90 degrees, red, blue here as well. And it comes in. Now you'll notice once again, I'm not actually getting to the blue because the blue is all the way out here. And it just depends on where the line breaks are and other things like that. And as far as I know, there's not really a way around that. It is what it is. And so it's fine. You sort of have to live with that. If the text was going to be shorter, one way you could ensure that it would work is you could do the width here. Width is going to be a fit content. It won't change anything if you're on multiple lines. But the advantage here is if you had shorter text and it's only on one line, then you can see the gradient is that whole word that's coming along here. And if I add, like as this gets longer, the gradient will always match it because the width of this h2 is the width of the content as long as there's no line break. So images width, it's going to match that. But gradients, as soon as we go to two lines, now the width was 100% because there's a line wrap, the element is actually 100% that's getting forced into a line break. But that could be a nice way for both this one and this one just to ensure if there's short lines of text that the gradient or the image will match exactly what the text is. And finally, let's move myself up to the top because we have this link down at the bottom, which is our second fancy link. And for this one, I just called it, if we look in my HTML, fancy link two. So what we're going to do is go and find my fancy link one right here. We're going to copy it all because fancy link two, as you might guess, starts off very, very similar. But we're just going to select this one and make those all twos. So we have this working down at the bottom, just like the other one was up above. And what I'm going to do here is in my linear gradient, I'm actually going to come to the end of this, and I'm going to add in another color, which is going to be my current color. And as we talked about before, this is sort of our old faithful custom property. So it just means it's going to match the color of the text, which is exactly what I want for this underline when we're not on it. You can see right now it's just adding that to my gradient, and it doesn't look very nice. What we're going to do, though, is we're actually going to say this blue goes to 50%, and we're going to say the current color starts at 50%. When I do that, you'll see that it makes a hard line in the gradient. So at 50% of the way through the link, we're starting with the current color. And now what I'm going to do, and this is kind of weird, but we're going to make this background size here 200%. And I hit save. And you see that now that gradient is there, and it's sort of moving in the wrong way. The background size here is actually not going to change. So we can comment that one out. So we have that background size that's 200%. And right now we have the background position. I'm going to move this over to the right side. And now I have this underline that's matching my text. It just looks exactly the same color as my text if I hover on or off. And if I made this 150%, you'll see that it's there. The gradient is there. And so by doing 200%, but having this go to 50%, half of my underline is going to be the text color. So the gradient is hiding off to the side right now. And then this time, instead of changing my background size, I'm going to change my background position. And let's copy this background position here and bring it down here. And it's just going to go from right to left. And now it slides on in. And that's the reason I put the current color on that side is just because I want the gradient sort of overflowing out that way, right? So it's overflowing out that way. So when I come in, it's going to slide in from there. If you ever wanted it to be the other way around, that would be completely fine as well. But just a nice little sort of way to play around with numbers a little bit and get the results that you're after. And while some of these might be a little bit much, especially this button right here. So do be careful, but there's a lot I think we can learn from just how I set a lot of these up and play it around with them and the different things we did here. If there's any of these that you really liked, please let me know any comment down below. And if you enjoyed this video, you might also enjoy this video right here where I explore some fun use cases that we can do decorational and kind of weird stuff with the before and after pseudo elements. And with that, I would like to thank my enablers of awesome Johnny, Tim, Simon, Andrew and web on demand, as well as all my other patrons for their monthly support. And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.