Five easy and fun CSS effects

Key Takeaways

hello my front and friends sometimes when we write CSS we're just doing some boring layout stuff but other times we can Muck around and have a little bit more fun with some fun effects like you can see I've done here we have this underline effect that goes across multiple things we have this sort of crazy button going on I have images in the text or gradient text I even have this underline that changes into the gradient uh on my link there instead of one that just appears and so we've done some different stuff here definitely gone a little bit overboard in this example but I think there's a lot we can learn by sort of pushing the limits and sometimes making things a little bit more exaggerated so let's move this version out of the way and we'll start with this nice Blank Slate that we have right here we're going to have some fun with this uh and dive into it and I think the first one we're going to do is the text effect that we have right here and we'll look at two different things you can actually do with this one so what we're going to start off with here is right here in my CSS let's just come in with I have this called my page title which is just the whole title along here and you'll notice actually I have this span here so we're going to see this is going to sort of cause a problem we'll see how we can fix it uh along the way um and I'm just going to do a nice Simple Text Shadow on this and for this I'm going to use an offset of about two pixels in both directions uh for now I'm going to put a blur we are going to remove it but I'll put that there and I do have some custom properties set up so the very first uh one I'm going to put here and I'll just put this on one line so it's easier to see and it' be my color accent 400 that we'll put on that and you can see it there a little bit maybe just for actually I'm going to make this 20 pixels 20 pixels and 20 so you can really see that that shadow is there uh the fun thing with the Shadows though is if you don't have a blur on them you put a zero for the blur it just recreates the same text again but offset uh and then if you come in with a small amount on there that can be nice cuz it's it's there it's really subtle I don't particularly like it in this case with the red I don't think it looks fantastic but we can also put multiple Shadows just by putting a comma after the first one and then we can offset the next one by a little bit more and these will be layered on top of each other this is the one closest to us then we'll go one back one back one back so the offsets do need to increase each time uh and this time I'll just do a color secondary 400 and I'll put a comma and let's do one more 6 six zero VAR color and I have my primary 400 that we can throw in there and you can see we sort of get this fun effect going on I did have to get a little bit creative on how I did my and easy cuz I have a span here for the word fun which has the position a relative on it and actually that wraps like all around there and then I have another span here there's other ways of doing this obviously um but I sort of did it this way with some nested spans so however you did it if you have something like this and you want that effect on some text but maybe not all the text like I don't want here uh we can come in with you probably won't like this selector but we're going to do it anyway a page title span span and we'll just say none right there and hit save and you can see that now it looks a little bit nicer and you know it's just it's one of those things you can Muck around with uh for certain titles or something to give yourselves a little bit of an extra effect along the way uh the next one we're going to do is since we're on this idea of text Shadows we can do this similar type of thing with a box Shadow and what I've done here is I've actually just used a regular HR which I don't tend to use very often but we have my horizontal rule right here that's separating everything and I used to hate using them cuz they were hard to style but then I realized I guess the the trick to styling HR uh in general so we're just going to come down here and for whatever reason HRS are by default use a border and I think that's why it's kind of annoying but we can just say border zero and then we get a blank slate to style ourselves from or everything from and for this one I'm actually going to come in with a custom property called size and it's a locally scoped one um it could be in your root and you could call it HR size or something like that if you wanted to but the reason I'm going to come in with that uh custom property there is because what I want to do is first let's come in with a height and we'll use that VAR size here uh to give it an actual height and let's just add a background for now of white and we'll look at a few interesting things here we we'll increase this at one point and I'll show you another little trick um with this that's not necessarily for box Shadows just for anything um but we'll we'll Circle back to that in a second but as I said just like we did here with my tech Shadows we can do similar things with box shadows and I won't make you go through the whole process of me writing it out it's very similar to what I did last time but now I'm only offsetting them downwards and not off sliding left and right like I did there and you can see my colors are coming in and it I don't know it's a bit of a fun effect if you had this type of thing going on I think it's a nice little recurring thing but the main thing here isn't don't take what I'm doing in this video just to use as is just take it like oh I can use multiple box Shadows on stuff and find your own ways of doing stuff like that uh so there you go though you can see I have the multiple there but the reason I put the size on here is let's say I made the size bigger and I make it 10 well that's kind of awkward now cuz that's just covering and it doesn't look look quite as good right so what we can do is we can actually play around with these offsets that are coming based on the size and it makes things look a little bit weird but it makes it all so much more usable where we come in here and if actually let's go back to the original cuz it has sort of help us with our math a little bit so this originally was double the size so I can just say come here and I can say Cal and say VAR size and that would be my times two and then my next one this would be a * 4 and then this one here would be a * 6 and hit save on that and now if I made that one it's going to work and if I make it a four it's going to work and if I make it too big it's not going to work cuz they're box shadows and it's getting a little bit awkward but at least the offsets as I'm increasing the size here are working and this the reason those are matching the original size is it's a box Shadow with no blur so it's just copying the same element offsetting it downwards uh and of course I mean you could do this for something you know if maybe each one of those was getting a little bit lighter or something like that it could be a bit of an interesting effect or something along those lines and while we're here the other thing that I did sort of allude to earlier on was if ever you have an element and you want it to have a rounded border radius Like a Pill shape uh I've talked about this before so if you watch a lot of my videos you know this one and just on that note if you've been watching a lot of my videos but you find you're not yet subscribed maybe consider subscribing cuz you know you're watching a lot anyway but let's come in here and do a border radius and for The Bard radius I'm just going to do a 100 VW CU if it's a really big number then it gives you that roundness there and you can see that roundness is coming onto all of them let's make it a little bit bigger uh just so we can see that it's giving me that and the nice thing with doing a gigantic number here is it's always going to work it doesn't matter if this is 2 pixels or 2,000 pixels uh you'll probably be fine it's a little bit harder to notice I guess when it's small but it's still there awesome let's move into these fancy links that we have here cuz uh that's exactly what I called it and I showed that we had two so uh let me just go and find one of them here there it is uh we're going to do my fancy link one for now and we'll come over to my fancy link 2 down at the bottom uh in a little bit but we'll focus on this one for the time being and so let's jump in and come down I just copied my selectors we'll do my fancy link right here uh fancy link one I just I said I copied it and then I wrote it out I do that all the time even when I'm coding on my own um Okay cool so we have my fancy link one and for this one if you remember the original one it didn't have an underline at all so that makes it easy we can just do a text decoration uh of none on there and what we want to do is sort of fake that text decoration a little bit but with a gradient and we can actually do that with a background image which is kind of interesting uh where we can come in with a linear gradient and uh when we do this let's just do it really fast of red blue and you're going to see it's going that way which is not what we want and so first we can just do a 90° here so so uh and of course don't replace your parentheses but we want just want to do 90° red to blue so it goes from Red all the way to Blue like that and just there you go there is my full gradient now the next trick here is to come in with a background size and this I guess is a little bit of where the magic happens where I'm going to do a 100% for the width but I'm going to say the height is only 3 pixels and it might not feel like it's working but it actually is let's turn off that 90° for a second you're going to see it's repeating itself over and over cuz the Height's actually 3 pixels now uh the problem when it goes this way is we don't really notice it because of the way it's repeating um so it looks like it it's the same gradient we had before so let's do a background repeat of no repeat which I wish was none but it is no repeat and it's looking a little bit better the problem is it's on top instead of underneath the link which is where we want it to so now we can come in with a background position I'm going to write left for now and then the fun part is figuring out how high you actually want it to to be uh we do have an LH unit now that I think should help us um but it it doesn't have the best browser support so I am going to come in and use M's along the way here and sort of magic number my way to where I want to be uh the problem is is as we move off the bottom here notice right now it's gotten really thin and it's cuz it's actually it's not really overflowing but it's a background image so because it's a background image if we go outside of the actual size of the element it just sort of starts to disappear uh and even though this is an inline element you can add padding to inline elements and the advantage actually of adding padding to an inline element is it doesn't influence other stuff around it so uh let's take off this no repeat for a second just so I can show you what I'm talking about where I'm going to do a padding block which is a logical property for the padding top and bottom and I'm going make it really big and I wouldn't necessarily keep that but you can see it's it's added that padding but it hasn't influenced the layout at all just because it is an inline element so the padding is visual ual only and not actually influencing things in a negative way uh but of course this we probably don't really need it to be that big so I'm going to make it like maybe a025 or something like that um 25m just so it's far enough down that I can position the line where I want it to be and we'll put that note repeat back on and I think you know you just sort of get to where you want it to be uh along the bottom maybe a 1.5 or something like that will depend a little bit on the font or as I said you could also potentially use an LA unit which is the line height unit so the nice thing with one LH is it will be basically moved down to the very bottom um and right underneath so you can see it's lining up just underneath the descenders that are on there kind of Handy um but again browser support for the LH unit isn't perfect so I think I'll stick with my 1.5m for now and I am using M here so if ever I change the font size it would move along with it same with this padding I want it to sort of adjust if I ever adjust my font sizes now the real magic here of course is getting it to slide in and out and in gradients are something that we can't currently animate uh because they are a background image and eventually there'll be ways of doing the colors within them with custom properties um with Houdini and stuff but we're not there yet so for now what we can do is just come in and say this is actually a 0% for the background size and just if I put this at 50% you'll see it's going to go 50% of the way across and you can see it here too this is a short link so it's halfway across that one this one's going halfway across that one but I'm going to do a 0% for now and the reason I want to do a 0% is because let's take this and actually copy and paste it this time uh if I do my fancy link hover or Focus what we want to do is actually just change the background size and this is an animatable property so I can come in with 100% there you can see when I have her on top of them it's coming in and because it's animatable it means I can do a transition of my background size let's say 500 milliseconds and check that out it slides in and out out so nice and cool the one downside for this is longer links will go much faster than shorter links because they're both you know one has a lot further of a distance to travel one has a much shorter distance to travel but I think in general you're not really going to have too many sites where you have these giant long links like this one uh most links will probably be similar in length but I just wanted to show that it would work across multiple lines if ever a link did break over multiple lines and just really quickly of course if you did want to add other things here like maybe my text color also changes I can make my text turned to White on my transition here we can transition multiple things so I can also say that my color is 500 milliseconds uh just comma separate them and then my color will also go along with that instead of just flashing over in a change or something so I think that looks pretty good uh I did mention that we can do one where the underline actually changes into the gradient um and the idea here is that we can actually control the size of this say I do that as four pixels then it's thicker we're controlling the positioning of it as well with my off offset so I don't want to try and match the one that's currently here I want to sort of replace it with this one but we're going to get to that in a second uh the next thing I want to talk about is this button that's going to be right here I'm going to scroll down a bit cuz you can see I've already styled my button a little bit where I've changed the color of it and done some other stuff and I definitely don't want you to match exactly what I do with this button it's very over the top but I want to show you interesting things that we can do and fun effects we can do and some interesting tricks as well and one of them is going to revolve around the Border uh and the reason I have my border zero on there is cuz a lot of the time we unbuttons I actually used a button element here so there is a default border on there it's a little bit tricky to see right now but there always is one so it's very common to come in with a border of zero but what I'm going to recommend is sometimes we don't really actually want to use a border of zero we want to use a border color of transparent and the advantage of that is the border is still actually there and maybe the Border color won't be transparent the Border could you know or it will be but you could do like a five pixels transparent right something like that uh and you'll notice actually if I make this bigger it's that border color like that transparent it's actually the bigger I make this the background is actually spilling out into that border area which is good um again I'm going to make this maybe five pixels for now but the advantage of doing this is if ever you have other buttons that have borders you're not going to get inconsistent sizing and also then you can add in Borders or change border colors and have interesting things happen with that sometimes as well so just as an example if I start with that and then I can come in here and I can add in a border color and I can change my border color and you can see that that color has switched uh and for this one just cuz we're going to be playing with a lot of stuff usually when I do my transitions I always want to say what properties I'm transitioning I'm just going to put 500 milliseconds which makes everything so you can actually see that border is like slowly fading in and out as I do that and again maybe it's not the nicest transition in the world right now but just one of those things that could come in handy from time to time another thing I like to play with instead of borders though is outlines uh and outlines can be useful and especially now outlines should follow the shape of buttons if ever you change them including in Safari where it was added then I think it reverted and now I think it's finally back um but let's come in with an outline here of three pixels solid and I'm going to do current color and that's current color is like the original Uh custom property right well will match your text color it's hard to see right now cuz it's so dark so let's go like much bigger and you can see that it's actually there the nice thing with outlines though and the reason they have an upper hand over borders is first of all you can see they don't take up room in the Box model so sometimes that can be useful but we also have an outline offset which is really cool and I'm going to do a negative six pixels and I'm going to put this back to three pixels you can sort of get these like inlaid things like that which can be kind of cool and because it's set to current color when I Chang my color on my you know I did this before this is part of my default styling or what I had before we started but when I hovered I was changing the color to white so the color of the border is Chang or not the Border but the color of the outline is also Al changing at the same time which is kind of cool and and fun and it has a nice little look to it there I think uh and it's a little bit hard to notice but because I Chang my border color that outside color is actually a little bit different I think let's change uh that border color actually to a accent just so we can see that it's actually a different color on the outside so that might be the type of thing that you're after where you need sort of this multi-layered thing or something like that but let's switch that one back for now but another thing we can do is actually change our uh outline offset so my outline offset here maybe I actually want to change that and make it go over to zero when I'm hovering and now you can see that line is sort of like sliding in and out which is kind of interesting uh you will notice the animation for it not perfect it doesn't seem to do subpixel rendering at least on Chrome for Windows you might get different experiences in different browsers along the way um but sometimes at the very ends of animations it can sometimes get a bit choppy so I do want to let you know about that but maybe that's not enough for you you want more layers or more things to play around with and again don't go over the top like this we're just sort of exploring some fun stuff you can do and you can use these in your own creative ways uh but another thing and we've looked at box Shadows already so why am I doing box Shadows again and it's because we can actually come in and I have some preset ones here that I'm going to just paste in so you don't have to watch me do it all um and of course this isn't a box Shadows it's box shadow um and let's not do the inset right now actually let's just do a box Shadow like this where now when I hover you're going to see like we get extra layers on the outside maybe once again I'll make one of let's do this outer one as an accent color just to make it stand out a little bit more so you can see that red is coming in uh we do want to be careful with animating box Shadows it can definitely be a little bit janky so do some testing uh if ever you are animating them like we're going to be doing here and the reason it's animating is cuz I don't have a box Shadow set here so it's going from like the zero to what we're coming in with here uh but as I showed you can also inset box Shadows so by doing the inset on here if I hit save on that you can see it's now like those are kind of like sliding in as other stuff is sliding out and it just sort of creates this like sort of interesting effect now I'm going to go back to my primary here because I think it looks a little bit nicer uh kind of weird kind of over the top kind of I don't know I don't think I would do all of this at once but we're just sort of throwing a whole bunch at the wall cuz it's fun and it's always good to do go overboard and then rain yourself back in you can see all these different things we're discovering along the way uh by doing this so a little bit of fun um but again maybe rain it in and and don't overdo a button animation like that just cuz it's it's a lot uh but yeah that one's done we're going to cover a couple of really fast ones and we're going to get to that second link that I have down at the bottom and these next two ones are actually really fast so uh for these ones I'm going to move back up to here uh and I have this here I have this class of image text and a class of gradient text so I'm going to select both of them cuz whichever one you're doing if ever you need to do this make sure your font size is really big small font sizes it's not going to work uh very well so I already have this ready I'm going to paste it in where I'm selecting both that image text and the radiant text and I'm just going to give them a really big font size make them uppercase as bold as I can possibly get and have a line height of one and the reason we want to do that is ever you're putting textures or other things in text it doesn't work unless the text is very big I want uppercase to make it as big as possible the Bold all of that the line H one is just cuz it looks terrible if I don't do that with a large font size cool um and let's start with the image text cuz I mean they're both very similar here it's sort of a two for one but my image text we can just come in and the idea is you want a background image which I guess makes sense and I have one here just from on spash you can see the the text has come in or the the the text the images come in uh obviously you don't want to be using unsplash ones like this but I'm just doing it for a quick demo now the next thing we want to do and this is important to have on there just based depending on the size of your image and all that but we're going to do a background size of cover just cuz we want to make sure it never repeats itself and it sort of matches our text uh though you will notice that the image is bigger than like where this line break in my text is and that's because it's following the element and the element here it needs to take up all that room it's just the way it works we can't really get around that so sometimes if you're worried about parts of your image getting cut off it's inside of text so please don't worry too much about that it should just be decorational more of a texture than ever anything else you have to be very careful that it still keeps the text readable because it's really easy for images to have lots of Shades and colors that all of a sudden you can't read the text so be very careful with this one if you're going to do it now where the magic comes in is with a background clip of text and when I do that it all seems to disappear and that's because it's clipping the image to the actual text that's here you might see other demos where this has a webkit uh webkit background clip of text uh this until recently you had to do this in Chrome but I think it was Chrome 12 or 121 finally dropped the prefix for this one uh though if you do want decent browser support you should include both so you can always just duplicate the line and include the prefixed version um as well as the regular one just so you know you have good browser support uh and then the last thing to do is to say that your color of your text is transparent and as soon as I do that I can see the background image that is behind my text and the nice thing with this is you could actually come in with like an RGB and let's just do black so 0000 0 and over5 or something um and that I probably should have done white instead of black but you can sort of overlay that color on top of the image if ever um you need something that makes it more readable instead of less readable like I'm doing here but for now we'll stick with a trans parent like that um and again it's not like this T is getting a little bit lost you really want to be careful with this and make sure your text is very readable different screen sizes test all the different possibilities and don't do it just for the fun of it the bigger the text the easier it is going to be to read and for my other one as I said this is sort of a two for one so if ever you want to do a gradient text you can just come in with with your gradient text and instead of a URL as you might guess you can just come in with a linear gradient and let's just do 90° red blue here as well and it comes in now you'll notice once again I'm not actually getting to the blue because the blue is all the way out here and it just depends on where the line breaks are and other things like that and as far as I know there's not really a way around that um it's just it is what it is and so it's fine you sort of have to live with that uh if the text was going to be shorter one way you could ensure that it would work is you could do the width here uh width is going to be a fit content it won't change anything if you're on multiple lines but the advantage here is if you had shorter text and it's only on one line then you can see the gradient is that whole word that's coming along here and if I add like as as this gets longer the gradient will always match it cuz the width of this H2 is the width of the content as long as there's no line break so so images width it's going to match that but gradients as soon as we go to two lines now the width was 100% cuz there's a line wrap the element is actually 100% that's getting forced into a line break but that could be a nice way for both this one and this one just to ensure if there are short lines of text that the gradient or the image will match exactly what the text is and finally let's move myself up to the top cuz we have this link down at the bottom which is our second fancy link and for this one I just called it if we look in my HTML uh fancy link two so what we're going to do is go and find my fancy link one right here we're going to copy it all because fancy link two as you might guess starts off very very similar but we're just going to select this one and make those all twos so we have this working down at the bottom just like the other one was up above and what I'm going to do here is in my linear gradient I'm actually going to come to the end of this and I'm going to add in another color which is going to be my current color and as we talked about wrote before this is sort of our Old Faithful custom property so it just means it's going to match the color of the text which is exactly what I want for this underline when we're not on it you can see right now it's just adding that to my gradient and it doesn't look very nice what we're going to do though is we're actually going to say this blue goes to 50% and we're going to say the current color starts at 50% when I do that you'll see that it makes a hard line in the gradient so at 50% of the way through the link we're starting with the current color and now what I'm going to do and this is kind of weird but we're going to make this background size here 200% and I hit save and you're going to see that now that gradient is there and it's sort of moving in the wrong way uh the background size here is actually not going to change so let's we can comment that one out um so we have that background size that's 200% and right now we have the background position I'm going to move this over to the right side and now I have this underline that's matching my text it just looks exactly the same color as my text if I hover on or off and you know if I made this 150% you'll see that it's there the gradient is there right and it's just I'm so by doing 200% but having this go to 50% half of my underline is going to be the the text color so the gradient is hiding off to the side right now and then this time instead of changing my background size I'm going to change my background position and let's copy this background position here and bring it down here and it's just going to go from right to left and now it slides on in and that's the reason I put the current color on that side is just cuz I want the gradient sort of overflowing out that way right so it's overflowing out that way so when I come in it's going to slide in from there if you ever wanted it to be the other way around that would be completely fine as well but just a nice little sort of way to play around with numbers a little bit and and get the results that you're after and while some of these might be a little bit much especially this button right here so do be careful but there's a lot I think we can learn from how I set a lot of these up and played around with them and the different things we did here if there's any of these that you really liked please let me know in a comment down below and if you enjoyed this video you might also enjoy this video right here where I explore some fun use cases that we can do decorational and kind of weird stuff with the before and after pseudo elements and with that I would like to thank my enablers of awesome Johnny Tim Simon Andrew and web on demand as well as all my other patrons for their monthly support and of course until next time don't forget to make your corner of the internet just a little bit more awesome