Top 10 CSS One Liners That Will Blow Your Mind

good morning my gorgeous friends on the internet in today's episode I'm gonna give you a list of the top 10 best CSS one-liners they're not all one-liners that's a lie actually a couple of them are not but I needed to make a top 10 list and the title needed to be pretty so I'll deal with it okay oh and also let me know down in the comments which ones of these do you know which ones you don't or maybe you have a new one that I haven't heard of write it down in the comments you know what also you could write down in the comments your opinion on my courses down at developed by ed.com so go ahead and check them out if you're interested to learn more about web development and JavaScript and react and all that good jazz I have full length courses that are Project based that you're gonna enjoy well you enjoyed this because you got it didn't you okay let's get going okay for number one we have something called writing mode so this allows you to physically flip a text over in a vertical position or horizontal which is default so if you want to have a cool website like the ones on the wards or stuff like that where they flip the text in the vertical position all you need to do is add writing mode vertical and that's it now if we take a look look at that we have a nice vertical text added there and yeah that's it I guess if you want to put it next to bytes next to each other you can do display flex and that's it hit save boom scale this up and automatically looks fancy number two on the list is one of my favorites actually and I haven't really seen it use as much as I wanted it to and it's called Gap so if you're using flex and you're doing display Flex in this case I just have a container here with three items three boxes and I want to add some spacing in between the items all I need to do is now go to OBS but go here to my container so I have display flex and just add the property Gap and then I can specify a number of pixels like 24 and boom done and you can also customize this to only be on columns or on row by adding column row column row column Gap or row Gap and that's a really simple one but really useful okay so go on and GAP it up that sounds weird here's a cool little way that you can flip over an image either horizontally or vertically so if you want somebody to point in another way flip over her face why would you want to flip over her face in this case we have a car here so if I want to flip this over horizontally all I need to do is the transform scale and do -1 and I can do either X here or Y so let's do X in this case and boom you are in the UK I love this one because it used to be so complicated back in the day but now it's really really simple so let's say I have a page two pages here and when I click on an anchor tag I want to smoothly scroll down to this one but as you can see with the default Behavior it just automatically jumps down like that so to add a smooth behavior all you need to do is well you need to have your anchor set up here right so it takes us to page two it has an idea of page two and then just grab your HTML and say scroll Behavior smooth like that and that's it hit save take a look that is crazy that is absolutely crazy look at that one line of CSS and you have a nice smooth animation going this is a really really cool one if you want to make like Airbnb type cards Carousel type snap cards now you can browse each listing on Airbnb like that well in our case I have it one two three four five and we're gonna look through the goats you understand this a bit better if I go here and stop nothing happens so what I want to do is when they scroll like that it should snap to that and then snap to that and snap to that so what is this how is this code set up and then I'll show you kind of what we have the container here and just a bunch of divs inside okay so container with a bunch of divs and all I did was I set the height and the width to them and add a display Flex with an overflow X of scroll okay so we can scroll and then the main height on the divs take up basically the same height as this all right so if I don't have this overflow x on it you're gonna see that all the content overflows like that but with this one we got the nice scroll bar scroll bar so how do we add this thing so all you need to do is it's two properties but it's really short scroll scroll snap a line I cannot speak anymore scroll squirrel scroll snap line and we'll do X and we'll say mandatory mandatory okay so you can do it y as well if you want to make like uh you know like you scroll up and down and then it snaps to the page you can do that as well so that's one and then to each individual item you have to tell it basically where it wants to snap to so scroll snap a line and we basically want it Center so now when we go like that it's not working what's not working X mandatory not a line here type my apologies scroll snap type so X mandatory and Boop look at that when I stop it snaps to it now here's the cool thing about this is you have a bit more control over it you can also Define something called proximity and this basically lets you see it doesn't snap to it you can kind of move around freely but if it's really close to the edge only then it snaps so that's yeah you can kind of play around with this it's quite cool this gives like a more natural scrolling experience to be honest but yeah really like it really cool little property that you can use scroll snap type okay I absolutely love this one do you know how when you have a text area you can just grab the point here and resize it to whatever size you want well you can do that to any element you want by using resize both so go to your code go here to box all you need to do is add a overflow of Auto and then all you need to do is say resize see both and that's it take a look now I can grab the end of this and absolutely resize it to whatever size I want it's always going to keep Center because I have a display Flex on it well look at that as pretty cool if you want to constrain it to only one axis you can do resize I think it's vertical yeah and then also horizontal as well and look at that boom boom boom boom boom okay that's that that's just a fun one really good luck finding something useful with this one here's a cool little trick to cut your text off so if you have loads here and you don't want all of it to show up you can truncate it um you're going to see articles use this a lot for only kind of a preview shows up so the way you can achieve that in CSS is just grab your paragraph from your box add a display of webkit box to it like that and then you can specify how many lines you want to show using line clamps so if I do one it's only gonna do one it's also going to add the dot dot dot at the end there which is really cool so let's say in this case I want three boom easy peasy and then you add the orientation that's all vertical and then overflow hidden because if you don't do that then you can just see everything and scroll won't work as well so make sure you do over overflow of hidden and that's it really simple but really effective let's see I have one of those fancy MacBook websites and I want to add a linear gradient to our text here well how can we do that well if you go and add a background color to it or if you try a color of gradient it's not gonna work if you have the gradient not gonna work if you add it to the background it works on the background but the way we can solve this issue is add it to the background and then we make the text transparent and will basically mask it to the text all right so what we can do is add this property here of webkit background clip text so that basically if I remove this comment there we go I'll still keep this commented out you're not going to see what this does but essentially you can actually kind of see it see Eclipse that gradient to the text so behind this black text is like gradient now but what we want to do is make this text in the front transparent so that's exactly what we do in this next line text fill color will do transparent and get rid of that black and now the background pops true and we have this nice linear gradient here's a problem I see loads of people having and the solution is so so simple so let's say we have a case where again we have a box and just an image inside and no Heights or widths are specified so by default that image is going to go Loco as you can see it stretches all the way out it doesn't care where the box is and that's it so what you do normally is you add a width of 100 to this and then okay so that scaled properly but it's gonna scale according to the size of the box so if it's not specified it's still gonna take up all the space so we can add a width and specify a width of like 25 Ram to it so boom okay that's fine that works all right it literally fits to the Box's size the problem here is what if I wanna maybe have the box a bit more vertical so I can do something like height 25 let's do 40 REM all right kind of like an instagrammy type post all right I don't want this I want this to kind of fill it all the way up so yeah you do the same thing right you do height 100 so it fills it up but here's the problem I want to get to you have this weird stretching effect so if you ever encounter this weird stretching effect all you need is this object fit property and I think by default it's contain but if you wanna you get rid of the stretching aspect ratio problem all you need to do is say fill now Phil sorry cover there we go that's the one and boom so what it does it actually Zooms in on the image and it stops that Distortion from happening the last I want to cover is something very very useful it's called pointer events and what pointer events does it basically out stops us from selecting an item any item so we can add pointer events none and now I cannot select this item anymore now this in combination with opacity zero is really strong because we can animate this text popping in as you can see I cannot select it if I don't have this pointer events not on it I can still if I know where the text is see how the cursor changes and depending what type of elements you have if you have an image you can actually grab it but yeah so why do we use this rather than just doing something like display none because that actually gets rid of it completely the thing though here is when it comes to animation so if I want to animate this in and display none it's not gonna work so I can do something like I'll just add like a hover to this um well you cannot even do hover on it but um let's just add an animation in here I'll do a quick keyframe so keyframes and then we'll call this fade and then we'll do it from zero percent all right to a hundred percent like that all right so all I want is the opacity to come in from zero to one it's a basic fade Okay cool so let's get rid of this for now and we'll add animation here and we'll say fade duration is gonna be one second timing function will do ease in all right and we can also add a delay to it of one second all right so there we go it fades in cool all right let's see what this play none so if I go here and do a display none why well the element doesn't exist when you add this plane done it actually gets removed from the Dom tree but if we do a pointer events of none and opacity of zero we get the same effect basically but we also get the animation working just fine there we go you can make it so it sticks there at the end but you get the point it does work yay so that's gonna be it for me today hope you enjoyed this episode drop down and subscribe if you did and yeah I'm working on quite a few things these days uh I want to do a full stack um about a burnt stack but like a Firebase which we have like a full project so we'll see if I can get that done by Saturday no promises but I'll try and also I've been messing around a lot with blender and I want to do a challenge so that might be coming soon as well but if you want to let me know maybe you want to see something else write it down in the comments and I'll I'll get on it okay right

Channel: developedbyed

Views: 832,062

Keywords: top 10 css, css trick, css tutorial, css tips, learn css, web development, developedbyed, css one liners, css properties, object fit

Id: Xc6G3oV24yE

Length: 13min 33sec (813 seconds)

Published: Wed Oct 05 2022