5 Must Know CSS Features That Almost Nobody Knows

in this video i'm gonna be covering five really cool and unique css tips and tricks and i bet that you don't know all of them so let me know down in the comments below how many of these that you actually knew before watching this video let's get started now welcome back to web dev simplified my name is kyle and my job is to simplify the web for you so you can start building your dream project sooner so if that sounds interesting make sure you subscribe to the channel for more videos just like this also if you want to take your css skills in the next level check out my full css course linked in the description below so to get started i have some really simple html and css we have this card class which wraps a header and a body and they both just have some placeholder text and then our card is just having a set width background color white border that's black as you can see on the right our header is that blue section at the top and then our body just has a little bit of padding so we have essentially a card design here and for this card i actually want to make it so that this header if it's longer than one line it'll just have the little ellipse at the end so the triple dots at the end saying that it's longer than one line and it won't actually wrap like this and luckily in css there's a property called text overflow which allows us to do exactly this by default it's set to clip which means it just clips off all the text that expands past the element you've probably seen this before and ellipsis is where you have those triple dots at the end and if we save this you're going to notice it really actually doesn't do anything right away and that's because this only causes the text to have these lips at the end if it overflows the container on the horizontal axis so it comes out the side of the card if it's too tall it won't actually cause this overflow because this is only for the horizontal axis and the way that we can make it so this text overflows is by just preventing it from wrapping so we could just say that we want to do white space and we want to set that to no wrap that means that the white space is not going to wrap onto a new line and now if we save you can see our header has expanded past our entire screen it's overflowing its container but it still doesn't have those ellipses the final thing we need to do is tell our css to hide the overflow so if we set overflow to hidden and save you can now see there's no text expanding past our screen and we have the ellipses at the end of our text since it's overflowed its container if our text was much shorter though such as just alarm you can see there's no ellipse at the end and that's because it's not actually overflowing anything so the important thing to know about this text overflow property it's very commonly misused because you need to make sure that it's only in this horizontal axis it has to be one line essentially and you need to make sure that your white space is set to no wrap and your overflow is set to hidden essentially making sure all your text is on one line and that the overflow is hidden which is what causes the ellipsis to show up now the second property that i want to talk about is text shadow essentially you know when you've used box shadow on boxes text shadow is the exact same thing but for text so we could add a shadow to our lorem ipsum text which is just this h1 down here we could just say text shadow and this is going to have the exact same syntax as box shadow except for it doesn't have a spread value so we have our x and y offset which we're just going to set to zero here and then we have our blur for how much the shadow spreads out let's just set it to one pixel for example and we're going to set our color to red now if we save and we'd actually just bump this up a little bit to 10 pixels you'll notice we have this nice 10 pixel glow to our elements so we can add a shadow or a glow to all of our text we could even take this a step further for example i could make this offset like negative 20 pixels and now you can see we kind of have our text showing up behind our text that's kind of a cool effect that we can do we can reduce our blur down and it looks like our text is more solid so now we have like our exact text showing up we can even reduce this down to zero and then there's no blur at all so it's just like a copied version of our text essentially just offset by 20 pixels so if we just did like five pixels and five pixels it kind of gives us a cool like drop shadowy technique that we can use for all of our text so text shadow is really useful super under utilized because i really don't see it anywhere and it can give you some really cool css effects that are way harder to do if you try to do without text shadow now the next really cool effect that i want to look at is actually going to use the same text so let's just remove our text shadow and this is essentially if you want to put something behind your text such as an image or video and make it play through the text that gives you kind of a really cool effect with your text so to do that it's actually really straightforward especially with an image i just have this water.jpg it's just a picture of water that we're going to put behind our text so we can just say our h1 is going to have a background image there's just going to be a url to water.jpg and if we save you can now see we have that water showing up behind our text but clearly this is not what we want we want our text to be the only thing where this water picture shows through so we can do is use a really cool property called background oops background clip we can set this to text and you may actually notice when i save this it doesn't actually change the text on the right and that's because in chrome background clip is only accessible if you do it with the webkit prefix in firefox for example this is already working without the prefix but in chrome you need to use the prefix now if we save you're going to notice something interesting our tech our background i'm sorry looks like it just completely disappeared and the reason for that is that our background is only showing up behind our text but our text is black so if we change the text color to be transparent and save you can now see the image is showing through only where our text is if we just change the background of our body for example background to like black or something it's a lot easier to see this water showing through we could even change it to like red and that should be really obvious where our water is showing up obviously this image is not really that good for what we're trying to do but if you have a larger image and a larger section of text you want to show it through this could be a really cool way to make your text just pop a little bit more by having an image show up in the background and like i said if you're in chrome you need to have this prefixed so generally what you would want to do is write something like this that way if it's in a browser like chrome it'll fall back to this webkit version otherwise in something like firefox it'll just use this proper background clip version so that's what you want to do if you want to put an image or video or something behind your text now we can just stick with this same text here for our next set and this is going to be a really simple property that allows you to access literally every single css property on an element if you want to reset an element or change something about an element you can use the all property so if we just select our h1 again down here and we said like all is initial and save you're going to notice all of the styles for our h1 have been changed everything inside of here has been set to initial so it's got all these fallback values being set and it's just some normal text showing up on our screen this is really useful if you want to reset values or undo values or just essentially undo everything that is done to something you can say all initial and then do the rest of your style so for example we could say font size is 3 rem now you can see that our font size is 3rm because we reset everything and then change the font size this is really useful especially if you're importing a library or something that makes changes to some styles and you just want to wipe all the default styles they apply all initial is a great way to do that now for our final unique css property this is probably one that you used all the time but you may not be exactly familiar with how it works and this is the border radius property because depending on how you set values for a border radius you may get an ellipse shape or you may get a pill shape so understanding how to use border radius correctly is great because it means you're always going to get the shape that you want so for example you know that if you create a circle inside of border radius all you need to do is do border radius of 50 this is going to give you a perfect circle and this is great if you have a perfectly circular object but when you have something that's not a circle such as this rectangle here and you save this and i make sure i change my class name to have the correct capitalization you'll see that we get an ellipse shape because it's trying to give our border a 50 radius on all sides which creates a circle because it's rounded all the way around generally this is not a shape that we actually want though instead we'd rather have a pill shape where it just rounds itself on the edges and is straight all the way until it rounds itself on the edge again because this lip shape is really not that good looking so to get a pill shape you normally would say border radius and then you would have to know the height of your button so far height for example was 50 pixels we could come in here and say border radius 25 pixels and that's going to give us our pill shape but knowing that ahead of time kind of sucks so if we don't know our height and we set our border radius we just need to set it to any pixel value that's greater than half the height so generally if i want a pill i'll just set the border radius you know 9999 that way i know this is always going to be larger than half the height of my element and it's going to give me a pill shape perfectly but when you use percentages such as 50 percent it's going to give you this ellipse shape so knowing the difference between the two and when to use which one is really useful and those are my five unique css properties did you know them all let me know in the comments below and also make sure you check out my full css course if you really want to deep dive and take your css skills to the next level that'll be linked in the description below thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 65,049

Keywords: webdevsimplified, unique css properties, best css properties, css tips, css, css properties, css tutorial, unique css animations, cool css effects, awesome css, cool css, best css, css effects, css for beginners, css guide, how to css, how to learn css, learn css, css tutorial for beginners, css top 5, top 5 css, top 10 css, css top 10, css top five, css top ten, css border-radius, css pill shape, css gradient, css background-clip, css image, css background, css idea

Id: X6tTBxEmZCE

Length: 9min 6sec (546 seconds)

Published: Sat Dec 26 2020