 Hi there, my friend and friends. I recently came across this code pen that we can see right here, and it's from Alvaro Montoro. And now, while it doesn't look that complicated, at first glance, it made me stop when I was looking at it and go, wait a second, how did he do that? These corners here, there's something going on, and I'm not 100% sure how he did it. And it made me want to see if I could figure out how he did it without looking at his code, because I think little things like this sometimes a designer hands you something like that, and you start plugging away at it. I want to sort of share my thought process along the way and show you how I get around bugs and other problems. But of course, if I do get stuck, I can look at his code, which is definitely a nice little bonus. But I'm going to try my best not to look at how he did anything and try and figure it out on my own as I go through all of this. But just before we dive into that, I just want to let you know that I have some new merch. So you can see right here, I'm going to actually be retiring the old lineup eventually as well that I had on Teespring. This is with Cotton Bureau. Quality is a little bit better. Got some custom designs made that I think look pretty good. It can support grid or I have a cascading style sheets one or just a color space one, potentially more designs on the way. We'll see if you guys like these. And of course you can advertise that you are a front end friend at the same time. But anyway, with that out of the way, let's get into the code and have some fun with this. So here is what we're trying to, and just to highlight a little bit here, because it's a little bit hard to see with the background he has set up. But I did check here because he has the fancy linear gradient going. And if you replace it here, you can see like it doesn't matter what the colors are or anything in the background, it's always going to work. The darker the colors, the harder it is to see the shadow. But other than that, like it doesn't matter what's there. And that's sort of the tricky part and the little offset here. I'm not 100% sure about. So I set this up as what we're going to be doing as a starting point. So I took the same HTML that he had. So we just have a figure with an image and a fig caption and that's what we're going to be working on for everything. So the first thing I'm going to do is set some padding on here of say one REM, there's probably a default margin. I don't think that's a problem. It's at a background of white. So we have something there. We'll say color black. And just to make sure you can see we have all that extra space on the side that we don't want. So our width here will also, yeah, we'll just set a hard width for now. We could do some Macs content or something. Oh, and then of course we need our image, Macs width 100%. I thought I had that already down below, but there we go. I apparently, I didn't. So we're good to go. We get started on that, which is almost all the way there, right? We just have this little corner thing to do, not a big deal, except it sort of is a big deal. So I'm not sure how we're going to do it. My initial thought, whenever I see things like this is pseudo elements and I think I can get that idea going to make this work and yeah, well, let's see what happens. So we have my photo and I'm gonna do a photo before and we want a dot photo after because we want for the top corner over here and the bottom corner right there. So we need content, content on both of those. So our pseudo elements actually show up. Then what do we want? The position absolute. So we can get them exactly where we want. So position absolute, because I'm doing position absolute there on the photo itself, we can do a position of relative. Cool. And now let's just make them like show up. So it's CSS when you're playing around with stuff, the best thing to do is give them a background. Let's do hot pink and we'll give them a width of, I don't know, 10 rem, it's way too big, but whatever, 10 rem height. And saving the height, I'm just gonna say aspect ratio. I think if they're a square, it should work out fine. Yeah, too big. Let's try five. Five is probably still a little bit too big, but it's gonna be closer to what I want. I think that'd be okay. So we'll start with the top one, which is our before. And let's get that into place. So we're gonna say the left, we could probably create some custom properties here. So it's always depending on like the padding we put in other stuff, maybe, and based on the width that it's always in the right spot. But let's just say width is minus 2.5 rem and see where that puts it. I think that's actually okay then. And then top will be a negative 2.5 rem as well. And then we're gonna do a rotate. And yes, rotate is its own property. Just in case you didn't know, I was gonna do a negative 45 degrees. And I'm like, why am I doing negative when you can do a positive? Cool, perfect. That's sort of what I want. Because now we can do a box shadow on there. Let's start with a, if this is this easy, that'd be cool. But I think, I'm not sure, I think we're gonna run into problems. Just give it a black box shadow that's going to be, I'm gonna make it dark enough because I have a dark background. And of course we want one rem here to make it a box shadow. And an interesting thing with shadows is, if I change my background here, background to transparent, shadows don't actually show up like underneath the thing, which is kind of cool. And I think we're gonna use that. But I just realized a problem. Okay, this is, and this is why it was tricky in the first place is we're clipping that itself on the border. Okay. So this can't have a fill to like cover. I think I'm gonna move it back. Let's do a negative three, whoops, not 44. Negative three, three. Okay. I don't know how we're gonna hide this white bit. But okay, so whenever I have a problem like this, instead of worrying about that side of things, go with your easy wins first and then worry about it. So I'm gonna improve my shadow. I'm gonna make the shadow darker now just so we can really see what's happening with it. And maybe what we'll do, let's just lighten up the background a little bit too. There's my background. Let's just make these 300s. Because that's my light version. It's just gonna make it a lot easier to see the shadow because I wanna see the shadow right now because I'm gonna be playing with these values on it, which are my offsets. And we also have right now a zero here that I wasn't putting because that's the, oh no, whoops, we have a zero over here, which is our spread. So the first thing I'm gonna do is actually like a negative one REM for my spread, which is gonna pull it in. It makes it completely vanish. Let's do a one first actually. What the spread is, is it means we're going that far and then we're gonna start doing our blur. So we have one REM and then we blur for one. So if I make that negative one, it's pulling it in one. And then we have like one REM of blur, but that whole one REM of blur is underneath it. You can see like just the faintest little hint there barely. So maybe then this goes up. No, this one, we're gonna keep it one. But then I rotated it 45 degrees, so my right side. So I think if I move this like 0.5 REM offset, it should. Oh, I did the wrong one. So this one stays at zero. It rotated that way, whatever, it doesn't matter. This one's gonna be a one REM for now. Let's just try that. There we go. You can see it's actually like showing up a little bit there, which is basically what I wanted. It is bleeding out a little bit on the other sides. So I'm gonna make this a little bit bigger and see what happens. You can play around with these values a little bit and stuff, but we sort of get that idea of what we want. The hard part now is hiding the white part, right? So you know what, well, again, easy wins. Let's just take this and I'm gonna put it here and I'm just gonna update my numbers here. It's gonna take me a while to fill around to get it right. So I'll fast forward to when this part is finished. All right, proved to be easier than what I thought. It would be, I just made these, instead of being the left and top, it's now my bottom and right, and then my offset just switched from being a positive to a negative value and my shadow's in the right spot. Now is the part where I really don't know how I can do it because as I was doing this, I was thinking I could use a clip path, but clip path won't work because these are part of that element, right? Let's try. I'm also really bad at clip path, so we might pull up clippy. Photo, so if I did a clip path of polygon, and let's just say we did 10 pixels, I'm just gonna do a fast 10 pixels, 10 pixels, 10 pixels, 100%, 100%, 100% and zero, zero. It shouldn't matter too much. Yeah, it doesn't, I mucked it up somewhere along the way. It doesn't matter, but it's cutting off my shadow too because those elements are inside of that element because that's where pseudo elements live. So a clip path there doesn't work, which is a problem, because that's sort of what I was thinking along the way. Damn, I'm really happy with the shadow too. I'm really a little bit disappointed that that doesn't work because I could definitely clip path to follow exactly on here and that would work, except we'd be missing that little bit. And I think that's sort of what, it's this part where it's sticking off the sides that really makes the whole effect come together. So how would you do that? This part was easier than I thought and now we're getting harder. I knew there was a trick to this and I can't figure out what it is. Okay, let's go look at Alvaro. I don't know, we're gonna look at Alvaro's code. I honestly have no idea. There's a lot of gradients going on. Far the side, far the side. Oh, okay, so this is using that gradient syntax that I already have trouble with. He has radio gradients set up. Oh, you know what? I think these are gradients over here and not pseudo elements because that's what these are, right? If I comment those two lines out, that's the gradient. Does he have a clip path? He does have a clip path. Okay, so I wasn't crazy. So he's clipping it, but he's clipping it just to take the two sides off of it. Wait, okay. Oh, wait a second. Let's just take off all the gradients. Oh, not what I expected at all. So what he's done is he's faking a lot of this. So the white here is actually a gradient. I could leave my pseudo elements and I could do the same idea, I think. Oh, okay, so, yeah. Okay, so that's really interesting. The box shadow that looks like a box shadow is not a box shadow. The box shadow is a gradient. And then he has to do it for each side, right? I think so. Not, okay. So for the clip path, let's do that then. So we had the clip path, which was good. I'm glad I was right about that. But the background isn't going to be that. That's really interesting. Okay, I'm trying to wrap my mind around how he did it still, even though I get it. Let's start with the clip path. So here, I don't even know how to figure out how much that should be, but I bet you there's some math that we could do to match exactly how far. How did he do that? C, C, P, P. There, yeah, he's using the values there. I don't know, it might be a bit trickier to get that to line up perfectly, but let's just, I'm gonna do one second, Clippy. Okay, so yeah, with this Clippy thing, you can just add points, delete points, move stuff around. So I just want the general shape because as you saw before, I screwed it up down below, I can copy it. And then I can just paste that into my clip path here. The only thing is I don't want those to be the 15%, which I don't know what I want them to be because we need to move them to the right point. I was gonna base it a little bit on the size of these, but I think it might be, oh, I did width five. What if I just did 2.5 RAM? Is that gonna light? Let's see what happens. 2.5 RAM for those, just for fun. I just, I don't see. Why is it 1.5? It must be because of how I moved it. And it's like not 1.5, it's 1.55 or something stupid, right? Yeah, hmm, okay, whatever. 1.55 works perfectly, I'm magic numbering it. I'm not gonna worry about the math. We could definitely improve that because this is like, so I'm going like, I'm starting at like 1.55 here and the 0% is the top, then we go all the, oh no, we're starting at this point, sorry, we're starting here, then we move over and up, then we move all the way over. I think I've probably done a video that looks at how you can do clip path. I'm not sure actually, but whatever. Here I'm gonna do a calc though, just because here we can do calc and do 100% minus the 1.55 and then that should set up that one in the right spot and then the same thing here, we can just copy that. So it's in the exact corner that I need it to be. I don't like magic numbering things. Ideally, I would sort of figure out how I could do that with some math, maybe either do the whole thing with gradients like he did, but I sort of wanna see if my method here would work. Now, the other part that's the weird part is the background, right? So my background instead of being the white is going to be linear gradient now. We're gonna gradient and I, okay. So linear gradient and then we're gonna make the padding two instead of one and that might break my positioning. Oh, okay, that worked. No, it doesn't, okay. We're gonna stick with one and we're just gonna have much smaller borders than he did. So linear gradient, we're gonna start from the left and we're gonna go that way. So we're gonna do a transparent. Then we're gonna do point five, we'll do a white, oh no, we'll do another transparent. We're gonna have to change this in a second, we're gonna do a transparent at point five rem because I want it to be half of what the padding is here. And then we're gonna do a white at point five rem and that will be at 90 degrees because I mean that works, but that's going from the top. We want it from the left. Okay, so it's working, but I still have the issue with my shadow being busted. But you can see like what that effectively has done is it's pulled this in a little bit. Yeah, that sort of stinks. And I guess so that we do the linear gradient that way and then I can have the same one, let's just copy that. I don't know if this is gonna work. Let's paste that one in there. The second one and then just take off that 90 degrees. No, the problem then is it's doing it that way. So, oh, okay, so we're gonna do to white. Let's delete this one. So the problem is like if I do it left to right, we're doing the transparent to the white, but then it's filling in everything. So we need it to stop here as well. So then we're gonna say white one rem and then transparent again at one rem. So we're just giving us that side that's right there and it fills all that in. Then we need to do the same thing from the top. So I don't think I'll do all four sides here just because we get the idea of how it works. This one I can just take off the 90 degrees and I think, there we go, it's working. So then we do the same thing for the left and the bottom one would be bigger just because we want more space there. But it gives us the idea because of the clip path, my shadow is muckered though, which is a little disappointing, but I could probably play with the offsets or the positioning. What if I brought this back in closer? Too far, I guess. Pixel values might be a good thing. Or see, it was lining up well with my clip path too. Okay, yeah, because the clip path is out there. I think if I gave myself more room to work with, padding, I think my padding was too. I'm just trying to think and then I moved, I'd have to move everything around. I think if I did that, I gave myself more room to work with though then I could move this gradient in more and then it wouldn't be getting clipped the way it is. The only other thing that I didn't do here is he also was simulating the drop shadow. So that would be here. So instead of, we do transparent and then to like, well, let's do an RGB of 0, 0, 0 over 0.5 or something. So we're simulating, you know, I don't know, 2.5. We do a light color there. So we go from transparent to a black. So we get a gradient shadow going that way. And that's simulating the drop shadow that he had, right? Because definitely we have this shadow that's all the way around. So he's doing that and we're simulating the shadow the whole way around with the gradient. And then we have the white coming in and then we have to do that for all four sides. I never, ever, ever would have thought of that. We definitely need to improve upon this a little bit. So yeah, I think it was really cool though. And definitely one of the ones, it's a bit of a shorter one like this. I've done much more in-depth and longer ones, but I really like this effect that he did. And I'm surprised with how he did it. The numbering to position stuff, I wouldn't want to leave it like this. I would definitely look at a little bit more on how he did his math to figure that out. And I think we could figure it out on our own as well, but I don't want to just waste time going back in. And you know what? I'm going to fix it and I'll be back in a second here. You don't have to see me muck around with it, but I think it's worth getting there overall. All right, look at that. Isn't that so much better? I got there. I'm super happy. Basically, I did what I said. I increased my padding more just to give myself more room to play with. And then I just had to update my clip path here to just cut off a little bit more. Because if I didn't update that, I was at one point I thought I was completely done for because I started getting this crossing thing going on. I was like, oh no, that's bad. But I'm like, wait, I can cover that up a little bit. So I did exactly that. I covered it up just by moving the clip path further in. And then I just realized when I did that actually, my positioning of my before and after here, I was hoping, because these are at three. So I put this left and top at three. But I think because of the rotation, it's not perfect. And this is where maybe like some Pythagorean theorem could come in, you know, would that work? Let's try. We'll put this in a calc and do, is it 1.41? That didn't work because it's getting too big. I'd have to think about it a little bit. There's probably a way instead of magic numbering this. So if you have an idea on how to get to exactly, or maybe I could look at Alvaro's, but we wanna sort of line this up perfectly or as perfectly as possible. But I'm just wanted to show that we can actually like get there and get sort of that same effect that you had. I have that little white line that's showing up. So maybe I'll just stick with my three. It looked fine. So yeah, I think that actually looks pretty good. And we sort of get that overall vibe. I think it would be better if my shadow stick out a little bit more. So, you know, I don't know. I hate magic numbering things along the way. But you know, we wanna get the right look for it. But obviously we wanna be able to like update things and change things and get the exact look. Maybe it's better with the radial gradient than what I'm doing here. So, you know, which is what Alvaro did to get that corner effect. So I'm gonna link to Alvaro's down below. I'll link to my finished one down below as well, just so you can sort of dive in and play around with them and stuff like that. This is the worst one of these I've ever done. Usually I get closer to like a finished result, but I'm pretty happy with this. And I definitely, this idea of like the transparent to a gradient to a solid color to simulate a box shadow and then doing that around all the sides is really interesting. I probably wouldn't, I would never would have thought of that on my own. So I'm happy I looked at this by trying to implement these things, getting stuck and then finding solutions. It just makes things stick so much for you. So actually like building stuff is really important to remembering these. And if you liked this video, which I hope you did and you'd like to see more where I sort of struggle my way through trying to match a final result. As I said, usually I get a little bit closer to what my end goal was though. I think we got the spirit of what Alvaro was up to here even if we didn't complete the entire thing. But yeah, if you enjoyed this video and you'd like to see others like it, there is a playlist right here for your viewing pleasure. And with that, I would like to thank my neighbors of awesome Andrew Simon, Tim and Johnny, 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.