 Hi there, my name is Kevin and welcome to my channel. We learned how to make the web and how to make it look good while we're at it with weekly tips, tricks and tutorials. And in this video, we're going to be looking at how we can do a cool glitch effect with only CSS. It's not that hard to do and I think it looks pretty good. I'm going to break this video down by looking at how I got this to work because I just, I saw a cool glitch effect. It was a video that I saw and I was like, yeah, I wonder if I can do that. And so this is sort of the process I went through, but I think it breaks it down really nicely where we're going to start it off with a bit more of a basic glitch effect where it's just on regular text. And we're also going to look at how we can break that text to make it look a little bit more glitchy because the first effect, I think it works, but we can push it to the next level with that broken effect. And then the very end, I do cover a really, really important point that I want to make sure that you watch. So if you're doing even just the simple one, there are the chapters down below. Make sure you get to that last point. If you don't want to make your visitors angry, it is a very important point. So I do want to make sure that you check it out. So if this sounds good to you, let's go. So here we go. I am in VS code. And if we come and look at my HTML, I just have a paragraph with a class of glitch on it. So what I'm going to do is just select that. It's a glitch. And I think we need to do a few things here. So font size, let's go with a six rem. So it's nice and big font weight. I'm just going to bold for now because I'm not using any specific fonts, but you know, I guess we do a 700 for bold. And then we can do a text transform upper face. I just think it looks better with that, but I mean, it's really up to you how you want to style it up. And the next thing we need to do is we need to give it that glitchy effect. And there's different ways you could do it. But I think the easiest thing to do is to use a text shadow. And the cool thing with text shadows is it's easy to apply multiple ones, and we can change the offsets for each one. So I'm going to use Ms for this, and I'll explain why in a second, but you might be like, oh, those numbers are kind of awkward, but I'm going to do an offset of 0.05 m. So it's going to be offset on the x axis, axis zero on the y and no blur, and then an RGBA. And the reason RGBA works well for this is it makes it easy to set up the RGB colors. So I have red. And then let's do a alpha. I want it to be a little bit transparent, but not really. And then actually, I'm going to put a comma here, and then do shift alt down. I'm guessing if you're on a Mac, it would be shift option down, but it could be wrong. So for these two, it will become a zero. And then here it will be 255. So I have a red, a green, and a blue, just like that. And here I will put a semicolon. So if I hit save, we see that the glitch is coming in, but they're all overlapping. Oh, I have prettier on. So it's, it's fixing up my code for me. So actually, let's just drag this out a little. And I will, whoops. And I will put each one on its own line just quickly again, even though that will disappear when I hit save. But I just want to show you what I'm going to do with my offsets here. So I want each one to have a different offset. So maybe this one could be a negative, but say 0.25. And then here negative 0.05 m. And then this one could be a positive 0.25 and a positive 0.05 m. I'll hit save. And you can see that the glitch has come in. We have each one is offset differently from one another. So it makes it so we can see, you know, it gives it that weirdish kind of look. Good start, I think. Now before we move on, I just want to say I said I was going to explain why I used Ms. And that's because if I changed my font size, I want that offset to expand or if I go with a smaller font size to shrink with that. Because if I used pixels at this size, the offset would look huge. And if I went bigger, the offset would look so itsy bitsy tiny. So by using Ms here for these offsets, it's making it so it grows and shrinks with my text, which I think overall makes it just easier to work with, you know, because it's more versatile, versatile, versatile, whatever, it works better. So we have that there. I'm going to do an act keyframes animation animation, it is an animation, we're going to, and we'll call it glitch. And I'm going to start with four different ones. I'm going to do a zero, zero percent. So where does it start? Well, we already have this we might as well start where we are. And then what we can do is just grab that I'm going to do the same thing, shift alt and push down. So I have it four times. And I'm going to change these, I'm going to do a 15, a 50, and then here a 100%. And we're going to have to modify this again in a little bit. But I just want to explain, I'm going to start with this, and then it will help explain the next step that I'm going to do. But with that there, I'm just going to change these offsets, I'm going to do that off screen, because it's going to be kind of boring to watch me do it. So I'll be right back. Okay, so here we have, I've just changed the offset. So here it's like a positive to a negative is zero to a point two five, you know, I'm just playing around with the values trying to make sure that they're never the same between any of the two points. And overall, I think it should work what and these can always be adjusted a little bit later on if needed. But we're going to see I'm going to so we're going to throw the animation on here animation glitch. And we'll do let's do 2000. I'm going to do it kind of slow at the beginning. And it's going to run only one time when I hit save. See it moves around a little bit. And then it should stop. And let's come on here and say infinite. So it will just keep running. And we can see that it is working. And you know what, I made this so it can scale up, let's make it like a just so it's nice and big. And you can see that the animation is working, but it's kind of weird because they're gliding around. Now in doing this, I did discover that if instead of using this, like this, if you set up a custom property, and then you redefine the custom property each time, it won't animate between the different states, it's just going to glitch out, makes it a little bit easier in your keyframes, but it didn't work in Firefox, it only worked in Chrome. So I'm not going to do it that way. I'm going to do the alternative, which is I'm going to take my 0% shift all down, and I'm going to make this 14%. I'm going to take my 15 shift all down and make this 49. And then I'll take my 50 shift all down. And I will make that 99. So what that means is it's going to stay the same from 0 to 14, and then it's going to jump when it gets to here. Then it's going to stay the same until it gets to 49, and it's going to jump to get to this one. And then it's going to, again, stay the same to 99 and then jump to the next one. So it is a little bit more work to do it this way. But now you can see that it is more glitchy. Now it's really slow, but that's just through the timing. So we can fix that really easily. So I mean, this works perfectly fine. It should work in all your browsers. No problem. So and here, as I said, we want to take this and maybe make it like 750. I'm not going to keep it running because it's kind of, you know, it gets annoying to watch it, but you can see that it's it's glitching out. And one thing that you will notice actually is that here where it's, you so it's like, and that's why I did a zero and then a 15 and then a 15 to 100. So I want like a fast one and then a slower one, because I find that adds to the whole glitchiness of it. So, you know, because if it was always the same speed, so it was like 0, 25, 50, 75, 100, it's going to be always glitching. But I think it's nicer when you have like a fast one, a slow one, you could add more points into here to like add a little bit extra. But I found that just having these four points was enough. So we get that jumping around just like that. And now where the real magic comes in is I thought this worked. I thought it was good. And maybe even this could be a bit faster. You know, the faster you go, the more glitchy it is. And it's the perfect first step. It gives you that glitch effect, which I'm going to turn off because it's driving me a little bananas. But it's the right first step. But it's whenever you see glitch text, it always has that broken look to it. And I felt that was really missing from this. So I thought about it a little bit. I was going to use pseudo elements and use the content to bring in extra text. But the more I thought about it, I was a little worried about how that text would be treated by screen readers and stuff like that. So I actually think the best thing to do is to do a span of glitch text. And let's turn off word wrap. So we have span, glitch text, close span. Here, I'll even. Then we have my regular glitch text. And then I'm actually going to have another span. And the order of these doesn't really matter. And so in my one paragraph, we have the words glitch text three times like that. And obviously this is kind of weird. And the one thing we don't want is if a screen reader gets to this, it's going to read glitch text, glitch text, glitch text, or you know, it's the title of your thing or whatever it is. That's really awkward. So on this span and on this span, both spans, I'm going to put on an area hidden equals true. So a screen reader or assistive technologies will ignore them. So visually, they will be there. But for screen readers and all that, they will not be there. So that will be a good first step. And then what we'll do is we'll come here and we'll say glitch space span is going to be a not display a position of absolute. And that does mean that over here, because if I do that, and then I say top zero, it pulls it out of the flow. So I will come here and say position of relative. So top zero, left zero. And it's there three times, but it's overlapping. So they're all one on top of each other. Cool. And if I copy paste, interestingly enough, it only does it once. So even if somebody's selecting the text, it doesn't seem to cause any issues. So we have my glitch text coming right there. And what do we want to do? So we want each one of those to be animated. But kind of interesting. And actually, I just want to show you if I do like a top negative 100 pixels, it already has the text shadow on it, right? It's inheriting it. So that's perfectly fine. Everything there is working. But what I want is on my glitch, we have my animation. But we want a different animation on the each one of the spans. So I'm going to do a let's just scroll down, glitch, span, first child, and it could be a first of type or whatever you want. The first child will get a animation. But I'm just going to put a different speed on this. I'm going to say it's 650 milliseconds. And then shift alt down. The last child will get a and actually enough type here might be a bit safer if you have text that's within. But it should be fine. And here, again, I'll put a different one. Let's go with a, I don't know, 375. And I might play with these numbers a little bit. But as soon as we do that, we're going to get like this crazy weird glitch going on. So already it looks like, wow, that's kind of kind of nuts. But we don't have that broken effect. So we do have one more thing to do. So that's just I'm going to kill my animation for a second, because it's going to again drive me a little bonkers. And so we have each one has its own speed, which is perfect. But what we need to do now is build any clip path. So I'm actually going to change the color of this one to red, as it index it to the top, that top. It's what happens in your code and talk at the same time. So you can see that this one's on the top. And I only want the top half of this one. So for that, I'm going to use a clip path. And I'm going to do a polygon. And it's going to start at 0000 100% zero. Then we're going to do a 100% 30%. And then we're going to do a 030%. And if you don't know about clip paths, so 00 starts here, then we're going 100% of the way across, but we're staying at zero. So we're still at the top. Then we're going 100% of the way across, we're still all the way over here, and we're dropping down to 30%. And then we're doing 030. So we're drawing a box. And those are the coordinates of the box. So if I hit save, you can see that we've cut it, maybe 30 is a bit too small. Let's bring that up to 40. 45. There we go. So it's only covering the top. And then what we can do is add a little transform, translate x, and I'll do a regular translate. And let's do negative 0.05 m and a negative 0.025 m. There we go. They have to be comma separated. So you can see it sort of pulled it up and off of the original one. So that looks pretty good. And then let's just take the exact same thing, copy it, whoops, copy it and paste it onto this one. So here we'll do a Z index to Z index of one and a color of green, just so we can see it. Except obviously for this one, I don't want it to be positioned at the exact same place. So for this one, I'm going to start at 060. Let's start at 060. Then we're going to go to 100%. And whoops, that was supposed to be a 60. We'll do it here too, 60%. 100%. So we've gone across, then we want to go down to 100, 100, and then it will be 0, 100. And now that's down here at the bottom. And I think what I'll do for these offsets is I'll just make them positive. And it just, you know, so one's there and one's there. And even if you wanted to, you could add this to your animation. So they're moving, but I don't think we're going to need it for this one. So we get those different things. Now we don't want the different colors. So I can take those off. We don't need the Z indexes anymore either. And let's hit save. And you get that broken look to your text. Maybe it's a little too broken. But let's see what it looks like once we add on our animation. And I think the speeds might be really high on this. But anyway, we'll see. But there we go. You can see it's super glitchy. One thing I think I'm going to do actually is opacity, like a 0.8. And here too, you know, opacity, I guess, you know, I could have put some of these in one. But I do think that little bit of transparency does help there. And I'm going to bring these as smaller numbers. And I think that will become a 125. And maybe that could stay the same. I think a bit less broken there could help. But you know, you could customize this like crazy. This could be a 2M if you wanted it to be. And it's really, you know, it's a little way too much. But you could play with the amount that you're doing it. But I think in general, these smaller amounts will work better. And you get the super glitchy look to it. So one thing you could also do here to modify it more, maybe make it look more broken is if this was like an 80, and this went up to like a 20. It's hard to really see what happened there. So color is red. So that's making it like more at an angle like this. So by doing that, I think it helps add to the overall like style of it. So it's, you know, the G is a bit less broken. But then over here, it's creating more of a cut on the T. And it's different from this T. So you could play with those numbers a little bit. And if you have trouble creating clip paths, I'll put the link to this guy in the description below. But basically, you can just come in and you'll make your own shapes really easily and play around with that. And then just copy the clip path that it's creating down here. So super easy to use. Now, there is one more really, really important thing that I do want to mention is this could be really frustrating for some users. And some people turn off animations on their computer because they don't like them. So it's really important that if somebody's doesn't want animations that you respect that, especially with this type of effect, which could be really irritating. I think it's, you know, for me, it's getting on my nerves now. It's not so bad if you scroll away from it. So I'm going to grab this right here, which is a media query that I have ready. And I'll show you where I got it from after, but I'm going to paste it in. And it's a prefers reduced motion reduce. So if somebody does not, if they've set their system up to not want motion, we're going to respect that. And we're turning off transition scrolls, background attachments, anything like that. This kills it all. And I think this is always worth having on your site. If you have any sort of animation, transition, anything like that. So by having this in here, and it's doing it on everything and all before and all my afters, by having this in here, if I go into my system settings, so I'm on windows, you can see here, I can come down and say show animation in windows and actually turn that off. If I refresh my pay, or I didn't even have to refresh my page, you can see that it stopped. And that's because this media query here is kicking in. And if I turn that back on, I pro. Oh, there we go. It has clicked back and is on. So if somebody is taking the time to turn that off in their system settings, I really think it's something that's really important that you do respect. So yeah, it's a nice, easy one. And where I got it from is this site right here, which is from Google's web.dev prefers reduced motion. And it was in here somewhere pretty far down. There it is. So actually, I'll link directly to this. And this is something that I think here they mentioned, yeah, there's browser extensions that people might have that will automatically do this, but they might have done it in their system settings. So if they did it in their system settings, it's really important that we honor that. So I'll include this link that goes into more detail on it, if you want to do a little bit more reading on that. And that is that for this video. I hope you liked it. I think it's a really fun effect that you can play around with a little bit. I did it more as an experimentation. And I think it's a fun way to learn more about CSS is trying to do something like this. So if ever you come across something that just looks fun, see if you can do it. And I always like trying to do things with CSS only, even if in production, it's not the best way necessarily to do it, just to sort of push and see if I can actually do it. Because it can be a lot of fun. And if ever you're trying to do something like that and you get stuck and you're not sure what the next thing to do is, you don't know where to ask YouTube comments. It's kind of awkward. I can't see them all. There's just way too many these days. And even having a conversation there sucks. So there is a link down below to my discord community that I would strongly encourage you come and check out. There's a ton of really helpful people that can answer your questions, just discussions that go on. So if you're stuck on something, you can definitely get help. But if you're looking for a community of devs where you can ask questions, get answers and just discuss web development in general, it's a fun place to be. So go check out the link down below and you can join. Thank you very much for watching. I hope you enjoyed this video. It was really fun for me to put together. Thank you very much to my patrons for all their support every single month. You guys are absolutely amazing and your support means the world to me. So I really, really appreciate that. And of course, until next time, don't forget to make your corner the internet just a little bit more awesome.