 There are so many amazing, mind blowing, just incredible things people can do with CSS only. And some of my most popular videos are just me marveling at the creations people make with CSS. Today though, instead of just looking in utter amazement of what people can do with it, I want to twist things around a little bit and instead try and break down how somebody has done something and try to implement it myself. A few weeks ago, I came across a really cool CSS only implementation of form validation by Jay. And last week, I looked at how we can use patterns to validate forms without having to rely on JavaScript. So I thought, hey, I could add in that cool stuff Jay was doing into the form I did. And so let's take a look at what Jay was up to and see what we can steal from it and implement it into my own code. Hello, my friend and friends. I'm so glad that you've come to join me once again. And if you're new here, my name is Kevin. And here at my channel, I help you fall madly, deeply in love with CSS and creating things like this, I think are a fun way to fall in love with CSS. So let's dive right into it and take a look at what Jay has done here. Where if we have mistakes, we get that, we get these letter flips and all sorts of cool stuff. So first, a few things is we can see some spans up here which is using for these labels that are what are showing up here. And the reason he's doing that is it creates that like turning effect when things work. So everything has to be wrapped in a span for that to work which is not too bad. Interestingly, and what he has done here is because they're all being wrapped in their own spans, he's written email out and then he has the SR only class or screen reader only class to bring email back in. So this is for the screen readers and this is for sighted users. Not too bad to be able to figure out he's using these style, that's interesting. So he's using this as part of how the animation must be getting done, I'm guessing. So these are custom properties that he's setting individually. We'll have to see when the CSS comes in that we have the form validation coming through the pattern which is really important to be able to make this work if I understand what he did properly. Same idea going over here, perfect. Okay, so that's the easy part. We'll come back to that. What I'm actually more interested in is the colors right now and seeing if we can get those colors to work and once we get a valid email.com that the color changes once again or if we have an error getting that thing to go on. So those are for me the more interesting parts here than the little spinning letters. So how would he have done this? I know he used has because I found this in a tweet of his and he was using has in his tweet or that was part of what he was talking about. And so we have the input focus visible input placeholder. So that's with the outline color and we're using a lot of custom properties and I guess changing them along the way. So that's not too bad. We have the transition of the border color with the custom property. Did we have a route? Okay, we have our colors set up here. Cool. So it's so much fun and I'm just trying to wrap my mind. Form group, label button is there. Background, that's okay. I'm not too worried. Okay, so form has invalid. Form group has invalid and then he's switching it to the color invalid. And if it's not in focus, so okay, so this that is how we're getting the animation. So the invalid color is the red one. But when it's in focus, it's like that has. So if it has focus, it's yellow no matter what. No, I was just basing it on that. But so when it's in focus, it's getting the focus color and then the invalid color is red and this is just based on the cascade that's happening here. And then when we're invalid and it's not focused, we're throwing in the animation. So when I tab out and it loses focus, we get the animation on there. So let's start off. So here's my very basic thing that I have set up. Form groups, my labels, my inputs. And let's come here. So we have my form group. So let's say dot form group. All right, no, let's set up three colors, first of all. So we'll come all the way to the top and say root. We're gonna do my valid is lime, because why not? We'll do invalid was red because that makes sense. And what do we call that like? Well, it's working. What did he call that? I'm just curious. Oh, focus. So focus would be the yellow. We'll try that focus, focus will be yellow. Okay, so we have the three colors. So then we can say I am in Chrome and I have experimental web features on. So the has selector is available for me right now. It's not hard to implement that. I'll probably show you how to do it on screen right now. If you want to enable it, if you're in Safari, it should just work. If you're in Firefox, I think you need to switch browsers if you want to try this today. So let's do that form. Let's just try form group, just to see if the has selector is even working. We're gonna say has input. If there's an input in there, we want the border to be three pixels solid blue. And ha, it worked. Okay, but I don't want the form group to do that. I want the input itself to get that, which is why this is why custom properties are really cool. So there's two ways we could do that. Because I know this is how Jay did it, right? But he didn't change the border. He changed the border color. Border color? What did he do? He just changed color. Ah, okay, that's interesting. So we'll circle back to how he did it. But just to start with, I could come here and then say input. So the input that is in a form group that has input gets the border. Silly way to do it, but whatever. So let's come here. Do, do, do, I guess we'll just come here. Yeah, we'll come here and come after here. We'll just say input. So my input is going to have a border of three. Let's do big, just so we can see it. Five pixels solid and var color. And if nothing, if we'll throw a fall back in here of like CCC, just so we actually have a color on there. So let's delete this and delete that. So we should see, there we go. My border has come in. Let's make this look a little better. Border radius of five pixels. 10 pixels, I don't know. Something just to make it look a little, there we go. I think that looks better with the bigger border on there. So we get that color coming in. So we want to put something on those. And this is where the magic of this works is because then we can just change the custom property. Color is going to be red and it should switch over to red. Perfect. And that's because we're changing the custom property. So the input, which is inside my form group instead of going to the default, which it doesn't know is instead going to this color here. Perfect. So we can easily change the color just by changing the custom property. So we want, instead of saying input, we can just say invalid. And then we had our custom property color that we created of invalid there. So here we can do var invalid. The nice thing with doing it this way is just it makes it easy to control everything here. So you want to change your color and change it here. You don't have to like go diving through your code to be able to make the changes, right? You can do everything through just one spot instead of declaring them independently. So we have my red. That's good. Now, let's also come in and say, if we have a valid that we want to throw in my valid color. So if I come here and I do that, we're also going to have to change this focus ring potentially, but let's come in and just say, or know what we could do. I don't want to change the focus that's on here just because the default focus ring is actually pretty good in Chrome. If you want to do your custom one, that's fine. Just don't turn off the focus ring, but let's do input, input, focus, the outline offset five pixels. There we go. So it's just like, it just pulls the default focus ring further out. So my border's still there, but it's still, I don't know, the default one's fine for now. But what we want to do is my valid. Oh, we have that. So if I come here and I do test at test.co, it changes and it's saying it's good. Perfect. Now what we want is it to turn yellow in the interim. So the yellow one will go at the top here. Form group has, form group has focus, I guess. And then the color is my var focus. I don't know. We might have to check J's in a second to see if this is going to work. No, so it's not working if I come here. Because right now it's invalid. This probably has to go after then at the bottom. Aha, okay. So once it gains focus, it's going to change color. And then if I go out, it's either going to be green or it doesn't match and it goes red. I think the valid should go last then. So we're really relying on the cascade. So, because the reason for that is it's yellow, but as soon as I go past that, I want it to switch over to green. And the green and yellow difference isn't much. So I think I might make this orange. Just to make it more obvious when, there we go. So you can really see when you're in that in between phase. And yes, we're just relying on the cascade here. So if it's invalid, it's red. If it's in focus, it doesn't, we know you're typing still. So we're going to stay in that sort of in between. We're guessing that you're still writing. So we're not going to say it's invalid yet until we go out. And if this comes last, because if ever whatever we're writing is valid, we want to let it to change to green just to say like, yes, your password is fine now, but obviously you can still keep going if you want to. Cool. I know we're showing my password. I just did this so we could actually see the characters I'm putting. This should be set. The type here should be password, right? Let's fix that password. I didn't, I forgot to change that when I finished creating this last time. So now there we go. That looks a little better. Perfect. So now we want to do the animation. So I'm going to go back to what Jay did. So he created an animation of shake. So I guess that's just a, let's go take a look. Translate. Okay, so he really wanted it to like shake. So we're just saying at the end and the beginning and end, it's here. 20, 40, 60, 80 and shifted this way and all the other ones and shifted the other way. If you didn't know, you can do animations like this. If you have matching keyframes, you don't have to like, you don't have to list out keyframes in order. You can put them in any order you want them to be. You know what? I'm just gonna, let's, let's steal. We said we're gonna steal. What's the quote? Good artists steal. No, good artists. Some of it like the best artists steal and stuff. I don't remember what the code is, but whatever. We're stealing. So now, if, so we're getting the shake, but it had to be specific when that was happening, right? He has a blur one on here too. What's the blur doing? We're gonna get close enough. Invalid and not focus. Then we add the animation. That makes sense. And that has to go here. So invalid. So right after the invalid, my form group has an invalid and the invalid is not focused. Is not focused. Not focus. We do my animation of shake and it was, let's just say one second. I know I think this was a bit shorter than one second. So there, you can see both shift, whatever. Let's come here. We do that. It's not valid. It shakes when we get to there. Let's speed that up because it is a bit too fast. Point six, point five. I think he had point six, five. So we go there. It's wrong. It's wrong. What if this is where we don't actually want these to be red right now? Like I'm gonna save this and refresh the page. When we get here, we don't want that to happen. And this is one of those things where you try and figure it out on your own. But oh, he's, he has a, I saw something when I was scrolling here with placeholder show in color blur. But he doesn't have a placeholder. Does he just use pattern title? Let's find placeholder, enter valid email address. Ah, they are there. Did he style? Why do we not see the placeholder though? Placeholder color transparent. So he's hiding. So I mean, I guess that's just if you want to keep it like this where you don't actually see it. And I'm guessing that was, so here, that could go anywhere. So we get to say placeholder color. I'm not gonna, let's leave their placeholder on. Actually, let's just put in a quick placeholder on these two. All right. So we got my placeholders in. So he's using, that's an interesting thing to do there. So to prevent this from coming in and shaking before we've even got into them, form group has placeholders show in, right? I'm guessing I want that first. So form group has placeholder show in. So placeholder show in school. So it's just saying, like, do we see the placeholder? Yes or no. And then color, let's just say is, we wanted that default one. So here, let's put this as my var blur. Stealing his names and everything, because why not? So here is, we said it was CCC, right? So here it would be var blur. Let's just see if that works. Oh, this probably actually, I was saying it should come first. I think it needs to actually come after the invalid stuff. So we'll put this one all the way at the bottom. Because it's matching both, right? It's matching that the placeholder is showing and it's matching that it's invalid. But I want this one to win because this is sort of more important in this situation. So I'm putting this one down at the bottom. So that can go there. And then we wanted form group has placeholder show in. Turn off the shake, focus visible. No, not the focus visible. Invalid, valid, valid placeholder show in. We get the blur and not focus animation none, right? So not focus, which is the same idea that we had here where we're adding the animation in, we're saying that's perfect, except if the placeholder is showing, then we wanna turn off that, so none, animation none. And now we won't have an animation on there anymore. So we can come in, everything's fine because our placeholder is there. We don't, this is winning because it's at the bottom. Cascade is fantastic. If I come in and try, that's no good. It shakes and it's saying that's not actually valid. At sample.com, it's now valid and it stays valid. And then at least eight characters. Once I pass eight, that is good. If we remove a few, go into the orange and I tab out saying, whoop, watch out, cool. I'm so cool. That was a lot easier than I thought it would be. And it shows how useful has is gonna be. Has is gonna be fantastic. Another thing that I noticed he was doing is with the button styling too, where the button looks like we can.com. So the button styling actually changes. The buttons never actually disabled. Like if I go here, it just looks disabled. So I think I know how to do that, but I'm curious how, I have a way I would do it, but I wanna see, we're here to like break apart and see how we can steal code. So form valid, type submit is background. Oh, okay, nice and easy. So that's just saying. So right now, let's just try this then. Form, I thought we're gonna use the has selector actually valid background is blue, which it shouldn't show up now. But so sample at sample.com and we get something good. Why is that not valid? Ah, there, okay. I don't know why it went off there for a second, but there we go. So the form itself, we can change things. So the form, we can change the color. So you can do it J's way. I didn't set up the custom properties for my button, but he's using that to change form valid. Oh, this, okay, no, never mind. He is doing it like that. Okay, I was like, and then here, I'm just gonna put button because I didn't do the type submit. But whatever, make sure you're selecting your forms button, however you set it up. And then here the, let's actually get the original styling that I had of these right here. So when the form is valid, the button will look more clickable. And when it's not, let's just put this saturation. We can put this at like 10% the rest of the time and even this, maybe like a 30%. And let's also, let's just take this copy paste it and just say color. I'll make this like a 50. We want it low contrast. I don't know how low you want it. So maybe I'll boost that up to like a 70. Just, we wanna make, I mean, part of the idea is that it looks like it's grayed out when it's not there. And then, and in this case, the order of my button should be higher up. It's just because I had the button under my general styling that wasn't part of the original demo. But because this is higher specificity, the order of it also becomes less important. So cursor pointer background color is that and we can also change the color itself. Color can just for now go to white. We could use like custom properties like J did, but let's just make sure this is working. Name at example.co, at least eight characters. And then my submit button looks like it activates. Super, super cool. Really, really awesome. I'm not gonna dive into the spinning letters in his, I'll do it on this one because it's easier. I won't look at that one. I would recommend checking out the link to Jay's actual code pen or if it's something you'd really like to see me do, then just leave a comment down below and it's something we could look at in the future. And if you like this video and you'd like to see more videos where I look at how something else was done and sort of break it down and examine it so I can use it in my own code, let me know with a comment down below so I can keep on doing these if there's something that you guys like. And with that, I wanna say a very big thank you to my supporters of awesome over on Patreon, Jan, Johnny, Lucas, Mr. Dave, Patrick, Simon, Steven and Tim as well as all my other patrons for their monthly support. And of course, until next time, don't forget to make your call on the internet just a little bit more awesome.