A Single (Spooky) Div

Captions provided by White Coat Captioning (https://whitecoatcaptioning.com/). Communication Access Realtime Translation (CART) is provided in order to facilitate communication accessibility and may not be a totally verbatim record of the proceedings.

JASON LENGSTORF: Hello, everyone, and welcome to another extra spooky episode of "Learn with Jason." Today, joining me on the show, everyone's favorite dinosaur, Lynn Fisher.

LYNN FISHER: Hello.

JASON LENGSTORF: Thank you so much for joining us. I am so excited to have you on the show. I've been a huge fan of your art, your work, your code, for as long as I can remember. And, so, it's an absolute pleasure to bring you on as a guest and learn from you. For those of us who are not familiar with your work, do you want to give us a little bit of a background?

LYNN FISHER: Yeah, so, I guess my day job, I work for a consultant called &yet doing creative web and web software, but most people probably know me from my side projects. I do a lot of creative one-off websites. On kind of niche topics, I have an airport code, sweaters that David wears on "Schitt's Creek." Silly, fun things. Then A Single Div, for over six years now, I've been doing CSS illustration with one div, one element.

JASON LENGSTORF: Oh, my God, and it's incredible, too. You've also done -- I remember the way I was introduced to your work was you have some of the most creative personal sites that I think I've ever seen. I've seen two or three iterations of it now, where you've kind of done a really good job of pushing the limits of design, and they always are such a big source of inspiration. Played a huge role in my -- what I was doing with Jason.af when I redesigned my personal site. I want to do something that creative, have that much fun building something for the Internet. I don't think I'm the only person that feels that way, so it's an absolute pleasure to see the things that you do. You can see how much fun you're having when you do this work, and I've always really, really loved that.

LYNN FISHER: Thanks, yeah, so my personal portfolio site, I've been redoing it every year for, gosh, probably like 12 years now or so. And it was always just an opportunity, okay, this new thing came out this year, so I'll learn that for this next thing. But the last, like, three years or so, I've really kind of wanted to push myself and do something a little bit out there. So, being kind of experimenting, and that has been a really cool place to do that. So, yeah, it's been really fun.

JASON LENGSTORF: Nice, awesome. Well, cool. So, today it's, you know, couple days before Halloween, and I thought it would be fun to wear a costume. So, I stole this from my partner, Marissa, and this is actually a onesie, and if anyone has seen Marissa and I standing next to each other, we're not even sort of the same side. So, I'm wearing a onesie like a cape right now. You can see, this is the legs of the onesie just dangling off my back. So, what's your costume today?

LYNN FISHER: Yeah, so I'm a dalafosaurus, which, actually, I'm like the fictionalized version of it. The real dalafosaurus didn't have these frills. It was a creative decision made for the movie "Jurassic Park," so, dinosaur, but like a fake one.

JASON LENGSTORF: Nice. I love it. It's so good. Okay, so, let's talk a little bit about what we're going to do today. First of all, thank you, Chris, for the sub. I appreciate it. 16 months, I can't even believe I've been doing this show for that long. All right, y'all. So, what we're talking about when we talk about A Single Div is, quite literally, you put a div element on the page, and that's it, right? I can't cheat by putting in paragraph tags or anything?

LYNN FISHER: Nope. Well, my rules are just a div, and then so, basically, you get to style the div, and then it's before and after. If you need text, you can use the content in the pseudo elements. So, on A Single Div there's a ton of them on the page, so I have a containing div for each one, which, I guess, would be the body on like a code pen or something. So, I do use a little styling there just for placement and the background color, but, yeah, otherwise it's just you get a div and that's it.

JASON LENGSTORF: Nice. And it's -- like these are incredible. I'm going to switch us over real quick, so we can look at these, because some of these are just so incredibly cool. So, here is -- make sure you check out Lynn on Twitter. It is a nonstop fountain of inspiration and fun. And before I forget, let's do a quick shout-out to the sponsors. We have live captioning today. It is provided by White Coat Captioning. Thank you so much for being here. You can go to lwj.dev/live to see that captioning. That is made possible through Netlify, Fauna, Sanity, and Auth0, who all kicked in to make this more accessible to more people, which we very much appreciate. So, again, you can go check that out, lwj.dev/live. And let's take a look at this. So, this is Lynn's personal site, and this is such a fun site, because if we start at mobile, right, and then as you expand, it just continually gets cooler and cooler, and then you can zoom out, and there's more. It's just so much fun. I love it so much. And, you know, this is, you said, the 12th iteration of this site?

LYNN FISHER: Yeah, I started in 2007 or '08. Yeah, I guess, yeah, around there.

JASON LENGSTORF: So cool. And this is the Single Div project. So, everything we're seeing on this page, each section is one div. So, this bag is one div, this is one div. Absolutely incredible.

LYNN FISHER: Thank you.

JASON LENGSTORF: And, like, some of these, too, are animated, as well, right?

LYNN FISHER: Yeah, yep.

JASON LENGSTORF: This one was one of my favorites. I want this as like an all-over print T-shirt.

LYNN FISHER: Oh, that would be awesome.

JASON LENGSTORF: Yeah, just some really, really cool stuff in here. Just tons of it. You can see, look how tiny this scroll bar is. There is so much creative stuff on this site, so, definitely go dig in and play around on that site, because it's so, so, so much fun.

LYNN FISHER: Thanks.

JASON LENGSTORF: All right. So, to do this, what I am trying is -- wait, where did I end up? Here, this is a code pen, and I am going to experiment with professor, professor mode on code pen, which I've never used before. I believe what it means is everybody can look at it, only I can type in it. So, we're going to see how that works out for us. But, yeah, so if it turns out you can type in it, don't.

LYNN FISHER: Maybe not.

JASON LENGSTORF: Yeah, maybe don't troll us on the show. But, yeah, all right. So, let's see. So, to get started -- why am I still on the URL bar? Just this, that's my div. We're done. Bye, everybody.

LYNN FISHER: How much did you learn, everybody?

JASON LENGSTORF: Okay. So, let's see. We've got some requests on here on what we should make. I saw requests for a ghost, I saw request on Twitter far Jack-o-lantern. Let's see, what else, what else? Professor mode is locked down. Hooray! Marquee, marquee element, good. Someone says a knife.

LYNN FISHER: I did a knife for div-tober.

JASON LENGSTORF: Scrolled past that one. I love it. We've got strong votes for a ghost, werewolf, horse, pony.

LYNN FISHER: These are going to be so hard. How much time do we have, maybe we can let that determine things.

JASON LENGSTORF: We have 80 minutes. So, we can do half of a horse. So, I feel like probably the safer bets would be things that are a little more symmetrical, right, like Jack-o-lanterns.

LYNN FISHER: Yeah, let's do a Jack-o-lantern. That feels good.

JASON LENGSTORF: Okay, so we want to --

LYNN FISHER: Some of these lines can get long. We'll see how it goes.

JASON LENGSTORF: Okay.

LYNN FISHER: Okay, so, then, basically, let's do a little bit of setup. So, on the body, let's set a color, a background color. Let's just set it at like hash-4-4-4, do a dark gray for now. A lot of this is setting things, and then later changing them. Oh, that needs to be a background color.

JASON LENGSTORF: Right, that's me not remembering how CSS works. We're off to a great start.

LYNN FISHER: It's cool, I did a live-stream the other day, and I was like, how do you spell things? Okay, couple things we probably want to do is on the body do like a height, like 100vh, just to make sure things are filling up. Let's do display grid. Let's see if this will work. I don't know. And place content center, is that how -- it's place content, right?

JASON LENGSTORF: I don't know, I've never tried this one.

LYNN FISHER: We'll try that. Let's go down to the div. Let's give it a width, I'm just going to use pixels for this, because it will be easier. Normally, I do this -- actually, I kind of switch it up, whatever I feel like at the moment. Better to do it with relative units. So, let's give it 300-pixel width. And then a height, let's do, I don't know, 250 maybe. Do you do yours alphabetically, is that why you're doing that?

JASON LENGSTORF: I do.

LYNN FISHER: Interesting. It's good to have a system. Okay, and then let's do a background color, like orange, let's just try that. I like to use named colors when I can. Okay, cool. So a pumpkin.

JASON LENGSTORF: Vertically centered.

LYNN FISHER: Yeah.

JASON LENGSTORF: I would like to call out that we just vertically centered with two. That is amazing that worked.

LYNN FISHER: Yeah, so if you look at asinglediv.com, I started before all this was available to me, so all this is positioned absolutely, but this is a much easier way to do it.

JASON LENGSTORF: So nice.

LYNN FISHER: Yeah, yeah. So, now let's make this pumpkin round-ish. So, let's do a border radius maybe like 50 pixels. Let's see what that looks like. Okay, not quite enough. I'm wondering if -- let's bump that up a bit. 100.

JASON LENGSTORF: Getting closer. Maybe 120? That feels pumpkin-ish.

LYNN FISHER: Let's leave it with that. One thing I would do later is go in and adjust each of the corner radiuses a bit to make it more -- the hard thing with these is making kind of organic shapes, it's always kind of geometric, but you can tweak it more to make it feel lumpy, I guess. Okay, so I'm kind of thinking through how we're going to do all these pieces. So, one thing with this when you're starting a drawing, you have the div, before, and after. So, you have basically three layers to work with. I try to think of, okay, so what needs to be its own layer. So, right now I'm kind of thinking the pumpkin and its face we can probably do all in one, and a stem or something would probably need to be one. And if it's -- I'm thinking like a little curve on the stem, so that needs to be probably its own thing and maybe a shadow or a leaf could be the third element. So, that's kind of what I'm thinking through.

JASON LENGSTORF: Okay.

LYNN FISHER: So, just FYI. Okay, so then let's maybe create an eye. So, we're going to do most of this with background images, with linear and radial gradients.

JASON LENGSTORF: I will pull these down, so they are easier.

LYNN FISHER: Okay, cool. First thing I'll do, we'll do a radial gradient. Oh, I like that, breaking it to the next line. Let's do --

JASON LENGSTORF: We're going to learn about all sorts of my little tics today.

LYNN FISHER: It's great. I like it. So, ellipse, let's do an ellipse.

JASON LENGSTORF: Okay.

LYNN FISHER: So, comma, we'll let it be at the center. Let's do -- we'll do black for now to see how this looks. And let's do, like, sometimes I'll do 60%, and then -- oh, you don't want a comma in there, though. No comma between black and 60%. You want the comma after the 60%, space, and then transparent. And then we'll do, like, 61%, we'll see how that looks. Cool. So, then let's go set the background size. So, like new property.

JASON LENGSTORF: Oh, oh, this is starting to make sense to me.

LYNN FISHER: Yeah, so background size. Then we'll do something like, I don't know, like 50 pixels, 80 pixels, or something like that. Yeah. So, that's the width and the height.

JASON LENGSTORF: Okay.

LYNN FISHER: Then we're going to have to go back and set --

JASON LENGSTORF: Stop helping.

LYNN FISHER: Oh, it auto-formatted for you. Okay, so 50 pixels, 80 pixels. Oh, background, it's spelled wrong.

JASON LENGSTORF: That's me doing a bad job.

LYNN FISHER: It's cool, I do it all the time. So now we need it not to repeat. So background, repeat, no repeat.

JASON LENGSTORF: Okay.

LYNN FISHER: Now we want to place it, so we'll do background position.

JASON LENGSTORF: I don't know if anybody just saw me melding the alphabet to figure out where that belonged.

LYNN FISHER: So, let's do maybe like 20 -- or maybe 30%, 20%. So, you can use -- yeah, we'll leave it there for now. Cool, so we have an eye. It's a little too tall for my liking, so maybe let's bump the height down to 70.

JASON LENGSTORF: Okay.

LYNN FISHER: So, a lot of this is just, this looks okay, this doesn't, let's nudge it, you know? So, now we have an eye. So let's make another eye. So we'll duplicate that radial gradient as another one. Comma, separate it.

JASON LENGSTORF: Let people enjoy things.

LYNN FISHER: Yeah, so we'll duplicate the background position -- no, we won't. Duplicate the background size. Same size we want it, right? And then let's set -- so, no repeat you can just leave. And then let's set a position, so 70%, 20%.

JASON LENGSTORF: So, we're moving the second eye over, and then down the same amount.

LYNN FISHER: Yep.

JASON LENGSTORF: Got it, got it.

LYNN FISHER: Cool. So, there are some eyes.

JASON LENGSTORF: So, there's a question in the chat about how do you come up with the values. And the question is, you know, is it experience, trial and error, or some magical knowledge? How would you --

LYNN FISHER: Yeah, I think all of those things. Not magical knowledge, it's not magical. It's knowing -- having done this a bunch. So, it just kind of depends. So, there's different -- I guess values are what you're specifically curious about, but a lot is trial and error, like this feels good, and having done this a bunch of times, I can guesstimate and get close, and then kind of nudge values and things.

JASON LENGSTORF: Sure, yeah, that makes sense.

LYNN FISHER: So, another thing you'll figure out, depending on how you want your drawing to lay out and also how you want it to scale, sometimes it's better to use specific values, sometimes it's better to use percentages and things, so you kind of just figure it out as you go.

JASON LENGSTORF: Yeah.

LYNN FISHER: So -- no, we'll leave it for now. Now I want to create kind of like the impression that those eyes have depth. Like there's some thickness to the pumpkin. So, let's go and copy one of the radial gradients and paste it underneath. Yep, but let's change that last one to, like, instead of that black, let's change it to -- oh, I don't have -- what is it, dark orange? Try that. No, do tomato.

JASON LENGSTORF: Tomato, okay.

LYNN FISHER: No, yeah, let's just do that. That's fine. Okay, let's see what that looks like. So, what's going to happen, because I don't have -- okay, let's copy the background position one, the second one, and add a third. And then let's do 72%. Just kind of shift it off to the right.

JASON LENGSTORF: Tomato worked so much better than I expected it to.

LYNN FISHER: Yeah, it's orange-y. So, maybe do 74, let's see what that looks like. Okay, so, now you can see that it looks more like a box shadow, like they are the same width. So, let's copy the background size and make a third background size. Yeah. And then do like 54 pixels wide, or something like that, and see what that does.

JASON LENGSTORF: Maybe a little bit more.

LYNN FISHER: Yeah. So then -- yeah, maybe do 70% for the position, background position on that one. 72.5 maybe. Yeah, that looks okay for now, we can come back and tweak. Let's do the same on the other side, so we'll copy the first one there and put it directly underneath the one. Try to keep things that are spatially grouped together in the drawing, like near each other. Sometimes these lists get really long, so I'll add comments of this is what this is, but if I can thematically group them together, I can figure them out.

JASON LENGSTORF: So, I would want 28.5?

LYNN FISHER: Yeah. Let's try that. And then do the size also.

JASON LENGSTORF: No, 27.5.

LYNN FISHER: 27, yeah. Yeah, there's a lot more math with this than I would have thought. So, yeah, then we want 58 pixels for this one. Is that what it says? Yeah. Cool. So, there are some eyes.

JASON LENGSTORF: Look at that.

LYNN FISHER: Little bit of depth. So, cool, that feels okay for now. We'll probably do some tweaking. I was thinking we may want to make it not black and maybe more like a yellow, like there's a light inside, but maybe we can do that after. Okay, now let's do the mouth. How will this work? Okay, let's try a new radial gradient. We'll do an ellipse just to set ourselves up early. Let's do black. Actually, go back to ellipse before the comma. And do at, space, 50%. I usually get this wrong, but let's do "space 100%." Okay, and then let's do black 60%. Transparent, 61%. And, so, I do 60%, because it typically doesn't -- it's like a good value, where it doesn't overflow, like the gradient gets cut off. So, it's just kind of like a safe value. And I'll adjust it if I need to. Then the 60 versus 61%, what that does is with radial and linear gradients, a lot of the browsers will have an anti-aliasing issue, and, so, it creates just a little bit of a smoother line.

JASON LENGSTORF: Got ya, okay, that makes sense.

LYNN FISHER: I got this wrong. If you go back to the ellipse, it should be 50% zero. There we go. More smiley. Okay, so, let's make that quite a bit wider. So, let's do -- oh, we need a background size. Let's do, I don't know, like 200. How wide?

JASON LENGSTORF: Not 300, that will look weird.

LYNN FISHER: Real big smile. Cool, that looks okay.

JASON LENGSTORF: Blown away by how quickly this looks like a pumpkin. Not going to lie.

LYNN FISHER: Let's make it a little taller, do 80 and see how that feels. Lovely. So, let's position it. Did you already set a position?

JASON LENGSTORF: I set a position to move it off the eyeballs.

LYNN FISHER: I like it. Let's do 85%. I don't know if we'll do a nose. We'll see. Cool. Now we have a mouth. Let's do the same kind of trick we did with the eyes to give the mouth some depth, too. So, let's copy that one. Do that, and do tomato.

JASON LENGSTORF: We need to move this one.

LYNN FISHER: Let's actually leave it. Let's leave it there. And let's go down to -- leave the value there, though, because we're probably going to add more stuff. You can get away, if it's like the bottom of your stack, without doing it, but it can get confusing if there aren't the same amount of items, you know?

JASON LENGSTORF: Yeah.

LYNN FISHER: Let's make this a little wider. So, we did -- let's do 216.

JASON LENGSTORF: Okay.

LYNN FISHER: See what that feels like.

JASON LENGSTORF: Looks like the same.

LYNN FISHER: Feels okay.

JASON LENGSTORF: About the same depth. Make it taller maybe?

LYNN FISHER: Maybe. Let's see what that looks like. Might need to adjust the positioning. Yeah, so bump it down a little bit.

JASON LENGSTORF: 86? What do you do?

LYNN FISHER: That's basically what I do. Does this work, does this work? Yeah, so a little bit.

JASON LENGSTORF: Like that?

LYNN FISHER: Yeah.

JASON LENGSTORF: Okay, all right.

LYNN FISHER: Sure. We'll leave it like that for now. So, now let's add a tooth. Do we want to add a tooth? So, let's go above, in the stack, let's go above the mouth. So, it would be third from the bottom, right? Yep, so let's add a linear gradient. And since we're just doing -- let's see. Okay, yeah. Let's do to left -- I'm hoping we can -- we'll see. Sometimes you have to do it like the longer way to eliminate some issues with scaling and stuff, but we'll just try this. So, let's do to left, comma, and let's do tomato. We'll do -- let's do 8 pixels, and then comma orange 8 pixels. Okay. And then let's go down to the size.

JASON LENGSTORF: One, two, three, four, so -- one, two, three, four -- wait, four. Here.

LYNN FISHER: Yep. Or, no.

JASON LENGSTORF: No? Yes, yeah, yeah, sorry.

LYNN FISHER: So, this is like a fun adventure when you have like 50 of these and you have to -- oh, where is it? That's where commenting does help, oh, that's this group. So, let's maybe do like 20 pixels, 30 pixels.

JASON LENGSTORF: 30 pixels.

LYNN FISHER: See what that looks like. Up in background position --

JASON LENGSTORF: One, two, three, four, here?

LYNN FISHER: Yeah, let's do like 40%, 85%.

JASON LENGSTORF: Wow! I'm going to add comments so we don't lose track. So, we've got the left eye, and then we've got the right eye. We've got a tooth. And then we have the mouth. And then we can do the same thing with these, where we've got the left eye, we've got the right eye. Tooth. And mouth. And I should probably break these up a bit, so they don't look quite so wonky. And one last time, and then we'll stay on top of this, so it doesn't --

LYNN FISHER: Yeah. It does help to tidy as you go, if it ends up being a big, long thing. And this one's really background-image heavy. Sometimes you'll use a lot of box shadow, or a lot of some other thing. So, sometimes those ones are a little bit easier to manage.

JASON LENGSTORF: Okay, I swear, code pen, if you betray me and break all my formatting. Okay, now we've got at least kind of a general idea of what's going on. I can make this a little bit taller, so we can see what's going on. Actually, why don't I side-align this? That seems way easier.

LYNN FISHER: Okay, cool. These so far, linear gradients haven't been super very many stops. Okay, so let's go ahead and make that tooth a little wider.

JASON LENGSTORF: Can I turn off the format? Behavior. Format on save. Good call, thank you. We've got shshaw in the chat. Thank you very much.

LYNN FISHER: Wonderful. Let's make that tooth -- let's go down to background size and see --

JASON LENGSTORF: Background size tooth.

LYNN FISHER: Let's make it 30 pixels wide. Maybe a square works.

JASON LENGSTORF: Looks pretty good. Then we'd maybe do the same thing, let's copy that and make another tooth. So we have two teethes.

JASON LENGSTORF: Two teethes.

LYNN FISHER: Two teethes. Copy those, leave it the same size, but put it up at the top. So, we'll do like 60%, and then -- gosh, I don't know. This one will be where we have to kind of finesse it. So, like 65% maybe. That was really close.

JASON LENGSTORF: Change this, too, right?

LYNN FISHER: Yeah. So, we actually probably want it swapped. So, do to right on the first one. So change that back to left. Yeah. Okay, but that doesn't -- we don't like that. Okay, then --

JASON LENGSTORF: If we were looking at it --

LYNN FISHER: You're right. Switch it back, yeah. Perspective, art school. I did that. Okay, cool. Lovely. That feels nice, right?

JASON LENGSTORF: Yeah. This is -- okay, we've been doing this now for just 20 minutes, and we already have what I would consider to be a discernible jack-o-lantern, which is, I mean, I never doubted you for a second, but I doubted myself heavily on what we were going to be able to accomplish today. So, I'm kind of blown away.

LYNN FISHER: Cool, yeah. So, there's a lot of detail work we could do here, but let's maybe move ahead and do a stem. So, now we want to do the div after. So we want a new declaration. I guess it doesn't matter, before or after. Okay, so, let's do -- content -- what was that? Oh, I know him.

JASON LENGSTORF: What's up? Thank you so much for the bits.

LYNN FISHER: Okay. So -- how do I want to do this? So, an easy way to do this is to position them absolutely to the parent, which is the div. You can use like flex box or grid. Let's just do positioning. It will be easier, I think.

JASON LENGSTORF: Especially since this is an absolutely sized.

LYNN FISHER: Yeah, that will be fine. Position, absolute. So, let's do a width -- so, I have an idea on this one. We'll see if it works. Let's do a width of, like, I don't know, 200 pixels, and a height of 200 pixels.

JASON LENGSTORF: I'm letting go of my alphabetizing.

LYNN FISHER: Do you want me to say them?

JASON LENGSTORF: I don't want you to think of your ideas in alphabetical order.

LYNN FISHER: That would be a challenge, for sure. Let's do a background color of -- let's do red. Red's a good one.

JASON LENGSTORF: I like red for figuring out what's happening.

LYNN FISHER: Yeah. So, one nice thing when you are doing this, though, if -- I write in stylus, so I have a mix in that's black and in parentheses I can do an opacity. So, sometimes it's nice to have a not fully opaque div element, so you can see where it is in the layer. Anyway, so, let's go ahead and let's do left 50%. And then top like minus 40 pixels. We'll see how that looks. Okay, yeah. We'll nudge that. So, here's kind of my idea. My hair is stuck in my glasses. This costume is super, super great. So, let's do a border radius -- let's do a border top-left radius.

JASON LENGSTORF: Okay.

LYNN FISHER: Yeah, there's dashes in between. Yep. And let's do, like, I don't know, like 80 pixels. Okay, that might be a little -- okay, now what I want to do is do a border left. Let's do like 20 pixels, solid, saddle brown. Let's try that. All one word. So, there's a stem kind of situation. So, now I don't want to be pointy, but let's do a border top. And then we'll do 20 pixels solid, transparent. So, there's kind of like a stem, curvy, right? So then what we'll do is make the background color transparent on the -- so, that feels stem-like. So let's position it a little bit. So, let's bump it up. Top, minus, I don't know, 60 or 70. See how that feels.

JASON LENGSTORF: 70?

LYNN FISHER: 70, yeah. Let's bump it to the -- yeah, like 48% maybe. Does that feel good, thickness-wise? Let's make the border 25 pixels.

JASON LENGSTORF: Does this get -- oh, look at that. It gets character.

LYNN FISHER: That's cool. I like that.

JASON LENGSTORF: Nice. That's fun.

LYNN FISHER: Here's a thing. The before and after will stack on top of your div, normally. So, to get it to go underneath it, we would do a minus after.

JASON LENGSTORF: That's right. It won't work by setting a Z index on the other one.

LYNN FISHER: Do Z index minus 1. So, when I'm doing these, if I know something needs to be below it, I'll try to write it in a way that I don't have to use z-index, especially negative z-index, because when you apply a transform to the div, it will break the stacking context, but since we're doing silly stuff, that's fine. So, there's kind of a stem. Let's change the brown. It's a little too dark. Let's do Peru. See what that looks like.

JASON LENGSTORF: How do you know -- the knowledge of the named colors is outstanding.

LYNN FISHER: I've been using them, also kind of reference a guide when I'm doing stuff, but there's a good pack of them that I use in most of them, so I've got them down pretty good.

JASON LENGSTORF: We've got some recommendations from the chat. What's rosy brown?

LYNN FISHER: Almost like a mauve.

JASON LENGSTORF: That's a lot. And then maybe nudge it more to the left. How's that? Everybody happy?

LYNN FISHER: Feels good, yeah. So, one thing we could do -- I don't know if this would work. So, with borders, you lose a little bit of the flexibility that you would with like a background image. Like with a background image, you'd be able to do different gradients, and shading and things. With border, there is border image, which I have used like a couple times, but it never behaves the way I expect it to. I don't know that I could predict what could happen here. But that's an option for people to play with that's kind of neat, if you're using borders to draw shapes. Okay, do we want to draw a leaf maybe?

JASON LENGSTORF: Sure, yeah.

LYNN FISHER: That will feel good. So, let's do div before.

JASON LENGSTORF: So, we'll set the content empty. If you've never seen this before, the after pseudo elements and before, they have to have some kind of content, or they won't render at all. So, you have to set this. That's extent of my CSS knowledge.

LYNN FISHER: Yeah. So some of the single dives I make have text in them, and that's where I would set the text for that element.

JASON LENGSTORF: So, looking at this one, this is the content element.

LYNN FISHER: Yeah, yep, so that's all CSS generated and not in the markup, which is my rule, but you don't have to follow that. You can do whatever you want. So, let's do width, maybe like 30 -- 40. 40 pixels. Height 40 pixels. Got an extra "h" in there.

JASON LENGSTORF: Oh, I'm just missing -- transposing.

LYNN FISHER: Cool. Okay, and then let's do background color -- let's do sea green, see what that looks like. And then --

JASON LENGSTORF: What have I done wrong?

LYNN FISHER: Oh, it needs to be positioned. We need position absolute.

JASON LENGSTORF: Oh, there it is.

LYNN FISHER: Let's make it leaf-like, so we do that with border radius, so do border radius, and we're going to set all of the values. Okay, let's do 0 and then 90%, and then 0. Yeah, do that shorthand. So, a leaf-like shape. So, we'll position that kind of near the stem. So, we'll do left. And top will be a negative value.

JASON LENGSTORF: More?

LYNN FISHER: Yeah, just a little bit more.

JASON LENGSTORF: Want it down more, what do you think, 35?

LYNN FISHER: Yeah, 35 feels good. So, now he's got a little leaf.

JASON LENGSTORF: That seems okay.

LYNN FISHER: That feels good.

JASON LENGSTORF: Leaf behind, okay.

LYNN FISHER: Nice.

JASON LENGSTORF: Cool.

LYNN FISHER: So, yeah, there's a good start.

JASON LENGSTORF: And, again, this is just kind of really pointing to the power that all we have here are an after element that is -- this is a border. This is just a shape with border radius. And then these are a bunch of gradients. That is so powerful. That's so cool that we can do that.

LYNN FISHER: Yeah. And, so, with -- especially -- so, making that leaf shape, now that it's a leaf shape, we're really kind of stuck in that. You could add multiple leaves with box shadow or something, but that's pretty much a leaf. But the pumpkin, because it has kind of a broader canvas area, if we wanted to make a ton of stuff in there, if it's a circle, some variation of a circle or a rectangle, you can kind of just keep adding gradients as much as you need, which can make it very long, but also can make a drawing super detailed.

JASON LENGSTORF: So, there's actually a question. What Linda is asking, would there be a way to put lines down the pumpkin? So, if we wanted to -- if I were to make a guess at this, if I was going to approach this, you can tell me if I'm wrong.

LYNN FISHER: Sure.

JASON LENGSTORF: If we did an ellipse gradient using the pumpkin and did pumpkin to transparent and made it a big ellipse like this, and then did another one inside like this, then we could sort of fake the pumpkin look.

LYNN FISHER: Totally. That's totally how I would do it.

JASON LENGSTORF: Okay. Well, we've got time. So, what would you like to do next?

LYNN FISHER: Do you want to try that?

JASON LENGSTORF: We can do that, try to put a light inside this pumpkin, anything that sounds like fun.

LYNN FISHER: Okay, let's do a couple lines, and then we'll do a light. Do we feel we have enough time for that?

JASON LENGSTORF: I think so, yeah.

LYNN FISHER: So, below the mouth, we want it below everything, basically.

JASON LENGSTORF: So, copy this part, and we'll see pumpkin lines. And then we'll want a radial gradient. You want it to be an ellipse.

LYNN FISHER: Yep.

JASON LENGSTORF: And then it will be tomato at something.

LYNN FISHER: So, I think we'd want to start with orange.

JASON LENGSTORF: Start with orange.

LYNN FISHER: Yeah.

JASON LENGSTORF: Okay. Do we go to tomato?

LYNN FISHER: Yeah, then we'd go to tomato, then go to tomato again, then to orange again. Set orange at 49%.

JASON LENGSTORF: 49. And should I do this at 51?

LYNN FISHER: Yeah. We'll see how thick that feels, yeah. So, 51%, comma, orange, 52%. Then we'll go down to background position. Let's do 50%, 50%, so we just want it right in the middle. And then for size, we'd want to do -- let's do 80% width and 200% height and see what that does.

JASON LENGSTORF: Oh, I forgot a comma. Forgot another comma. Did I forget a third comma? I did, I according to all the commas.

LYNN FISHER: Nice. That looks pretty good. So, you could adjust the height of that one to make it more rounded, like if it was 150 or something.

JASON LENGSTORF: Yeah, 150.

LYNN FISHER: Another thing you could do, I tend to try to choose, okay, this is more of like a flat illustration style or wanting the gradients to be really kind of three-dimensional type stuff, but one thing I would do here is do a box shadow and see what it looks like on the pumpkin.

JASON LENGSTORF: Okay, so we'll go box shadow.

LYNN FISHER: And let's do inset. Then we'll do maybe 20 pixels, 00, we'll do, and then, I don't know, whatever. Do dark orange here and see what that looks like.

JASON LENGSTORF: If I can spell dark orange. Oh, I like that. Maybe we should use the dark orange for the pumpkin lines, too.

LYNN FISHER: Yeah, yeah, do it. Sometimes if I didn't have to draw the face parts, box shadow would be the easiest way to make the curves that feel really nice with the shape of the whole pumpkin, but what that does, box shadow sits on top of any of the background, so it would obscure our artwork, so we can't use that. So, it's kind of a mix of the gradients and the box shadow feels nice. So, if you wanted to do the box shadow on the other side, you'd use the same box shadow. You'd comma-separate box shadow values, and then just do a negative 20 on the X axis instead. That feels nice.

JASON LENGSTORF: I'm so impressed with the quickness with which we were able to put this together. It's so nice. I feel like I would spend an equal amount of time trying to make this in illustrator or Figma.

LYNN FISHER: It is a lot of, I make a shape, change it, so it is like a GUI, but you're typing up values, instead. So, let's go into the background image and in between the teeth and the mouth.

JASON LENGSTORF: In between the teeth and the mouth.

LYNN FISHER: I wonder if this will work. Okay, let's do a radial gradient here. Okay, we'll do an ellipse, and then let's do -- let's do pale -- I'm trying to think of the colors. Let's do pale goldenrod, and then do like 60 -- no, let's do 30%.

JASON LENGSTORF: 30%. Go to transparent, right?

LYNN FISHER: Let's do one more value. Let's do yellow, just do straight yellow at like 50%.

JASON LENGSTORF: 50%.

LYNN FISHER: Then we'll do transparent at 70%. So, one thing to consider, too, I would do this differently if we were considering browsers, where going from yellow to transparent in Safari will create kind of a blackout line. So you almost want to do an RGBA value of the yellow, so it's a smoother transition. It's just a Safari-specific issue.

JASON LENGSTORF: We could do this. This is the syntax for the new -- I love this. This is my new favorite thing. So, you can do RGB, no commas, then a slash with an alpha value between 0 and 1, and you get transparency. It's, like, blown my mind.

LYNN FISHER: That's really, really cool.

JASON LENGSTORF: I'm very happy it was yellow.

LYNN FISHER: That was impressive. Cool. So, let's set a size on that light.

JASON LENGSTORF: I'm going to copy my comment, it goes underneath the tooths, and that's going to be --

LYNN FISHER: So, we'll do 50% here like 80%, 90, that feels good for now. Let's go down to size and do, like, 20 pixels, 30 pixels maybe. Okay. Let's do bigger.

JASON LENGSTORF: Okay.

LYNN FISHER: Actually, yeah, let's do 40, 50, see what that looks like. Now let's go back up. We need to edit the gradient a little bit. 20% yellow, like 30, see what that feels like. Actually change the pale goldenrod to white.

JASON LENGSTORF: Nice. That's got a good glow.

LYNN FISHER: Now we want to change the black of the mouth maybe. I don't know if we want it -- yeah, change black on the mouth, which is -- yeah, change that to -- hmmm, let's try khaki. See what that feels like. So, probably too bright now. Do dark khaki. Okay, that's still not quite what I want.

JASON LENGSTORF: What's the -- it's like burnt sienna, does that work? That feels good, actually.

JASON LENGSTORF: Not bad.

LYNN FISHER: Maybe a similar thing to the eyes, move the eyes to sienna, see how that feels. Yeah, like there's light happening inside there, right?

JASON LENGSTORF: Yeah, I wonder -- you had a darker color, because I feel like I want them to be just a touch darker, because the light would be moving up in a gradient.

LYNN FISHER: Right. What would be darker than sienna? Hmmm. One thing -- one benefit of using a pre-processor is I do use darken and lighten functions a lot, which is really nice, so just creating a next value without having to think of --

JASON LENGSTORF: Sure.

LYNN FISHER: But maybe try just brown. Brown feels almost like red to me sometimes.

JASON LENGSTORF: Kind of has some character, though.

LYNN FISHER: Yeah. That's cool. Yeah.

JASON LENGSTORF: Yeah, and people are saying just use a hex. Of course, we could totally just get in here and start playing with hex values.

LYNN FISHER: For some of them, I do that. Okay, I want this really specific color.

JASON LENGSTORF: Oh, saddle brown. That was the one. Perfect. Look at that. We've got ourselves a pumpkin.

LYNN FISHER: Yeah.

JASON LENGSTORF: And there was a question about what if we wanted to animate this? And let me do a quick time check. We've got time, right?

LYNN FISHER: Sure. So, animating, there's a couple different ways. So, I guess what would be an obvious animation for this? I guess you could make -- so.

JASON LENGSTORF: Make the light pulse a little bit.

LYNN FISHER: Right. So, that -- how would we do that, we could do -- okay, so, maybe we'll just use -- nope, we can't do that. I guess you can. The one problem is that all of the face of the pumpkin is being drawn with one property, which is background image, or it's being positioned with background position. It's a whole chunk of values. So, to animate it, you have to re-say all of those for every key frame that you set. It can get a little bit messy. I've done it before. I have a code pen that's like a train moving, and it's all just background position. It's just shifting the background position, but because there's 20 little pieces, drawing that, you set it for everything. Yeah, do we want to try that? I guess we could try it.

JASON LENGSTORF: We could. We're fortunate in because this is a fairly flat illustration, we're not looking at too gnarly to do it. So, if I were to do that then, I would just copy this whole block.

LYNN FISHER: You might not need to copy the whole block. Depends what we're wanting to do. So, how would the light flicker, it would flicker with opacity or with size, right?

JASON LENGSTORF: Size is probably enough, if we have it shrink in and out a bit.

LYNN FISHER: Let's try it, so we can show what that's like. So, just grab all of background size. So now we'll do key frames.

JASON LENGSTORF: I need to name that, right?

LYNN FISHER: Yep, flicker or something. Yep. So, then we'll do --

JASON LENGSTORF: No, that is not even sort of how key frames work.

LYNN FISHER: Close. So, we'll need -- how many key frames do you think we'll need? Let's do 0%. We'll just paste that. The background size. Just paste, yep.

JASON LENGSTORF: Okay. Oh, I know what's happening. My brain is like, no, it needs to be a media query, where you target the element.

LYNN FISHER: Right, just setting. So, let's do the next one would be like 50% or something. I don't know, whatever.

JASON LENGSTORF: 50 --

LYNN FISHER: Let's do 30%, comma -- after 30% comma, 70%, see what that feels like. Change the values on the light, make it smaller for this one. I don't know.

JASON LENGSTORF: Maybe half size? It will be exaggerated.

LYNN FISHER: Yeah, we'll see with that. Actually, after the 0%, I think you can just do 100%, comma, right? I never know. I always duplicate stuff.

JASON LENGSTORF: I feel like that works.

LYNN FISHER: Cool. So, that's good. Then we'll go back up to --

JASON LENGSTORF: Oh, shshaw has a tip for us we can try after this.

LYNN FISHER: There we're going to do animation. Flicker. Then we'll do, I don't know, 500 milliseconds or something. Infinite. And then ease in-out, whatever ease you like. That looks cool. So, then you can speed it up or slow it down.

JASON LENGSTORF: I think the flickering is a little extreme.

LYNN FISHER: Yeah. So, it would need to be larger a value, right? Or do you want -- no, that feels good.

JASON LENGSTORF: It could be a more subtle flicker, too. Right now is 40, 50. It could be really subtle, like 35, 45. What's that do?

LYNN FISHER: There you go.

JASON LENGSTORF: Kind of candle-y.

LYNN FISHER: Yeah. You could also, theoretically, to change the opacity of it, you'd have to copy the background image chunk in there, and change the values of the gradient. So, it would be a similar type of thing that you're doing as opposed to just one value.

JASON LENGSTORF: So, let's try the thing that shshaw just said, which he said we can go to -- like this, and then set animation direction to alternate.

LYNN FISHER: So then the other --

JASON LENGSTORF: Look how nice that is, because now we've only duplicated the one thing. That's slick. Good tip, thank you.

LYNN FISHER: Thank you.

JASON LENGSTORF: He says speed it up to 150 milliseconds.

JASON LENGSTORF: I'm into it. That looks candle-y. Then if we want to change the opacity, we could just grab just the once, and drop this in, and then --

LYNN FISHER: So, you would change --

JASON LENGSTORF: Grab this. And go to, like, .5 or something, and then white we know is all 255, and go to .5. But I did it wrong. Did I do it wrong? Why are you arguing with me? What did I do? I'm going to slow this down, a little strobe-y right now.

LYNN FISHER: Still at zero.

JASON LENGSTORF: Oh! There we go. Why is it popping like that? Maybe background images don't --

LYNN FISHER: I've never tried to do that, actually.

JASON LENGSTORF: I don't think it's going to let our background images -- yeah, it's popping instead of -- well, it was worth a try.

LYNN FISHER: Yeah. Background size works well.

JASON LENGSTORF: Very cool we were able to do that. Oh, I wonder, what if we did just straight opacity?

LYNN FISHER: That's going to do the whole pumpkin.

JASON LENGSTORF: No, our pumpkin!

LYNN FISHER: Because -- if you were planning a lot of animation, I wouldn't make it a single div. If we made each one of these pieces its own thing, you could animate really easily, and that would be better.

JASON LENGSTORF: This is super cool. This is a tip I'm going to take to the bank. How nice is that to not have to copy/paste it twice? This feels, I'm not going to lie, I'm blown away by how smoothly this went, and how nice this felt. But, yeah, yeah, shshaw's got some good tips, we could split it into a pseudo element, or whatever. There's a lot of ways we could do this. If we sacrificed our leaf, we could make this our -- I think there's a lot of fun ways we could do that.

LYNN FISHER: Totally.

JASON LENGSTORF: Geez, what do you think, should we do anything else?

LYNN FISHER: I don't know, I think it looks pretty good.

JASON LENGSTORF: I'm pretty happy with this. I think, you know, I don't think there's any reason to force it if we have ourselves a good stopping point. We have officially spooked this pumpkin.

LYNN FISHER: So spoofy.

JASON LENGSTORF: So, in that case, I think we should start breaking it down. Lynn, where should people go if they want to see more of this, learn more of this? I'm going to drop A Single Div as the obvious one.

LYNN FISHER: Yeah, so, asinglediv.com. I've been posting more to code pen, so you can follow me on there, Lynn and Tonic. I'm Lynn and Tonic on most places. I'll sometimes be posting things there that will break or slow down asinglediv.com. So, more experimental stuff there. Lynnandtonic.com is my website. Got a lot of projects there. Yeah, that's probably the best places to go.

JASON LENGSTORF: Excellent. Are there any resources that you love that you use when you're doing these that would be helpful for somebody that wants to try these on their own?

LYNN FISHER: Yeah. So, there is a good CSS shapes -- like shapes in this context, not actual CSS shapes, that's a thing. But CSS tricks, that goes through here's how you make a circle, an egg shape. That's super useful.

JASON LENGSTORF: This one here?

LYNN FISHER: Probably. Yep, yeah. So, that's really great. There is a -- Leah Varue, it's pretty old, but one I use a lot. She has a pattern gallery of CSS background image patterns, yep, so, this is --

JASON LENGSTORF: Wow, these are CSS?

LYNN FISHER: Yep.

JASON LENGSTORF: That's amazing.

LYNN FISHER: If you click on one, you can go in and adjust it and live-see what's happening there. So, this is really useful.

JASON LENGSTORF: Wow!

LYNN FISHER: Other things, like for -- one thing that I don't do, but I've seen a lot of people do is trolling Dribbble and looking at what designers and illustrators are making and being like, hey, this is a cool one, I'm going to try to recreate it in CSS. So that is a good way. If you get stuck at the I don't know what to draw, or I don't feel like I'm an illustrator myself, that's kind of a cool way to jump into it. You don't have to pick colors as much or worry about placement. You're recreating, so you can get a feel for what properties to use and how to scale and move things. So, that's really great. And then I also use just a list of the CSS named colors. I like that. You can find those all over. I like to use those. It makes it --

JASON LENGSTORF: Here's one that actually has the hex equivalents if you need to mess around like we were doing today.

LYNN FISHER: Yeah, yeah. I like those colors, because also if you're worried about choosing colors, these are nice colors. So, it gives you a good starting place, and you can jump and tweak from there.

JASON LENGSTORF: Yeah, a lot of way to go. So, a question from the chat, how did you get started doing these kinds of drawings?

LYNN FISHER: Yeah, so, actually, more about Leah Verou, I went and saw her talk at CSS Conf in 2018, she did a talk on the border radius, and it blew my mind. It was a talk about just all the ins and outs of border radius, but what it triggered in me, oh, there's so much I don't know about CSS, and there's so much artistic kind of qualities to it that I really hadn't tapped into. So, I went home from that, and the company I was at, at the time, we were doing a site, it's called why.az, it's still up, it's about all the things we love about living and working in Arizona, which is where I live. But one thing we wanted to do -- or why.az. Azerbaijan is the country code. We wanted to make this site kind of technologically interesting. So after that talk, I was like, oh, let's do these illustrations in CSS. So, that's kind of how I got into it.

JASON LENGSTORF: These are kind of the inaugural journey of you doing A Single Div?

LYNN FISHER: These originally I did two dives, actually, which at the time felt a lot of icon systems worked in that way, like you'd have an icon or a span inside there. And then a couple years ago I went back and made them into single dives. This is so fun. It's illustration, art, code, intersection of all these things that I like. So then I started asinglediv.com. Kind of working one piece at a time, making it like a digital sketchbook.

JASON LENGSTORF: That is absolutely amazing. This goes back, like I said, you can see how far back this goes. It's such an incredible body of work. You're one of the most consistent creators I know, and everything you put out is such high quality and so much fun to look at. And what I love about CSS art, versus looking at design art, is when I see somebody draw, you know, gal share is kind of a well-known illustrator, and you watch gal draw, and you're like, that's cool. I don't know how to do that. But when you see these, I can inspect the source. Right here, let's see if this takes down my computer, but I can go and look at one of these, and I can see. Here's soccer, so, there's the body, right, here's our div. And we can go look, look and play and see what's going on in here. And how much fun is that? It's art you can participate in, which I think is such a cool thing, as opposed to something you would look at in a museum. I really love that as a format.

LYNN FISHER: Totally. And with code pen and tools like that, it's so easy to fork it, riff on it, and create something new from it, and I think that's really cool.

JASON LENGSTORF: Absolutely.

LYNN FISHER: Chain art you can make, too.

JASON LENGSTORF: Yeah, yeah. That's another thing that I love, that I want to see even more of. So, you know, chat, maybe a challenge for you, you all had some great ideas about this pumpkin. Take this, play with it, fork this code pen and do more. Let's see what you can come up with. Send me your results, and we'll make sure they get linked from the episode. But, yeah, so, I think this is -- let me send a link to this, actually. Let's go to regular view, go to editor view. So, anyone who wants to, can go and fork that, and play with it. I think that puts us in a pretty good spot. Lynn, any parting knowledge before we wrap this up?

LYNN FISHER: No. Just whatever you guys end up making, send it to me. I want to see it.

JASON LENGSTORF: Yes, yes, please, please, tag us both, because I'd love to see it, too. Let's do one more shout-out, thank you so much for White Coat Captioning for being here today and making this show more accessible to more people. Thank you to Fauna, Netlify, Sanity, and Auth0 for sponsoring the show to make that possible. Make sure you go have a look at our schedule, because we've got all sorts of fun stuff coming up. Next week we're going to build our own custom accessible audio player in React, which if you have not seen how to build accessible things in React, Lindsey is one of the experts in this area. Audio players are just fun. So, make sure you go check out the schedule, make sure you mark your calendar. Thank you so much for hanging out with us, chat, stay tuned, thank you so, so much for hanging out with us today. This is an absolute blast. Y'all, I can't wait to see what you create with this stuff. We will see you next time.

LYNN FISHER: Thank you, bye.

JASON LENGSTORF: Bye!