Top 10 CSS Tricks You Didn't Know!

hey DeMarco just friends in the Internet I'm doing a weird accent again in this episode we're gonna do a top ten CSS tricks that you probably didn't know now I know there's gonna be that one guy in the comment that's gonna be like I knew all of these tricks what you mean I knew these from the 90s before css3 when Michael Jackson was in his prime shamone he was the top of the world okay congratulations for you mister 90s boy but for the rest of us let's take a look at these cool tricks now before we get going I actually want to announce that I'm releasing the creative HTML and CSS course next Wednesday so it's coming out on December the 4th so mark your calendars and yeah can I wait and I also looked at all of the comments I know a lot of people were like ed please make this accessible for everybody because not everybody can pay $60 or a premium price on these courses so I did the course is gonna be I went as low as I could it's gonna be $20 and you were gonna get 12 plus hours of content with projects and everything so that's gonna be it also if you're a patreon if you're a medium patreon member I'm gonna give you 25% off and if you're a pro member I'm gonna give you 50% off so you can get it as low as $10 if you've been at least a month of people to patreon member you're gonna get that discount so just shoot me a message for that but I've been super excited it took a long time I did 20 hours per day of filming and all those good stuff I might smile right now but I'm actually in pain oh it's been a nightmare okay let's get going here is trick number one and I see a lot of people still struggle with this and here's a workaround so sometimes you might have a button on the screen I don't have anything I have a button let me save this and go back here you might have a button on the screen or anything a text or something you might want to fade out nicely either in JavaScript or CSS however you're gonna have a small little problem when you do opacity from 1 to 0 this text or this button is still gonna be clickable so let me kind of show you if I go all the way down here and I get that button and I just do let's do a keyframe here so I'm gonna say keyframes and I'm gonna say from and to so I want to basically animate from opacity one to opacity zero so we would go here and we would say hey I want to go from opacity one all the way to pass it easy a row okay simple clear enough and then we can add this animation animation we can say we need to give it the name Edie oh my goodness when you do this we can do fade okay do the edgy okay so fade one second is and I want to add four words because I want to remain at the last state here okay hit save let's take a look so when we refresh this fades out however as you can see if I hover my mouse over it we can still click it so this is still clickable so if I do the same thing here with text I'm going to see ap lorem 20 and hit tab save and I'm also going to add it on EP tags all the time P hit save let's take a look let's refresh so we have deep text there but as you can see that thing still appears there and I can grab it okay paste see I can still grab it copy pasted so this button still works so this is not okay a pass be it still just hides it from the screen but it doesn't get rid of the functionality okay so it's still there we just kind of make it invisible so then you might be like oh we can do display:none right that completely gets rid of the element and that is correct so if I go to the button and I had just a be display of none that completely gets rid of the button however if I want to animate this thing then oh no trouble has been to us display so I want to go from display:block all the way to display:none display now and if you try to do this in JavaScript so if we take a look here nothing happens it doesn't work and if you try to do this in JavaScript it's just gonna instantly disappear okay you cannot transition from display block or inline to nothing okay it doesn't work so here's how can we fade this out animate it out and also get rid of the click ability of the button well what we can do is keep this and here we can go back to that capacity 0 1 from 1 to opacity zeroes I can copy this over paste it down here and I can change this to 0 and what I can do is use something called pointer events so if I add pointer events as you can see this is specifies under what circumstance the given element can be target element for a pointer event that's too complicated for my mind all it means is that hey I can get rid of this click ability so if I leave pointer events to all and here I can add pointer events none it's safe this is basically gonna be like okay this is clickable and here basically you cannot do anything with that element you cannot click it you cannot drag it nothing so we just add the pass the pointer events none and take a look we can not click and we cannot see it as well another trick is not really a trick but people are kind of unfamiliar with display block and inline so what's the difference between those so let me quickly show you a gauge one here hello this is gonna be cave block level elements so if we take a look let me actually get rid of the other properties that I kind of added here so let me just get rid of everything hit save as you can see what happens when you add this plate block is that element is gonna take up the whole width of its available space like this ok so vertically horizontally I meant is gonna take up all V space now if we add this to ative as you can see here and I grab that div and give it maybe a height of my height a width of 50 percent like this and a background of light blue now if we take a look here now the div is 50 percent so basically the element that lies inside the div is going to take up the size of the div so depending on where that element is so the h1 right now is indeed if it's gonna take up the size of the the parent so in this case 50 percent okay so it's always gonna stretch all the way of whatever container at this end so that's the first thing that you should know about display block the second thing you should know is if you add multiple things here let me add some paragraph maybe h2 so these are all block level elements it always drops to a new line so as you can see boom we go down here this takes up the whole space so the next text that you add also drops on a new line another thing that's important is that you can change the height of these so I can add the height of this height let's do 10 Ram hit save all right why are you not updating I don't have a h2 do i all I do on the last one let's do it on on the h1 h1 as you can see so we can add a height to this and we can also add margins so we don't have any issues margins padding's no issues 2/10 ram margin as well boom as you can see we have it up there left then right all right let me get rid of this div because it makes things look complicated so let me just add the h1 boom as you can see it added the margins left right top and bottom so what you should also know about display block is that you can mess around with the width you can mess around with the height and you can mess around with the margins and padding's as well okay now the difference between this and in line so an inline example would be an a tag so if I add an a tag here I'm gonna say home and I'm gonna just copy this multiple times down here as you can see an inline doesn't stretch all the way of the available space it always just kind of takes up the size of its text that you have in here so if I have home in there or I had something more it's just gonna be the size of whatever you have in here like that okay so it doesn't stretch all the way it just takes up the width of the available of whatever the text size is it always goes next to each other like this horizontally and the important thing here is that you cannot add a height to it so if I add an e-tag and change the height to 10 Ram hit save if we take a look now oh no the height didn't change so you cannot add a height to it let's try it with a width weight 20 Ram its save oh no so you cannot add a height you cannot have it what you can add a margin and padding but take a look at what happens margin 10 ramp take a look what happens it actually only respects the left and right side of the margin it doesn't care about the top part so we added margin 10 here which should take up a lot of space here after this h2 or whatever this is so if I add 30 something large like this as you can see this still doesn't go down a lot it still stays up here so it just works in a horizontal fashion okay same goes with the padding so if I change this to adding and we add 10 all right kind of the same thing so these are the two important things when it comes to display line and block and don't get me wrong we can also change the behavior so maybe I want the h1 here to have the same behavior I can just go here I kinda have a display inline so so you can still change the behavior of all of these elements the same thing to the a tag I can always go here and do display block hit save and take a look now we have the margins and padding's up here as well here's another cool one that a lot of people don't know we can do a tiff here and so a simple div and I'll just add some text in this one so P lorem 5 hit save so if I grab this div and I'll just add I'll just change the height and width of it for now let's do a width of 80% and I'll do a height of 80 does matter 100 BH that's fine okay so let's also add a background to this so background light blue alright so here is my container my div so we know how we can do the text align here to the center and we can just go here and we can add it text align and center it save and now the text is in the center but how do we align the div here in the center so that's one thing that a lot of people still don't know now you can hack this so if you add this in another container you can do display flex and all the line just saw it was down here haha I'm back up yeah you know you can add display flex and center it so that's one way but if you want a quick way you can Center this by just adding margin Auto so you can add margin Auto and that's automatically gonna drop it in the middle and it's gonna leave the available space on the left and on the right side okay now sometimes you might also want to just kind of just put some space here on the left maybe you just want some space on the left but you want this to stretch all the way so if you want all the space on the left or all these space on the right you can just add more zero zero zero and auto so now the right side is gonna take up and only on the left side that's gonna be the empty space and you can change this behavior again so we can count from top left so we can change this from here to here and we can add zero here and now it's gonna switch around okay so this is a quick way you can Center it this now also another quick tip if you want to Center this text down here without adding and display flex and all those good jazz what you can do is basically give the same height the height that you have on the div 2d line height so I can grab the line height and I can do 100 VH and that's perfectly gonna send her my text in the middle it's a cool trick that I think a lot of people don't know oh I just added a P tag here with a lorem of 100 nobody done this before you can look it up on the internet I'm the first one we can go to the stylesheet so what's the normal behavior if we highlight this text as you can see it has that background that blue background and the text color is white what if I want to change that we can yeah we can check this out I can grab the P tag here and I can add a double colon and say selection like this take a look if I change the background color to let's do let me grab a nice color here let's do a purplish like that hit save take a look now I change that behavior and I can also do it to the text color white hit save take a look we have changed the background color and the color of the text when we highlight another quick and short one sometimes you want to make the first text big like the L so let's go back here and the way you can do that is you can say P and then you can add a colon again like this and you can say first letter and you can mess around with this so I can increase the font size of this to something like - Ram had a font weight of bold and we can change the font family to mr. sheriff himself from Red Dead Redemption and take a look we have a big al hey lovely like this video it's a big help pick this out if I grab this dip I'll just have this dip with some text in here and I'll add another anchor tag and I'll add the ID here and say maybe the gallery maybe I have some pictures down here so I'll add another div here let's just add a section here and I'm gonna say hello like this and here I'm gonna give it an ID of gallery okay so what this is gonna do is it's gonna jump down here so where's my anchor tag let me add some text to it travel down here save so if I click it's gonna travel down here but there's not enough space so let me give some space to that div div height 100% of eh and then let's give it to these sections that's fine okay so now it's down here okay actually let me give it to that as well comma section save okay so when I click boom it jumps down here but that doesn't look good who likes that so what we can do is go up here and go to the HTML and add a scroll behavior a smooth and that's smoothly done the transition the clicking down here now I should warn you that this doesn't work in all the browsers it does work on the major ones like Firefox Chrome even edge if you believe it Microsoft edge and Oprah and if it doesn't work well the behavior is gonna be basically the normal one anyway so you're not really losing anything but you don't need any JavaScript anymore so this is really really cool and let's be honest Internet Explorer can go to the trash can we can make a super quick dart mode so what I want to do is as you guys we just have some black text on some white background and we have this a tag now what I want to show you is I'm actually going to change this a tag a bit I'm gonna give it a color so maybe we have a font size this something extremely big but I can I want to emphasize so this is easy to see alright so if I want to change this color let's say we have a maybe we have a dark bluish color on our website like this okay so a dark blue or let's do pink like that okay so we have a dark pink so this looks good I don't like it let's change it again I'm on the green one okay so the first step to making this in dark mode is to actually just go and grab the HTML body so HTML what we can do is do a background of black okay perfect lovely we cannot see anything and why you do this what we can do is actually go to the filter and we can use something called invert and what this is gonna do is gonna take all the doric things on your website like the text and the anchor tags and it's gonna flip it over so if we add 0 here this is gonna be default nothing's gonna happen but if we switch it to 1 everything is gonna be flipped and now all your darts become white and basically even this one as you can see has flipped from the dark to the lighter color but here's the thing though we had green here and now this wish to kinda purplish color so basically the color flipped as well not only the lightness the brightness and the darkness but the color also shifted so if we want to bring this back to its green color what we can do is also add something called we can also add a hue rotate and rotate this by 180 degrees and now if we save you're gonna see that we still have that green color but it just changed it to a lighter green color so now it's very cool because we can just add these two we can maybe create a class of dark mode here or something and I can change these colors kind of make my site look the way I want maybe I want this reddish color save and as you can see dark mode it also retains that next up we are gonna take a look at changing font size is super quickly so one tip there is to rather than working with pixels which is AIT's a fixed amount of fix walls okay and we can work with RAM however you might notice that that might be a bit tricky so if we say a and we can set this let's do maybe h1 and what else do we have on this page font size we set to Ram well the one brand basically equals 16 pixels so this is a bit kind of hard to calculate so maybe I add it on the paragraph let's do font size of so how much is 16 maybe I want this to be 18 pixels I have to calculate and I'm not good at that so wouldn't it be nice if I could just add one point eight Ram and hit save and I know that's basically 18 pixels yes it would I'm actually zoomed in here let me zoom out so you can change that you can go to the HTML body here HTML element and you can change the font size of it like this font size 260 2.5% and what this means is that we basically change the HTML font size to 10 pixels so basically when you add to Ram here this is gonna mean that it's 20 pixels and this is 1.8 pixels now the benefit of doing this is we also have accessibility so if a user ever wants to change the font size he can he can go and basically in the options here and I can change the size to 24 and this is gonna adapt as you can see just like that so it's working perfectly 16 and the text changes as well so there we go so the user has control when you use pixels the user doesn't have any control or the other awesome thing is that I can just add this media query here and I can say hey Matt one of my max width is 700 pixels I can just change the HTML font size here so everything basically adapts so if I go smaller screen here basically after I go to the 700 boom the font size is going to automatically change on all my elements so this is a super easy way that you can add font sizes and media queries another quick thing that a lot of people don't know is that you can actually stack up box shadows and animations together so I'll just grab this div and I'll add a box shadow let's see 10 pixel let's say what is this X let's do zero pixels 10 pixels and 20 pixels all right let's do 10 again let's do RGB a and we'll say zero zero oh my god vs code why you do this to me and 0.5 so this is not that intense and hit save okay so as you can see we have that box shadow down here well labelled exactly let's add 10 pixels here maybe change this to something lower okay so we have that one what if I want to add multiple maybe I want this to be strong here but I want another one that's kind of faded so we can actually combine them together by just adding a comma and then I can copy this again so I can stack another one maybe this one is going to be stretching like 40 pixels down and the blur is gonna be insane like 40 and 0.1 if I hit save now as you can see I have this one intense one but I also have another one that's kind of faded out here let me actually increase this so you can kinda see as you can see we have two now one there and one that's kind of going all the way down here and the same works with animation so if you want to add the hidden animation and you have a keyframe you can do one here so fade one second ease and then you can add a comma and you can stack another one together and lastly what I want to show you is let's grab this h1 which I don't have so let's get rid of everything in here and this one and we have one I lied to myself we have this h1 down here let's go here we have this hello so let's grab that one let's go back here is how can we add gradient you a text so I'm gonna say h1 I'm just gonna increase the font size of this to like for ramp so we can see it better okay let's say hello boy okay there we go so this is what we have so how can we add a gradient to this well what we can do is we can see background and add a linear gradient to the background because if you try to do it on the color it's not gonna work so let me do one here I'll do so we add the background here which is perfect and what I want to do is kind of clip this background to the text so the only position that this background is gonna show up is behind this text so the way you can do that is you can add this WebKit background clip text so background clip and you say text so basically you're clipping the background 2d text it's gonna be behind it so now you cannot see anything so now what we want to do is kind of show what's behind this text and the way you can do that as you can say again WebKit like this web get text fill color like this and then you can see transparent and when you hit save now it shows up all right so these three properties is what you need at the background background clip to the text and then finally the text fill color is gonna be transparent so you're basically getting rid of that black on the text and now only the background remains okay now there is still a problem with this as you can see we cannot see the hole and whatever color this is the bluish color right we cannot really see it why is that happening well if we press f12 and we check well oh this is display:block and what it means is that the background goes all the way from left to right here so it stretches all the way which makes this hard - well the grating goes all the way here so wouldn't it be nice if we could change the width so thinks of the size of the text how can we do that oh I know well we can save this play in line and hit save and now take a look this is gorgeous now we have the blue color as well because in line picks up the size of the actual text or element so there we go those are the top ten Craig CSS tricks hope you enjoyed this one thank you so much for watching hope you enjoy the small little tricks wait a minute that you say tricks we haven't done a magic trick that you this trick is called the Train the nose is leaving the train station [Music] that's weird I need to go to the doctor thank you for watching I will see you in the next one on Saturday where we will learn how to create train engines using javascript see you then

Channel: Dev Ed

Views: 460,140

Keywords:

Id: CxC925yUxSI

Length: 24min 37sec (1477 seconds)

Published: Wed Nov 27 2019