 So, yeah, so basically I want to talk about some new CSS technology that I'd like more designers to incorporate into their designs, right? My name is Mike Herschel, I'm a senior friend and I live in Gainesville, Florida, and I like hammock dogs, hiking and fast websites. This is me and my daughter Millie and my dog Dexter. Dexter is actually my least favorite dog. He's, yeah, I have another dynamic Coco who I like much better. I work for Lullaby and Lullaby is a design and strategy development company. We have a support and maintenance department now, which is relatively new. So if you're looking for that type of thing, we work like a whole bunch of like pretty, pretty cool clients and large websites and things like that who have logos that you can arrange and grids. And so, yeah, so what we're going to talk about is we're going to talk about graceful degradation, which is, you know, how things are going to look. If you're, if you don't have a modern browser, we're going to talk about things like position sticky backdrop filter CSS scroll snap the CSS filter property, repeating linear gradients CSS shapes and blend modes all these are pretty cool. And then there's another one I was going to throw in here that I don't think I'll have time is CSS masking. Yeah, so this is mace mainly going to be just like I don't have a heck of a lot of slides it's a lot of code pen examples and I'll throw up the links to those code pens if anybody wants to fork them and just kind of throw them. And as I said earlier, if I can't see the chat right now. So if anybody can either unmute themselves or jump in or someone do or if Amy June can do that on their behalf and just stop and ask me questions. I will, I will do this. Yeah, so, so let's talk about progressive enhancement versus graceful degradation so like, basically, progressive enhancement. They're kind of like two sides of the same coin and progressive enhancement is when you start with like the least capable browser that you're supporting, and then kind of just add add stuff on top and and the opposite of that is graceful you kind of you're working with your latest version of chromium or whatever you're running. And then at the end of it you kind of test, you know, your IE 11 or whatever you're supporting and make sure stuff doesn't completely break. But the, but but but the commonality in this is that even though, even though your users that have the less capable browsers might see might not see like the cool new feature, you know, whatever that is whether it's like some cool like blurs or, you know, some sticky headers or something like that. The site doesn't completely break, you know, and that's important like it's important for the site to be kind of very robust and that's I just wanted to kind of throw that out here. And then yeah so this is like my second to last slide right before my thank you slide. So now we're going to do some demos in here. And let's see if I have these up right now so the first thing right here, I haven't looked at these code pens in a little bit. But the first thing I want to talk about is position sticky right here so position sticky is something that you actually use fair, like you see fairly often but you don't know how easy it is now. So position sticky is a new CSS property where if I were to look in here like, like it just says position sticky right there. And the cool thing is is like when you start scrolling, it automatically just kind of puts that down let me make this so it's a little bit narrower patting 20% and you can kind of see how everything kind of just like does a really, really cool like a sticks there and then the next one pushes it off. And once, once again like this is basically all you need to do right here you do position sticky, and then a top, you have to you have to throw a top element in there, or top value in there. But so beware, there's there's an issue right here if you have a. If you have a ancestor element that has the overflow property set to like something other than that's default visible like say if you have like overflow hidden on like a wrapper element somewhere up there. It just doesn't work. And so it took me like probably like over an hour to figure that out. And when I first like ran into that like why is not position sticky work in and so yeah, so I just want to throw this in there like position sticky is awesome. But when you're implementing it if it doesn't work the way you expected. Go ahead and check for your overflows. So yeah. I'm a position sticky right there and I'm going to, I guess I do now that I don't have like my slides maximize I can throw this into the chat here sticky and so if you're not familiar with code pen. You can click up here you can log in and you can fork these and you can just like mess around with it and you can just play around it's pretty pretty neat, you know. So I want to kind of move on right here so yes yes for designers. So let's move into backdrop filter backdrop filter I think is actually supported by Chrome right now as you can kind of see right here. So what what this is previously it was only supported by Safari and Edge, but now it's actually supported by Chrome so at this point like it's using up a good. Like it's, it's supported by a good chunk of the browser market so like basically like if you look at this. This is one property right here this is like backdrop filter blur 12 pixels and you like if you scroll as I scroll down, you can see that hey, like the little kittens getting blurry right there, and I could probably, you know, change this a bit make it 112 pixels and do something like this, and like, this is pretty neat right. So like, if you think this is neat, put something in the chat because I can see that right there. And it's not just that it's not just this blur function that you can do right here. You can also do things like brightness. You know so like let's take a look at this like you can see we have this area right here that's pretty, pretty dark, you know so you can obviously use this. If you have like hero images with like some white text on there, or something like that you can make this brightness probably larger I'm assuming this would work yeah so like look at this cool stuff in here I'm so I'm just going to kind of go through here, because it's pretty neat So the next thing is contrast. So like I really like all these like you know scroll effects and, and like things as you scroll that like make stuff kind of fun I don't even know what the drop shadow one does. Yeah, so let's, let's look at. So undo the drop shadow. So drop shadow. I don't even know what that's doing but anyway, but so you can go through here and like the trick is just like, you know like mess around with it you know like grayscale so you can like make things. You can make things a little gray or you cannot do it like no we're now we're doing he rotate but like you can you can make stuff go black and white you can invert, you know, so like let's mess around with the invert you can probably do exactly what you think it does creates negatives. All this type of stuff. Super neat. So yay. So yeah, individual pen I will throw this in here right here. So this is backdrop drop filter. I see a question can you mix filters. And I think that you can by space separating them. Let's, like honestly, I'm not quite sure but let's the back drop filter. When you don't know you, you Google it and I would I would assume it would be like, you would space separate it or something in there. We can even just test it out right here that work. It didn't look like it worked. Wait, no, because I have all this other stuff in here first. We forgot to put it on the actual value to. Yeah, so you can totally mix them a like that's something I never done before, but it works as expected so yeah. Alright, that's fun stuff right. So the next thing I can. We can pull in right here. So close that link I think I did right. Yeah, I did. So let's leave this right here and so scroll snap so I think I have. And so this is one that. Oh yeah, so you can see I'm using. I have the scroll bar at the bottom. And what's happening is when I let go. It snaps to where I want it to be. Does anybody see that. Now this is like this is like there's a little bit of JavaScript in here because I fork this from someone else but the JavaScript all does is just like modify the colors and stuff. So if I use this is really cool like on touch devices. So if I use like my trackpad here. And I get in here you know I can I can two finger it over in a fields very natural you know, and it, and it so you can build things like like CSS only sliders or anything like that. So I think you might be thinking to yourself. Well, why do I just want to do why can't I just use JavaScript. And the answer is because your browser supports this natively it's going to be a lot faster it's going to be a lot, a lot more lightweight. And it's just going to feel a little bit more fluid, even if you're on you know an iPad or iPhone or something like that. And like, that's, that's pretty neat right there. So yeah so this is it right here so I'm just going to post this CSS. So scroll snap. All right. You can see like right now let's see what's where it's, oh yeah, there's all types of properties in here I wanted to do is so you can control like a lot of the different values you know, like how quickly it's going to snap how far over you need to scroll before it starts. All types of like really, really granular things that you can get into if you do if you've done this. So now I want to get into CSS filters, which are pretty cool. So, one of the things that I really like about CSS filters is adding like a drop shadow so like, there's the regular CSS box shadow property and the box shadow property like if I were to add like say like a box shadow on this box, box shadow. Two picks, two picks, two picks black. You know, it, it go ahead. It adds everything on like the edge. And I tell you what like Chrome's actually doing a better job than it used to were before like if you had a border radius, it would actually put the box shadow on the edge to. And now it looks like that behavior's changed. But something that's cool is you, you can do this now with the filter drop shadow. And the filter drop shadow will go around your SVG or it'll go around your transparent PNG, or like, it'll, it'll work properly with your border radius is where your border, your border radius is like even though you're the drop shot I might have been working in Chrome, I almost guarantee it wasn't working like, you know, Safari or something like that Safari is just paying the buck. So, this is, this is the CSS filter right here so in addition to that like we like we looked at with the backdrop filters. There's a lot of the same ones in here you can adjust the contrast, you can address like the brightness you know and think about like maybe doing things like this within hover states. You know you can do this cool stuff in hover states and focus states and things like that. Adjust the grayscale which is you know make it black and white, you know that's kind of a cool like little look right there like imagine doing that like for your hover and focus states. I'm going to go through a couple of these and then we'll look at the browser support. The CSS filter browser supports is pretty should be pretty good I don't think that I 11 supports it, but but we'll go ahead and look. It's a CP atone thing like hey that's pretty neat. So, like, let's go to can I use I'm sure I can I use is an amazing website so filter. If I can spell it right filter SVG filter CSS filter function. This is not exactly correct right here, because I know it works in like some. Yeah CSS filter effects right here. It's like basically this is everything but I 11 right here, and evidently upper mini so like you can see it's been supported on Chrome since like version 18 and it's like pretty awesome yeah. So thank you for that. You can get in here and play with this I'm going to post this right here filters. I'm like a big fan of like doing stuff like making like the website like interactive and like do cool things on scroll and do things on hover. As long as his perform it you know and when you do stuff within like CSS and you don't use JavaScript stuff typically is a lot more a lot faster than otherwise would be, you know JavaScript can be just a pain in the butt. So let's kind of move into CSS filters repeating linear gradient. And let's kind of take a look at this. Yeah, so this is just like basically this is you ever see like some of like the cool things where people create like CSS art and stuff like this. This is, this is one of the ways that they do it. So like repeating linear gradient is a function that you throw into your background image right here and you kind of see like some cool. You know things that I've I've I've I've used like this whole straight pattern and stuff before, unlike things like admin UIs where I say like you know if you're in Drupal and you go into the layout builder I have like, like a cool like a little stripe background to kind of indicate that. And you can see that the browser supports looks really good even ie 10 supports it, but it's just like something that we don't ever see like ever see you know like I guess you could kind of do it through background images pretty pretty easily. But hey you don't need to because we have repeating linear gradient. So repeating gradients in general see what this one is. Oh yeah so this is a radio gradient right here repeating radio gradient so radio gradients are relatively new. Let's go ahead and see what the, what the support is on this. Yeah, actually no I thought this was a little bit different so radio gradients, this might be a little gradient. Yeah, so alright. Maybe I was thinking of the cone gradients are new. Yeah, the radio gradients are pretty are old. So, but you can kind of see how the repeating gradients work and like, this is so like some cool effects that you can do and you can add into, you know, designs and things like that. You know, you can kind of imagine how you could use this as like, once again, like maybe like things that happen on click when you when you go into the active state and things like that. Yeah, thank you for that conic gradient the Kona I wonder if there's like a repeating Kona gradient or something like that but that one is relatively no. So, this is pretty cool radio gradient. Let's kind of move on right here. Oh yeah so this is my dev side that I was going to show with the layout builder but I know that's not working. So she says shapes are like really really cool right. So, hey look at this I have this. This image that I have a like, you know, like a border radius around but look how the look how this wraps around right here. Like this is pretty neat you know like how the heck am I doing this and like obviously like you know I'm using this thing called CSS shapes right here. So let's kind of look at this right here like you can, you can see like, you can see CSS shapes of somewhere in here, polygon. Wait, yeah so circle. I forget what this is. Where is my code that I'm doing this at right here. Yeah right here so you can see shape outside. That's what that's what I'm using right here. And then, if I scroll down. There's another one in there that that looked really cool how come that's not showing. Maybe this webs. Maybe this isn't shown right here is just darn it. So I had this like really cool like it, like leaf right there and then what would happen is like, you can actually modify your shape to go around that so like, let me like say like add like you know, leaf. Go ahead and create a new leaf in here. And what I'm going to do is I will show you kind of kind of what I what we can do on top of that so let's copy link address and let's see if we can update this. We'll do this on the flag because this is how live demos go. She's stuff like that that makes Google horrible. I just want an image of a leaf that's not. I just want to leaf. Sorry. So you can see like right here there's like, you know normally this would be tracing around. And you're you're probably trying to you're probably thinking to yourself alright well what does that CSS look like. Well there's like a whole bunch of like this whole polygon function right here with shape outside, and you're thinking to yourself. So this is really cool Mike, but how the heck am I going to know all this stuff right here. Like, like this is a bunch of BS. And I'm thinking to yourself you're right but Polly Firefox has a CSS shapes editor built into their developer tools. Firefox has pretty amazing developer tools right here. So let's kind of go in and maybe mess with us right here. Let's move this up. Let's go ahead and hit this little button right here and watch this this that you're going to you're going to you're going to just going to say poo your pants here like look at this stuff. Move this back over here. Like look at that move this right in here. This can go over like this right here. This is in here. I know I'm seeing like to oh my gosh is like this is awesome. It really is awesome like this is pretty neat this is like super cool stuff. Yeah, yeah, someone said rad but the correct term is awesome because I know that's going to make Amy Jane upset. Definitely put your pants sorry about that. Yeah, Firefox is awesome. So yeah, so you get in here and see CSS shapes. Yeah, so I have all my bookmarks in Chrome though so let's see what else we have there and then we can maybe move on to we can move on to CSS blend modes are pretty cool. Am I up to a keg now. Tally's way higher in that duty. Hey, Amy June how long do I have, by the way, do I have to another 15 minutes or another five minutes. You have another 15 minutes. Cool. All right, well this is really good then because we can, I wanted to add. We have one more to show you but I wanted to add CSS masking into this but honestly, with the time change, I thought I would have an hour to do this and then Amy June ping me and said, hey you're up in five minutes. So, let's look at CSS blend mode CSS blend modes are pretty cool right so it's the keyword right here is mixed blend mode. So you have mixed blend mode normal. I'm guessing that's going to do absolutely nothing but you can do some explain mode. Multiply and what is that puts a little kitten in there. You know that's because they're so. All right, so what I want to what I want you to see right here is look at the text and look at the cat behind there. This is pretty neat stuff right here imagine doing this like on hover or on. Like, you know, scroll and like all this type of stuff like that's that's pretty rad not rad but that's pretty awesome in my opinion. So, yeah. So, that's pretty cool so the mixed blend mode is is is the keyword but like of course there's all types of cool things and these are just basically like the Photoshop filters that you see like right there so you can see, like there's screen there's things like overlay, and a lot of these I don't even know exactly what they're going to do until I get in there and mess with them you know, but like stuff like this is like pretty pretty cool you know, like the color dodge and just like playing around with all this. Yes, Amy Jude does Amy June doesn't like awesome. Every time you say awesome. She corrects it to rad for some reason. What is that is correct. That's my understanding. Correct me if I'm wrong color burn color burn looks pretty cool. So, I'm going to interrupt here because and this is bad camp style so so the reason awesome is such a if you look at it, it's some all right I mean does that really make sense only have some so that is why I don't like the word. There you have it everybody. Yeah, what about awful. Yeah, yeah Mark said just full of all right so yeah I'm going to I'm going to call this stuff awful. So to go and Amy June Amy June just told me to. So yeah so there's things like this right here. So yeah, so anyway, so you can see all these options right here so like you can you can say all these awful mix blend mode. So you go to the MDN page for mix blend mode and you can see that the browser supports pretty good obviously you wouldn't expect ie and then like there's also like a separate thing for SVGs and you can see all their different options right here that you have I think I just like copied and pasted these from here and there and you can see options and what it's going to look like, and like yeah so this stuff is straight up awful you know it's full of stuff and like, even as us as front end developers might know the stuff exists, but it would be really cool if our designers knew that this existed because like for me. I, you know, I basically take designs and figure and envision and I convert them and every once in a while I get to do some fun stuff. So I like I feel like this could be pretty neat. So, I'm 15 minutes in right now, 15 minutes to the end so there was one thing I was looking in there is like CSS masking. So I'm going to Google this. Base so like let's just kind of take a look at this you can. So, basically, you create a mask right so you have an SVG, and then you can have your image inside of that. And yeah so you can see it's mask image right here. And honestly, I've actually done this as a gradient right here. And I've actually I can show you that live we did a website for aims laboratory. And if you go in here. You can see images that are up at the top left of this like little promo here. This image. If I were to look at this if you can see this in dev tools. This images is straight up like a full like image if you if I take that off right there. Like from an editorial standpoint, I did not want I did not want editors to need to edit this thing and Photoshop and then upload it. So, I use a combination of what of mask image along with radial gradient and basically just like put that in there like that. So it looks good and functions well and it makes the editors life a lot easier. You can use like this mass gradient stuff and like I'm a mask image on SVGs and on gradients and things like that. And yeah this is like, this is awful, it's full of our right here. And I highly recommend that you do this that you show your designers and. And that's kind of about it for me like that's that's to da so I'm a little bit a little bit quicker. But does anyone have any questions or anything else that maybe they want to say that hey I've I thought this is like really really cool. Maybe, you know, maybe maybe you can you can teach me something. Can you wear a CSS mask. That would actually be like pretty awesome, like a CSS mask. Anyway, CSS, I've seen like, I've seen masks that say like, they say like 255.255.255.0. So it's a subnet mask, you know, but I haven't seen a CSS mask yet. Yeah, yeah, pretty rad or awful. Any more questions. Yeah, alright, well, you're welcome. I don't think there's any more questions so if anyone uses this you can reach out to me. And like tell me like hey Mike thanks for telling me about CSS masking this is where I'm using it or anything like that but all that stuff is like pretty cool.