 Hi there, my friend and friends. If you've ever seen any of my reaction videos in the past, or just dug into amazing code pens on your own time, you've probably seen some of Ben Evans' amazing work. While he has a normal front-end developer job during the day, he pushes the limits of what CSS can do in his spare time. And I've long been amazed by his mind-blowing creations, and luckily he was kind enough to talk to me about how he's inspired to create them in the first place, how long they take him to make, what he's learned from making them, and tips for people who want to get started with this type of thing, as well as much more. And here we're going to be opening things up with him, answering a question of mine where I asked him what he has to say in response to people who question the point of making crazy things like this with CSS when there are easier, more performant, and more practical ways to create these things than using CSS to do it. Well, yeah, I agree with those people. It is pointless, but I sort of fell into it through laziness. I was, I wanted to write a sort of story and then make a website about it and have illustrations on it that sort of went from page to page. And I was feeling very lazy. I couldn't be bothered to find any software. I couldn't be bothered to draw with and couldn't be bothered to put my laptop down, find a pen and paper. So I thought I'm used to doing front-end, I'll just draw with the CSS and it worked really well because I could move the images from one to the other and they sort of morph into each other. Obviously, it's not great for the GPU, but yeah, that's how I got into it. And then towards the end of the story, I was writing, well, I did two chapters and gave up, but I drew a glass and I thought, oh, this is really fun to draw in CSS. So that's, so then I did a proper photo realistic glass because it was so much fun. Yeah, that's sort of how I got into doing them on CodePen. When did you create that? It was a long time ago, I think. About five years ago now. Yeah. It's still, looking at it now, it's still mind-blowing for me that it's done with CSS. It's crazy. The code is horrible now, but I'll look back at it. Right. I can relate to that even when I look at some of my old videos and I'm just like, oh, I wouldn't do that like that today, but yeah, it's the joy of being a developer. Yeah. Drawing with CSS seems to have lived as well really well to the glass. Drawing man-made objects is quite simple, which is why I keep not doing that because it's harder. Lemons are much harder than the glass. And then I moved on after that to portrait just to challenge myself and then a landscape and landscapes are pretty tricky because of all the minute details of leaves and things. Yeah. I can imagine. I mean, everything here looks tricky. Even with the glass, I'm looking at it and I wouldn't even know how to start with any of these and just looking at all the different ones that you have created. Obviously, it was interesting at first. It was for illustrations, for a story you were doing, and then that sort of led to the glass when you mentioned it, but just even the idea of it before you start, where does that come from? Well, that one was sort of a natural progression. So I did the glass and then I thought, well, that's a still life, so I should do a portrait and then I should do a landscape just to go through all the sort of three types of main types of art there are. And then I got a bit bored of just copying photos that I'd taken. So I thought I could probably try and do something that doesn't actually exist outside of CSS. So that that image doesn't exist. That's the end place that exists in the photo. Because obviously you can't take a photo of the future. That one was too big for the browser. Surrender. And it took a year to do. Wow. OK. But part of the part of the year was I had no idea how to draw it. So I had to learn Blender to draw the actual machine. Oh, it's interesting. Blender is really good. I've really got into Blender. So the pyramids in the background from Google Earth. I just assumed it and drew those. And then the sort of plastic rubbish is just a picture of a plastic. And then, yeah, the machines I drew on Blender and covered it into CSS. During the rubbish when I'm courageous, I was like every single bit of rubbish would seem to be one per evening. Wow. Yeah, 12,000 lines of code in there. And I noticed this one is HTML anyway. And I think the other ones I looked at are too. Usually when I'm looking at these, a lot of people use pug. Do you write it in HTML? Yeah, just HTML. I have done pug for a carousel I was trying to do. Because I wanted it to be super small. But yeah, I just play in HTML. And because it's art and not practical in any sense, I don't stick to divs or anything. I just make up my own elements. Because it's good to have those as a starting point because they don't have anything attached to them. There's no display block already or no margin underneath or anything. Yeah, that makes sense. And then it's also a little bit easier for you. And it's just your lights and your highlights and whatever you want to call it. You can find it easily. You're not worried about class names or anything like that. And every single element is usually an ends of type. So I just do ends of type, a 3-H thing. And just write little comments on which is what. But yeah, going back to your first question, I didn't quite finish answering that. So it is pointless. But the sheer amount of stuff I've learned from doing it is ridiculous. I mean, I'm a much better front-end developer now when I started. Yeah, I think Lynn Bish has said it in one have-are videos that you can't master something without knowing its limit. And so I'm really pushing the browsers to the limit, to the CSS to the limits all the time, too much most of the time. So as I did the art gallery, I could just do another room and do another room. And then I kind of thought of a dungeon crawler type game and started drawing the walls for it, like the stonework. So I drew the stonework. And I thought, I'll do the map. I'll do the layout of the maze. And just did it in plain red, as everyone uses for the default thing in CSS. Did it in red and white, drew the map. And then I thought, actually, this just looks better in red. I'll get the drawing trying to get the browser to draw the walls. That's funny. But I sort of messed around with the, it's got this sort of depth. There's a really subtle shade of layers and layers. So you walk through them, but you don't really notice. So everything gets a bit lighter when you walk through. Oh, that's how you do it. And you can see they're at angles, so it sort of helps with the look of the shadows. Yeah, it gives it a little bit of the texture to everything without having to be too complicated with all you're doing, which is great. But creating something like this, obviously, you had an idea of like, OK, well, you built this one, as you said, on top of the art gallery one that you had, which sort of showed all of your other work, which was really cool. But say you get that idea of like, even for the art gallery, you come up with this idea of I want to make an art gallery that people can walk through and it goes to the different pieces I've created from that stage to the next one of, OK, I'm going to sit down and actually make this. That's a big jump. I know for me, I would just be looking sort of like a beginner when they're staring at a blank VS Code document and have no idea what to do. Yeah, every idea seems to just progress into the next. The original art gallery was, obviously, as every front-end developer does, they drew a rotating cube in 3D. So I'd done that and I thought, I just thought, what about if I was inside the cube? Then it would sort of be like a room. And then I could probably put a grid over the top. I'd done a spider web before this, where a spider chases your cursor around, depending on what section of the web you hover over. So I thought I could probably do a similar grid over the top of the room so it just rotates the cube, depending on where your mouse is on the grid. So I just keep combining all my ideas every time I do one, it just sort of naturally leads to another one. And then browsers keep bringing out new CSS all the time, especially at the moment, it's gone crazy, no matter the new stuff. And so I just think, I'd like to try that new thing or something like that. And it's just a nice idea of how to combine what I've done previously with this new feature they've just released. So the ideas don't ever seem to stop. I'm always amazed by it, but I guess something like the Has selector or some of the other things that you said have recently come out have probably made your life a lot easier. Or even, I don't know if you've been able to use them now because they're more new, but some of the new color features we have too could probably come in handy. Yeah, I haven't really gotten to the colors that much. I've used the new Has and things like that, which made things a lot easier. You'd mentioned that that one that was in the junkyard, the futuristic one took you a year to create. I'm assuming they don't all take you that long, but I just said, you know, they all take quite a long time. The Mock-A-Pot I just recently did would seem to be the quickest one I've ever done. Normally they take months. Yeah, the longest was the sci-fi picture. The second longest was probably the game where you have to go to the lighthouse. Yep. Because I had no idea how to do that. I was just messing around during houses and everything. I just had a 4x4 grid, I think it is, and then I was drawing every single possible combination of how stupid possibly draw. And then got three months later, I thought, actually, there's too many combinations for me to do. So I scrapped the whole thing and started again and built this sort of formula to work out how it would grow from the floor using checkboxes and how it would know if it was from a built-in-the-sky using sort of bits that I'd collected from the three months of drawing how this one boat worked. Yeah. And I mean, that sounds... I know for me, it sounds a little frustrating, I guess, when you realize that maybe you went down the wrong path and something like that. Is there ever been a time when you just hit a wall and you haven't been able to finish it or haven't been able to get whatever you wanted to do, finished, or...? There's a few that I haven't finished on this. There's someone, I'd like to draw this 3D game where you sort of fly above the landscape, but that was a bit too much. I thought, I wonder if I can drag, sort of, invent a way of doing drag using CSS. So I like a nice pun, so I'd start drawing this dragster that you might be able to drag around in 3D. But as I was drawing this dragster, it's like a retro, low-polygon thing. It sort of reminded me of the Mario 64 starting screen. So I thought, I'll do all that, instead of just gave up on the drag idea altogether. Yeah, that Mario one was really cool. I like that one. I'm stuck with one at the moment. I'm trying to draw the Earth in 3D without using any JPEGs or anything. I'm trying to get the browser to get to the sort of level of detail I want to be quite realistic, but the browser really struggles with drawing a sphere. I guess it's also the fidelity of the sphere because every piece of it has to be in... Well, I guess a little bit like the Mario almost, but at a higher fidelity. Yeah, I don't know how I'm going to do it. So I'm just picking random planets in the solar system and trying to think, oh, I'll come back to the Earth in a minute. I've just done this pun, which was quite nice and quite easy to do. And I think it's a pretty sort of progressing my way into knowing how to do the Earth, but I'm not there yet. I'm just wondering, you said from the beginning that they are kind of pointless, but they open up this door of learning. So I'm guessing that you've come across at least a few interesting things along the way that maybe could be useful outside of 3D creations or even if it's just like these really fun tips or tricks that like, oh, this makes this a million times easier. But yeah, it sort of trickles down into my normal day job, but there isn't a lot. Because you just learn every single thing you can do with an element, I think that's the main thing that makes you learn. You see something and you go, oh, I can do that with that wall. And it just becomes like second nature because you've tried to manipulate every single element or every single bit of HTML in every single way possible. My starting point is always to put the colors nowadays, to put the colors in variables and keep your palette quite limited because then you can change them further down the line. Like when I was drawing my daughter, the portrait, I started on the left eye and it was looking quite creepy, like one of those horror film dolls. So I stuck a filter on it and changed the colors to sort of warm them up a bit. So then I put the filter on the photo I was copying and copied the rest of the image using that filter. So that eye, one eye has a filter on it and the rest of the image doesn't, but they match. Which is really weird. So you can always just put filters on things if things look really bad. Aspect ratio, I've really got into recently because that's super quick. You can have to mess around with the height and the width. I think for me, it's a little bit like you said though, is like the more creative you get and run into, like when you're doing things that are outside of the box, you learn a lot about it's a problem solving, which at the end of the day is what our jobs are. So I think that's like the main skill and just like a deeper understanding of how everything works. So when you do run into something, you sort of right away have an idea of how to fix it or how to approach it. Or if you don't know how, you've been probably, if you've been flexing the creative muscles for a while, you can sort of come up with a solution a lot easier because you know just how everything works in sort of different ways. Yeah, you get so familiar with it just from trying to do everything you can with it that it just becomes second nature, makes your day job seem really easy. I think it's just incredible that the stuff that you build and obviously, you know, whenever I'm looking through your code pen, I was just always, my mind's always blown, but I'm curious from, with all of the creations that you have done so far, any of, you have like a specific one that's your favorite. My favorite is always the one I'm currently working on. Because it's always better than the last one. It's like, I was really pleased with the mock-up pot I just recently did. Because it was so quick to do. I just had the idea of like, I think I saw some art on Instagram of just the mock-up pot. I think it was green and red or something. I just thought, oh, that'd be really fun to do in CSS. You can make it 3D quite easily because there's only six, eight sides to it. And as I was doing it, I realized that I could light one side of it and then gradually fade the light out as it span at the same time. So it looks properly three-dimensional, which is something I've always wanted to do and never managed. I've never managed to get light into working in a CSS part. Yeah, that's funny. Because as you were, just as you were saying that, I was looking at like the middle part of it. And I was like, wait, how did he do that with the lighting on there? It's just, because usually you get that, you know, the light turns with it because you just color each one individually. That's really, is it, again, a filter? Like something on top? Or is it, yeah. So colors background doesn't work. It just jumps from one color to the next. Maybe use a filter. You can filter the colors smoothly. That's cool. I wouldn't even have thought about it. Yeah, that's neat. That's not even how I was thinking it would have worked. That's awesome. So not only am I doing from, I think I'm just adjusting the lightness of each side. And I'm also rotating you. So they start off yellow and then turn blue as they get to the other side. To sort of give it that proper shadow feeling. Because originally I was going to make it crazy, like red on one side and green on the other. So like the original art I saw. But then it started to look so real that I just wanted to make it so you have real I could get it looking. And then I had to fake some shadows. Like the one on the hand, it's not how it would look in reality, but there's a sort of fake shadow on that. And there's one on the, there's a tiny shadow on the spout. Which should be a lot longer than that. But I had no way of wrapping it around the edges. So I have to sort of fake things. But it's interesting even there because it has enough of the realism with the rest of the light changing that you don't really notice that shadow should be moving or shifting or anything along with it. Yeah, it's really cool. And then the actual big shadow on the base wobbles with the changing sides of the actually going quite hard to get right. The one, the rotating card that I did was also the hardest part of that was doing the shadow. The shadows always seem to be the hardest part because they're not attached to the image like they should be. The card was quite funny actually. Diana Smith, I'm sure you know of. It's sort of the original CSS inventor was the first person I knew who did it. So I thought I sort of wanted to do a homage to her and she always does traditional painting. Well, quite often does traditional painting. Yes, yep. And I thought, what if I did a, if I took sort of picture card that's almost the same traditional style. So that's a really basic, simple way of doing it. So it's quite a sort of fun homage to her work. And then I made it 3D and got obsessed with trying to get the shadow to look real. That's cool. Yeah, I remember when doing a couple of things and just like you said, the shadow, you're working so hard to try and make it realistic. And for me, it just, it rocks my brain. Yeah. I took a picture, it's a film of me rotating a card to see what the shadow looks like. But yeah, I really like it because I think it's like what special effects CGI used to be like in films probably where they had to try and hack things together because they didn't have the ability to do it. Like nowadays. So it's a bit like that because you can't actually do these things with CSS. There's no actual ray tracing. So to try and make it look that way is really good fun. Do you have any tips sort of, if anybody were to want to get their feet wet and just sort of dabble a little bit without being overwhelmed maybe? Yeah, well, I think as long as you understand, like the one that took me a year, I was working on it about half an hour every other day. So it didn't really take a year. It's just a long process. I just find it really relaxing. It's something I just do in the evening when I've got a spare moment to do it. I can't really get frustrated by it because I think, well, if I get stuck doing something, I'll just turn that off and come back to it tomorrow. But as long as you know that this is going to take a long time, no pressure to finish it. It's just fun and just move, just get a div. Not the div, you know what I mean, an element. Move it into the position you want it. See if you can just do that. That's one evening's work. And then the next evening you do the next one. It's just a sort of really slow process. And as long as you expect that, I think you'll be all right. A huge thank you to Ben for joining me for this interview and also a little bit of an apology that it took me so long to edit this since we did it. But if you made it all the way to the end here, I'm assuming you're amazed by everything that Ben does as well. So do make sure to check him out on CodePen and I've also linked his Twitter down below. So you might as well give him a follow while you're at it. And with that, don't forget to make your corner of the internet just a little bit more awesome.