When you accidentally make something awesome

hi there my friend and friends I created whatever this is a few days ago uh and it wasn't at all what I set out to create and actually I was trying to do something completely different than what you see here right now uh and I ran into a whole bunch of problems along the way and it wasn't working at all what I wanted to do and so I sort of created or started playing around with a few things to see if I couldn't get you know just understand why what I was doing wasn't working and it somehow evolved into what we see here which is I guess kind of neat it's a little bit of a happy accident that we fell I fell into I guess with it now I have no idea what I actually plan to do with this thing we'll talk more about that in a few minutes and I also had no plans to actually make a video on this because I don't really have a practical application for it right now but I did share it on social media just cuz I thought it looked cool and a lot of people really liked it and then I got to thinking a little bit of not only is it cool and I think it'd be fun just to share cuz it's it's neat I guess uh but also because I think there's actually some things we can learn along the way here and how I made it and also the importance of things like experimentation so how do we even get here in the first place what what led me down this path and the first thing was I wanted to do a video on mix blend mode and so what I'd actually done is I didn't have a lot of ideas cuz I wanted something a bit more practical than just like here's a few random boxes so I came over to codepen and I said uh let me look up a mixed blend mode because people make all sorts of crazy and cool things and I saw this one which is a one of the I knew well and we'll take a look at it um and this neon one here and sort of poked around but these were the two that sort of grabbed my attention the most uh this one I like cuz they actually share how they did it and they had an improved version but what's cool here is you see like they have you know this this cool effect that's going on it looks really neat and they did it with color Dodge but they're sort of showing that they have these different layers they have one layer that's the Sparkles that we can see that are being animated uh they have another layer that's sort of this gradient like that but then when you put that gradient with a color dodge it creat creates this cool thing I'm like oh that that's kind of neat but I don't want to copy this idea uh and the other one that I saw was this one which um I didn't want to recreate exactly this either but this one got me thinking a little bit and sort of like I had like this idea of the layers from here and then I had this idea from this one I was like would be really cool because you can see the glowy thing going and I had an idea of how they did that and so what I started thinking of was could I do it where I'd be scrolling down and having the colors sort of like change on the side of a card or something that's that's not moving position fixed or position sticky that has that sort of this this neony effect but only as you scroll down and be a little bit more subtle and I thought it could be really fun uh so I actually tried doing that you can see I had my my first phase here I have my color uh my color burn I'll turn off the color burn here for a second because basically what I did is I put this gradient in the background um that I made really big we can make that a bit smaller I just wanted a whole bunch of colors in the background basically so like I could give it that height of 100 VH so it would be much bigger and then this element here this part of it would stay there as we scroll down um but the problem was and it wouldn't even be necessarily on this one but I was playing around with position sticky to get it to work and uh actually well we'll turn this one on we'll the the color burn on First and the problem is when the color burns on I can get this effect CU I have the other element we're going to see a little bit more how I did this in a second but as soon as I do a position sticky it breaks the entire thing um we we lose this because we can't color burn with that because the position the way position sticky Works um and and mix blend modes work and it would be the same with position fixed um where I I couldn't do it it just it didn't work and that initial idea sort of fell out the window and that's okay cuz we're actually going to come back to this I played around with it a little bit more this is where I hit that moment of like well how can I or or not even how can I do it is just like this idea of something moving and changing possible so that's why I came up with the idea of something that would just follow my cursor around because then I could just experiment I could move my cursor around a little bit um so actually I put a cursor none here because I wanted to create this fake cursor instead um but basically let's let's follow my mouse around and see if I can't change the color of something so my first step was just to make a box and I needed that box to be able to move and and follow my mouse around so to be able to do that I did this where I gave it a left and a top of um this a custom property of X and Y uh with a default being zero and I also did a translate of 5050 just because if I don't do that or we'll come back to that one in a second actually but then all I did was just use um you know document Mouse move and I'm just getting the the movement of my mouse and try putting that to the X and the Y coordinates there's nothing complicated here if you want to look at the code you can um I'll put a link to the finish code pen in the description U you can see it's like it's not centered on my mouse so then I can come in with this translate 5050 so then it's centered on the mouse makes it feel a bit more natural I guess I don't know I just didn't like that I could like hang off in weird ways I guess um really not essential um and then the background white I wanted to keep but then I also wanted to give it a blur so we can do that with a filter blur of say two Ram you just play around with this number um and you get a blurry box and then of course a border radius um of a 50% and then you get more of a blurry Circle instead and that was I did this on the before I don't even know actually I did that on my before cuz I was experimenting again let's see if I can do it without that we're going to um and if I do that I don't need the content on there uh so we'll whoa whoa whoa okay something maybe we'll go back to what we had why is that happening I'm sure there's a good reason for it um I don't know what the good reason is so we're going to go back to what I had I don't I don't want to get into to debugging right now but this one's working so we'll stick with that version of it um and just really fast actually I did put an overflow of hidden on my HTML here just cuz cuz if not when you sort of reach the edges of the page it will cause some scroll bars so that's why I had that on there normally in most projects I don't do this it's not the best practice but for silly things like this it's fine now obviously this doesn't do much but my idea was and this is sort of what I started with here when I sort of had it working was I had this white part which was what's showing me the stuff that's behind it sort of it's creating that window into the gradient that I wanted to get to so that's why first I needed sort of a white Blobby thing I could move around uh the other thing is I did want a black background here we'll talk more about that in a in a few minutes um and then I needed to have the actual gradient so because I had this set up on my before and actually maybe this is where let's try it here we're going to do a little bit of continued experimentation um where we can put this is on the cursor itself yeah okay um so I think there we go so I can have this conic gradient um basically and I just wanted a whole bunch of colors in the background so I did a uh conic gradient and then there was one problem and it wasn't a problem necessarily um but if I didn't put something in the middle they sort of all meet in a really sharp way so I just added a radial gradient on top of the conic gradient um that had sort of filled in that middle bit that was right there um and you could you know muck around actually the first version of this I just had a whole bunch of radial gradients sort of all over the place I just thought the conic gradient would be a little bit easier uh so we can come in with that and then this is the idea of where I can then come in with a uh mix blend mode and mixed blood modes are super weird and you sort of have to understand how they work but I just through experimentation basically um and also knowing that as I said that black background is kind of important for this part um if you had a white background there might be another one that we could use but uh this is where the there's color Dodge and color burn I think color burn was the one that ended up being the correct one okay right the this is what I originally tried and I forgot but this doesn't work because what's happening is the color burn is on the parent which means the children are also getting the color bur on it um so then this doesn't work anymore so uh just because of how I set that up let's take that off of there and just for simplicity's purpose we'll come here and we'll do this um as my after instead I am using nesting here we're in regular CSS nesting is available here was experimentation I'm not worried about browser support uh and because this is a Pito element we do need the content on here and I think if we just do that there we go it it comes in and it magically works so basically because of the way blending modes work and the color bur works and everything the the color bur um is something that's focusing on the darker colors uh that are available and it's sort of taking those darker colors and then by having this white thing on top we're sort of getting that extra layer of stuff I don't even actually know to be honest with you but it works um I guess I I didn't I gave up on like trying to explain how they work um because I was just doing this experimentation but that was kind of cool and I did go okay if I can do that there's probably another cool thing we can do right so the next thing I did um was I actually came in and I added this rotate Hue um and let's turn off this color burn for a second so we can understand what this is doing uh and then I just take that animation and I can come on this and so another fun filter there and I said we'd get into some cool animation stuff uh so I can put this rotate Hue on there and that's going to rotate the Hue of my colors and you can go through a hue of 360° which means you do the full circle so every 10 seconds it's just going to go through the full loop of colors and why that's kind of cool is now I don't even have to be moving my cursor anywhere for it to actually start shifting and as you move around it's always going to seem like a like if I'm here now it's sort of this Bluey purple and then I go around I move it a bit and then I get there and now it's red so I just thought that was like this fun little extra thing and again just through experimentation and finding stuff and it got me to here um I did say there's a few limitations to what I did here so if we come up and we take a look um my background black this is important because the color burn is part of like the the darken things and actually just just for fun let's go to color Dodge here this is like the crazy version of it color Dodge is like the extreme version uh so sometimes actually with the colors it can look really good and you get more of like a glow when you hit some certain like thresholds and colors it does this which is a little bit too much um and I actually got stuck at one point in in playing around with stuff cuz I was convinced I used color Dodge I think because I was looking at this demo and kept going back to that so I was like oh color Dodge is what I want and then I was like this doesn't look like what I'd made and I don't understand um why it's not working so uh yeah color burn in this case was just a little bit more relaxed and intended to work um I also realized it stopped here CU I didn't put infinite on there infinite there we go it's like my color is not changing anymore cuz it only did it once um so now we'll we'll keep on changing forever um and yeah this actually then led to me coming back to this idea um and we'll get back to the black thing in a second sorry I'm on tangent Ville right now but this did get me coming back to here in a way of like well if I can't do it well it's scrolling maybe I could uh still take advantage of this um by doing a animation on there and I guess you could do like a rotate Hue but that's why I had that large background size on here and then I just did a thing that would move the background around so I'm um just repositioning the background and let's there you go you can sort of see it it creates this sort of like interesting weird moving gradient type of effect and it's not that typical one where usually you see like it spins around in this case it's doing something a little bit different I'd have to play with the values and see if I couldn't get something that looks a little bit better um but basically all we have is that oh that 100 VH does not need to be on there but yeah basically I'm just moving the gradient around um in that space and by moving it around we can create some interesting things and maybe if I did want this to be on something I've been looking a lot at scroll based animations I'm just thinking of this now but I could probably somehow I'm wondering if I could make these custom Properties or something yeah because you can do it with an animation so I could have something very similar to this but it's completely based on where my scroll position is uh instead of being based on just a regular animation so that idea comes back and I I honestly never tried that uh so let's let's do that really fast and this is honestly on completely unplanned um little tangent we're going on here right now um but part of what I wanted to talk about was the importance of experimentation and playing around with these things and just by doing this now and coming back to it and looking at the animation that made me think of that and I think it's a really important thing that sometimes you just experiment and try things that might not make any sense just to see is it possible if it's not possible doesn't mean it's a dead end it means that maybe there's other things you could try uh so here move I'm going to take off the time alternate and infinite um we'll just put linear I guess uh and and leave it like that so it should stop animating and then we can do an animation timeline of uh I guess we'll just do scroll for now um just to see if this works and so that should oh so it's really fast but you can see like that's sort of the idea I wanted I'd have to play with these colors a little bit um oh it's really fast cuz I don't have a lot scroll if I'm G let's just give ourselves P * 10 lauram uh and I'm using scroll I think view would be better here I'll put a link to my video where I explored scroll and view timeline so now I have too much so uh let's do a view on here instead um and then on The View so because of that let's just copy a bunch of this stuff um and then we can come up here and paste so it will scroll into view and then so when I get to there well it's a lot more than I expected there it is so as it's in the thing it's going to sort of go through the animation that I created there um so yeah I don't think I'd use it exactly as is right now but it's a fun little like proof of concept that this idea even works and there's probably some other stuff you could do with this and I'm hoping I'm unlocking ideas for you right now um and because that's sort of something I want to get to is coming back to this which I really like I think it's really neat um and we'll go to here before I get to that and where I said the black background is important is because the way the mix works if you have like a bright color you still get this weird thing going on um but even if I came in with like a purple you start getting some weird effects and it really depends on the color that you use so you can see that it's still going and then I still get this happening and it's sort of kind of cool on its own as well um and it just has to do with how color burn works and the darker colors and the lighter colors and um it's a little bit beyond me to be honest and this is why this whole thing works in the first place though I think is because those odor edges of the glow are lightening up things to the point where I guess we're getting the effect to work if there's somebody who knows better than me leave a comment and I I might pin it but I think it has something to do with that uh right so even like a I don't know orange whatever you play around different values and you're going to get different types of looks yeah that you know get a little Galaxy style thing going on anyway all this to say like I think it's a cool thing um I think I just discovered something in a way that I might be able to use it in a more interesting way here and we could do something something a bit more in depth but this whole video the purpose of it is more to talk about experiment have fun and if you have any ideas of what I can do with this I'm going to put the original version or the finished version of this uh with the black background linked down below to this code pen and what I want you to do is I want you to Fork it and do stuff with it and then submit it and I want to see the different things in different like actual use cases people can and I'm going to do a video featuring some of the cool ones that people post um so I probably won't be able to post all of them the on thing is YouTube does not like having uh external links in YouTube comments so I'm also going to put a Google form down below where you can submit your link to your fork code pen so you just come here all the way down at the bottom there's a little Fork button do whatever you want to it if you can think of something cool whatever it is I want to I want you guys to be experimental have fun with it and then as I said we'll come back in probably a few weeks from now um it might actually be in like February that I actually get around to it just because my January is crazy busy um and then I'll feature some of the the amazing things and forks and other stuff people have done with this you can do whatever you want with it there's no limits have some fun and I'm looking forward to seeing what you create with it

Channel: Kevin Powell

Views: 39,725

Keywords: Kevin Powell, css, front-end, frontend, html, web development, css tutorial, tutorial

Id: VqSz7myU5iE

Length: 16min 38sec (998 seconds)

Published: Tue Jan 23 2024