 Awesome. All right. So what I'm going to talk about today is using backgrounds. Basically designing the background is, you know, here's how we can use backgrounds to create some various interesting design effects, some of which might not be apparent at first glance as you mess with backgrounds. So let's get started with that. There we go. So I'm going to be using my personal website, mireweb.com, as the example here. And this is kind of what it looks like. It's a local test copy, but it's, so the information's a little old, but the design is basically the same. And a lot of, almost all of the design elements that you're seeing are background images or background, well, they're all background images or background colors. And I wanna talk about a few of those. So I'm gonna start with what is in some ways the most complicated of the backgrounds, but it's also in some ways the easiest to understand, which is the background that I created for the body element. So this is what the site looks like, basically, you know, without having modified anything and has sort of this textured effect, this brush stroke look to it that was actually inspired by the, what I took some of these design elements from, which is a study of waveforms that was published in Japan in 1903 called Hamantyu. And I probably pronounced that incorrectly and I apologize, but so like the waves at the top, which we'll be talking about a little more detail here in a bit, those are taken from this published study of water forms, which is in the public domain and is available online. There's actually a link in the footer of almost every page on MyerWeb to that if you wanna see for yourself what the artist created. But anyway, so the body, if I take away the body background, I mean, this is what it looks like. And it's not a huge difference, right? Like there's no body background here other than sort of the browser standard weight. And there's not a huge difference with what was there before, but I think there's different enough. So the first step is also the last background layer, which is a solid color. And the thing about if you have a layered background, if you haven't messed with those before, you can only have one solid color. Like there's only one place you can say effectively you want a background color like this particular HSL A color or red or Rebecca purple, whatever color you wanna use, you can only have it as the last of the background layers, which puts it at the bottom. If you add anything to this, it has to be an image, which is what I'm about to do. And the first thing that I added above that background color is a tiled background image, which here I've shown in full opacity. So this is, it's the same image that I created out of elements from Hamanchu. And then it's just tiled, but it has an offset you might have noticed. It's pushed over 250 pixels and then pulled upwards 50 pixels. That's where the origin image is placed. And then it tiles from there. And on top of that, I put the same image, but with no offset in its tiling. So why did I do two copies of the same image but tiled with different offsets? Because when they're combined, you get this, it's almost a complete background cover. There are bits where gaps show through. But what interested me when I did this was that this created a pattern that almost didn't feel like a pattern. And to the extent that it does feel like a pattern, I was willing to live with that because it's gonna be a body background. And also, it's not gonna be nearly as obvious in the final design. And if you've noticed, there's sort of a little glow behind the navigation links on the side. That's actually caused by a radial background gradient on that particular nav links element. Not gonna have time to explore it today, unfortunately, but that's where that glow comes from as a radial gradient in the background of that. I think it's a UL element, might be a nav element, I don't remember now, sorry. I should have put that in my notes as we did, I would say, moving on. But down at the bottom of the page, I've skipped down here to where the footer is. It really felt like there needed to be a visual transition leading to the footer rather than have this pattern like come right up to sort of this gray area that the footer has and then stopping. So did that by having an upward pointing linear gradient which starts, which basically, I mean, it starts at the bottom and then it has a solid color, HSLA 34 degrees, 38% saturation, 99% lightness and full opacity. That starts at 23M and then it fades out to zero over almost the next 20M. Now, the size of this is based on the footer size, because I know what's gonna go in it sort of has a given size, but also some experimentation. I didn't start out saying, you know, doing math in my head and saying, oh, this will be exactly 23M and it will go to exactly 42M, right? Like I played with the numbers a little bit and said, you know, how does this look, you know, how does 22M look? How does 400 pixels look and so on and so forth? I wanted it to be text size, so I was gonna use Ms or REMs. I ended up using Ms, but you know, I probably started with 20M and then moved it upwards and then maybe scooched it back a little bit. That's where, you know, a lot of this stuff ended up. You're gonna see other values in here that I might not mention. You might think to yourself, why didn't he pick that exact number? Because it looked good, it looked right after I experimented for a while. Anyway, I used a similar approach up in the MAST head where, well, at least behind the MAST head at the top of the body background where I have a gradient that's coming downwards, but notice it's not quite exactly downward pointing. It actually points at 179 degrees instead of the exactly downward 180 degrees. I'm gonna change it so that it isn't 179 degrees. This is what it looks like when it's 180 degrees. And if you look, there's a difference, right? That it goes kind of right along that curl of the wave that sticks out and then goes underneath the myerweb.com as though it's almost like a baseline. But if we go back to 179 degrees, right, that it moves up in the myerweb so that the fade out transition goes behind the text a little bit and it doesn't go right exactly along that sweep of the wave, creates a more organic feel, which is what I was after. I didn't want the sort of sterile feel of having the exact 180 going to 179 felt right. I think 178 I tried and it was a little too much and I could have done, what about 179.1 degrees, 178.9 degrees. At a certain point, I got tired of experimenting. I stuck with 179 degrees, but you can use fractional degrees and maybe with a slightly different application of this. So if I'd been using a different font for myerweb.com, let's say, and that is texts, by the way, it's using a font called IMFEL, which I love. But if I were using a different font, if I were using Helvetica, 179 degrees might not look right. Maybe it would need to be 179.25 degrees or 178.5 degrees, something like that. So that's something to keep in mind as well. Anyway, now above all those other gradients that I've talked about is this one, which is too complicated to show here. That's what the dots mean. It's actually a very long gradient syntax. I'll show it in an upcoming slide, but it's just too complicated to show here. But it's also very subtle. It might not be easy to tell, but there are these sort of shadows at the sides and then it fades in. So I'm gonna change the colors. I'm gonna change the lightness actually. Literally I just changed the lightness of the HSL colors. And that's what that looks like. It goes from a shade to semi-transparent to fully opaque in the center and then back to semi-transparent and back to another shade. So here it is again, as normal. But it gives us this little bit of shadowing along the sides. And mostly knocks out that background tiled repeat behind of the text column, the main column of the page. And then I put in one last top gradient to shade the mast head a little more. This was an early color choice. This was actually one of my original design thoughts that I ended up lightening a lot so that it actually looks like this. This is the end result where it shades in. But if you look at the top left and right corners, there's a little extra shading almost because that's where those side shades and the top shade kind of combine. And it makes it a little more paper-like in feel, which is really what I was after. So like I say, that's the end result. Now that was a lot of layers to throw into one background. And if you're trying to keep track of where they were in your head, well, let me go through them again. So let's go through those layers. First we have the color, the background color, and then the two tiled images. And then on top of those are the bottom and top gradients of the page. And then that main side to side ingredient. And then that last little bit of top shading. And that's it. If that was difficult to visualize, maybe you'd prefer it in 3D. So here's how they stack up. And yes, both this slide and the previous slide are HTML and CSS animations. And here's the code. I mean, it looks complex, but honestly, most of that is in the gradient syntax. Can be daunting, but it's pretty compact for a text description of images. And yes, I just want to make the point. Gradients are images every bit as much as SVGs or PNGs or images. They're just described in this way. I will admit I hand wrote these. I don't expect people to do that. There are plenty of gradient generators on the web that let you play around with color stops and easing and all that sort of thing, which is great, but I'm just one of those people who hand authors things like linear gradients and simple SVGs, so what can you do? At any rate, I want to talk about other parts of the page besides just the body, like those waves across the footer. Actually, I played around with these for a while. So here's the footer the way it looks normally. And here's the element box of the footer. And you might think to yourself, oh, okay, he's going to set a huge top padding and put his backgrounds in there. And I thought about doing that. But instead, I ended up using a before pseudo element attached to the footer, because I wanted there to be a distinction between the actual body of the footer, which is where you see that gray gradient that leads down to the very bottom of the footer and the waves on top. And that was just how I chose to do it this time. So let's take away the before's background, which is what I've done here, that before pseudo element. And then first at the bottom is I put in another subtle shading gradient. I was really into sort of these shading gradients when I was creating this design. I might go back and simplify some of them at this point, but that's how I did it. But it kind of creates a little bit of a shading towards the top of the footer's main body. Now I repeated an image along the X-axis. This is one image that just I did the work to blend it in Photoshop effective. Well, acorn in my case. And then repeated it along the X-axis. And you can see there's a strip where the image, the bottom of that background image doesn't quite reach the bottom of the background area because it's positioned so that it's 0.95%. So it's 95% of the way down. And then it's one and a half M tall and auto-sized width. And then it repeats X, but there's this strip. But that's okay. Because I'm gonna do another row of exactly the same image, just slightly bigger that's actually up against the bottom that covers up that gap, right? So this is, if you look at the code, the same footer wave.png file that's repeated along the X-axis. It's just the row in the back is a little smaller than the row on the front. And using that same image at different sizes, again, created sort of like with the body background created this pattern that looks almost random and organic and yet is not, right? It's actually very repeatable but it repeats over very long distances. And again, the heights of two M and one and a half M and the positioning of 95% all arrived at by experimentation really. There were bits that I set up where the repetition looked really robotic, looked really very regular and wasn't what I was after. And then other ones were like you couldn't see the back row. So that's where that experimentation comes in. And then I ended up adding a single large wave image on the left side, cause why not? It just seemed like the thing to do. Oops. And this is what the code looks like including the sizing of that before element I had to, and the display of it had to set it to display block and give it a height in this case, six and a half M and then I also have a mixed blend mode of darken on it that would let other things show through the footer's waves if placed there, but it's really not necessary for the design as it is now. It was, I was experimenting and I should probably pull that out but it's in the code, so I thought I'd show it to you. So some of those techniques get applied in different ways to the header. And this is the header with its element box highlighted. Now I didn't use the before or after pseudo elements on this particular element. I just styled the background of the element itself because I didn't, I wasn't making that distinction like I was with the footer where the footer has this very visual difference between itself and the rest of the document, rest of the page. And so I wanted the footer to have that and then I could use the before pseudo element to put in the waves. Here I actually want the header elements to blend with the overall page so I didn't need to really use pseudo elements. I just styled the background of the element itself. So if I take away the backgrounds, this is what we have which is, it's a lot of white space, but it works okay. If the image is filled to load for some reason this is not terrible. So then I add in the first which is pulled a little bit off screen to the left and then it has a vertical placement using a calc statement as you can see there. It's meant to lift the image up from the bottom of the header by a distance dictated by the width of the browser window. It's basically put your bottom edge against the bottom but then come upwards by 4.2% of the width of the browser window. Again, that 4.2% mostly arrived at by trial and error. It's also 29% the width of the overall header element and then auto, its height is auto calculated so that it keeps its aspect ratio. So then on the right put a different wave image pinned to the bottom right and 45% of the width of the header and then another copy of that left side wave but bigger pinned to the bottom left and also 45% the width of the header. So on the left side that's actually two copies of the same image, right? There's a smaller one in the back and then a bigger one closer up and there's that 10% of the header that's clear of either wave. I wanted it split like that. And I also, to some extent I wanted it split so that I could, if I wanted to, set widths that weren't percentage based and then if the browser window got really wide the waves would pull apart. Anyway, so now I've inserted a translucent gradient into the middle of that background stack and notice that the smaller wave on the left the one in the back is faded out, right? Here's that same gradient made more opaque and it actually shows how the foreground wave masks out the background wave. Let me pull that left wave out and then give it a black background. So you can see some parts of the images are opaque, some parts are not, that's the beauty of PNGs. But you put that on top of the other wave and then you put the light gradient between them and you get the illusion of depth which I really liked, that was something I was after. Maybe I was a little too aggressive with the fading of that back wave. Maybe I should lighten the gradient so or make it more transparent so that the wave in the background isn't quite as faded out but that's really easy to do. I just have to adjust a couple of HSLA colors and specifically just their alpha channels which is what I like about this overall technique of layering images and layering gradients. It's much simpler to experiment with and alter various effects just by changing a few lines of CSS or maybe just one line of CSS. So there's more to this header than I showed actually. This is the basic background setup which is applied to mobile sizes. I styled mostly mobile first. So it just has that left hand wave at mobile sizes but then when you go up to the desktop sizes you get or even really large handheld sizes you get this layered background that I was just talking about and just showing you with that sort of illusion of depth. And if I ever decided that I wanted to put in the middle between the two waves a boat, all I have to do is add an image or if I decide I want to create even more depth and more repetitions of these wave images again, all it takes is adding in a couple of lines of this background rather than having to redo the whole thing. Backgrounds don't have to be this complicated and I kind of threw you into the deep end not to use a nautical pun by going through the most complicated ones first but sometimes with just a line or two you can create a more stylish separator. So as an example, the line there that's between the main body of a post and the sort of the meta information saying when it was published and what categories it's in. That's a background image. And well it's a background gradient which again is a background image. The way it works is I've created some top margin and top padding. The padding is the important part here. There's an M and a half of top padding. You may have noticed I like to do in situations like this a lot of my sizing in M so that it's text based on the text size. Anyway, I put in a single background. This is it as a five pixel tall background gradient. So you can see it actually starts more darker, more opaque on the sides and then becomes lighter in the center. It fades in towards the center just by using different RGBA values, different A values on RGBA. And you can see it's not repeated. It's 50%, it's basically centered vertically or excuse me, centered horizontally and pushed down one M vertically. And then it's 100% wide and five pixels tall. But if we change that five pixel to one pixel here it is and that's it, right? Rather than using an HR or having a PNG or an SVG that I have to load or in the case of an SVG embed I literally just have one line of CSS. And if I ever decide that I wanna make it darker or lighter I just fiddle with a few alpha colors. If I ever decide that I wanna turn it into a rainbow I just change the color stops. That's really all it takes. Now, we can take this and sort of combine all of these various ideas to make separators fancy as opposed to simple. And they don't really involve that much more code only a few more lines. So this separator, this is based on an HR element. It literally is an HR element and I'm showing it here without any extra styles, right? I just, there's literally an HR in the markup which is something I use occasionally in my markup but an HR element is an element, you can style it and CSS does not care what you think an HR is supposed to look like, you can do whatever you want. You can size it, you can add margins, right? So here I've added some margins to it and also gave it a height of 2.33M. So now it's a box because an HR is really a zero height box with some borders. So if I take away those borders the HR becomes invisible until I add a background to it. In this case I have a one pixel gradient that fades towards the sides. It's actually more opaque in the center than it is at the side. So it's sort of the reverse of what I did with the other separator. And then I can add on top of that a thicker, a three pixel thick gradient which fades out more quickly but it creates this effect of the gradient getting thicker towards the center, right? So not only does it fade out visually but it also fades out in terms of thickness. This is the visual effect that's created here. Then add a couple of images similar to the way that the left and right waves were added to the header and then one more in the middle. And now any HR element that catches these styles will be extra fancy, right? Create a little more visual punch and you can do all kinds of things. You know, I wanted this to be centered. At one point I was putting the trumpets as I call them the two things on the sides of that disk. I was putting them on the ends so that there was a disk in the middle and then this line that went out and then had these trumpets on the end. And I liked this better. But who knows? Maybe someday I'll just reposition those trumpets and have that effect instead. And anyway, here's the code which I realized as I was formatting the slide could be a bit simpler. You notice, you might notice every background image here every single one of them is set to no repeat. I'm repeating myself, right? Every time. No repeat, no repeat, no repeat, no repeat. I could take all of those out and add a single line of CSS to cover all of those repeats by just pulling them out and then having a single background repeat, no repeat which will apply to all of them. So, you know, like I said, there are a lot of different ways to combine these things in block quotes. Here's another way of combining images and gradient lines which is what I did for the block quote here. There's a one image in the top left and then there's another one in the bottom right, right? And then a gradient line across the top that looks like the quote image has some kind of halo around it. That's actually a visual trick. It's the gradient fading out before it reaches that quote image. Same thing on the bottom, right? It does that same fade out trick that makes it look like I did some kind of fancy filter or something on the quotes but they're really PNGs that don't have fancy glows. I'm just faking it. And what I like about this technique is that if those quote images failed to load for some reason like maybe the image directory gets moved somehow, it's still an interesting looking style. It still sets this apart visually from the rest of the text. It's just, it's missing a little extra decoration. But anyway, here's the code. And for the linear gradients, the two stripes at the top and bottom, I used current color, which is a key where it basically says what's the current color of this image, right? So whatever the text color is, that's what those gradients are going to use. We're used to borders taking that sort of thing automatically, but these aren't borders, they're gradients. And I have to give them a color, but here I can say whatever color the text is, use that. That's, use the current color. So that if I have a block quote that I decide to style red, those two lines will get shaded red, although the quote images won't, I think that's okay. And if I really thought that they needed to be changed, I could probably come up with ways to make that happen. So one more, I promise, and then it'll be time. So sometimes you can use backgrounds as masks. We saw this a little bit with a header image without one wave that has some opaque bits. So for my, for these links, these extra special links that let you into a new place, I decided to go with this presentation. And if I take off the background images and just leave a background color, it's a little, it's very subtle here. It'll be more obvious in just a minute. You can see that there are these rounded caps on the ends of the link, which is, which I created with a border radius. Oh, that'll be on the code in just a minute. But anyway, once that's done, I put in top and bottom gradients. And these are just, I think the gradients that literally go from black to black or, you know, some black shade to the same black shade, creating what would otherwise be borders. But here, I didn't want to set borders and then have them curl onto the sides. I just wanted the top and bottom stripes that would get cut off by the border rounding. So gradients made sense. And then added a couple of images, very similar to the fancy horizontal rule or to the header where there's one on the left and one on the right. These, this is actually the two images which I put next to each other. But if I split them apart and bring in a background color, you can see that they're actually sort of negative space and they have this light mask almost, the opaque parts of them create a mask. So when I put them back on here, they mask out the background, that red background. But they also, you can see some of the body's background, if you look closely, through the part where the images should be, right? Where that opaque mask was. And that's because I'm using the border radius to sort of cut them off. This is, I just inverted. I used filter invert to invert the link. So you can see where things are masked. And it all comes together. It's not perfect. It really, I've considered using actual masks but the support for masking images wasn't great at the point I was doing this and I'm not sure it's gotten much better. Whereas this is very, very widely supported. Anyway, here's the code. You've got the right end cap and the left end cap and they don't repeat in a couple of gradients. Okay, they don't go to exactly the same colors but they're very close. And then underneath all of that is that faint red color which is FED, then then five is the alpha. So that expands out to FFEEDD555 representing the alpha value for this particular color. And then there's that border radius. It's one M wide and then 50% of the link height. You know, there's a great deal more I could say that I could talk about when it comes to backgrounds. I mean, honestly, to some extent, I only scratched the surface here. It didn't get to radial gradients, for example, which you can do very interesting things with. But I think I've probably gone on more than long enough. It's been about half an hour. I'd just like to say I'm very honored that you would have an Angmo like me come to share some of his knowledge with you. And I want to close by offering my deepest respect to the organizers of Singapore CSS for all that they've done over the last five years. Any meetup is difficult to sustain. Five years is a long time. So, you know, heartfelt congratulations. Thanks in respect to all of the organizers of Singapore CSS. And thank you all for joining me today. I hope it was interesting and I hope you had as much fun as I did. Thank you. Thank you so much, Eric, for such a great talk. I don't know what the others think, but for me personally, when you revealed and built this design of your site, I was like, how did he do it? And now that you've spoken about it, it's really nice to see how it was done. Hopefully it can inspire other people to pursue these sort of like relatively more interesting and artistic designs as opposed to, you know, going the minimalistic route, which is great, but you know, kind of boring. Yeah, so I asked for questions, but in general, folks around here don't really ask questions. I only had one question that wasn't very relevant to the actual talk, but Ed has asked, do you have a reset.css for 2020? If I had one, it would basically be the current version, except it does need a couple of images added to it, or sorry, a couple of elements added to it, not images, elements. I think it's missing main, for example, and it is something I should probably reevaluate. What I find interesting is that there are a lot of what I think of as reboots, reboots.css, so normalize.css is an example of this, where it's not just a reset. The idea of the reset was to strip away all of the sort of, all of the, what we think of as no-style styles, but there's a lot of no-styles, and then build on that. So the idea was that you would take the reset and then modify it so that it started from the point that you like. You had your favorite body font and your favorite heading fonts and your favorite color combinations, which is what normalize.css is for the creator of normalize.css, and a lot of people love it, nothing wrong with that. I've seen others as well. The names are escaping me. But I would say, anyone who's thinking of using the reset.css, grab it, modify it as you need, and then keep that as sort of your launching off point, and then over time you can modify it. One of the weirdest things about reset.css is that it just got used in WordPress themes, like the default WordPress themes for many years, just had it verbatim. They didn't edit it, they just put it in, and then overwrote it, and then overwrote it. So that instead of altering some of the basics, they would just override them later. And so a lot of people assumed that that's how it was supposed to be used. That was never actually the vision I had for it, but as William Gibson once said, the street finds its own uses for things.