Up next in 10
5 Must Know CSS Features That Almost Nobody Knows
4K views
Feb 7, 2024
"5 Must Know CSS Features That Almost Nobody Knows" is an educational video uncovering five lesser-known CSS functionalities that can significantly enhance web development projects. Viewers are introduced to these advanced CSS features, which offer innovative solutions to common challenges in front-end development. These features may include lesser-utilized properties, techniques for achieving specific effects efficiently, or tricks for optimizing CSS code. The tutorial demonstrates each feature with clear explanations and practical examples, enabling viewers to understand their implementation and potential applications effectively. Whether you're a beginner or an experienced developer, this video offers valuable insights into maximizing the capabilities of CSS and exploring lesser-known techniques to improve web design endeavors.
View Video Transcript
0:00
In this video, I'm going to be covering five really cool and unique CSS tips and tricks
0:05
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
0:11
watching this video. Let's get started now. Welcome back to WebDev Simplified
0:19
My name is Kyle, and my job is to simplify the web for you so you can start building
0:23
your dream project sooner. So if that sounds interesting, make sure you subscribe to the channel for more videos just like this
0:29
Also, if you want to take your CSS skills to the next level, check out my full CSS course
0:33
linked in the description below. So to get started, I have some really simple HTML and CSS
0:39
We have this card class, which wraps a header and a body, and they both just have some placeholder text
0:44
And then our card is just having a set width, background color white, border that's black, as you can
0:48
see on the right. Our header is that blue section at the top, and then our body just has a little bit of padding
0:53
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
0:59
than one line, it'll just have the little ellipse at the end, so the triple dots at the end
1:03
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
1:13
By default, it's set to clip, which means it just clips off all the text that expands past
1:17
the element. You've probably seen this before. And ellipsis is where you have those triple dots at the end
1:22
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 ellips at the end if it overflows the
1:32
container on the horizontal axis so it comes out the side of the card. If it's too tall, it won't
1:37
actually cause this overflow because this is only for the horizontal axis. And the way that we can
1:41
make it so that this text overflows is by just preventing it from wrapping. So we could just say
1:46
that we want to do white space and we want to set that to no wrap. That means that the white space
1:51
is not going to wrap onto a new line. And now if we save, you can see our header has expanded
1:55
past our entire screen. It's overflowing its container. But it still doesn't have those ellipsies
2:01
The final thing we need to do is tell our CSS to hide the overflow. So if we set overflow to
2:06
hidden and save you can now see there no text expanding past our screen and we have the ellipses at the end of our text since it overflowed its container If our text was much shorter though such as just a warm you can see there no ellipse at the end and that because it not actually overflowing anything
2:23
So the important thing to know about this text overflow property, it's very commonly misused
2:27
because you need to make sure that it's only in this horizontal axis, it has to be one line
2:31
essentially, and you need to make sure that your white space is set to no wrap and your overflow
2:35
is set to hidden, essentially making sure all your text is on one line and that the overflow is hidden
2:40
which is what causes the ellipsis to show up. Now the second property that I want to talk about is text shadow
2:46
Essentially, you know when you've used box shadow on boxes, text shadow is the exact same thing but for text
2:52
So we could add a shadow to our Lauren Ipsom text, which is just this H1 down here
2:56
We could just say text shadow, and this is going to have the exact same syntax as box shadow
3:01
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
3:06
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
3:13
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
3:22
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
3:29
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
3:34
So now we have like our exact text showing up. We could even reduce this down to zero
3:38
and then there's no blur at all, so it's just like a copied version of our text essentially
3:42
just offset by 20 pixels. So if we just did like 5 pixels and 5 pixels, it kind of gives us a cool like drop shadowy
3:49
technique that we can use for all of our text. So text shadow is really useful, super underutilized because I really don't see it anywhere
3:56
and it can give you some really cool CSS effects that are way harder to do if you try to do
4:00
without text shadow. Now the next really cool effect that I want to look at is actually going to use the same text
4:05
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 a video
4:11
and make it play through the text. It gives you kind of a really cool effect with your text
4:16
So to do that, it's actually really straightforward, especially with an image. I just have this water
4:20
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
4:27
It just going to be the URL to water 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
4:40
So what we can do is use a really cool property called background. Whoops, background clip
4:46
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
4:51
And that's because in Chrome, background clip is only accessible if you do it with the WebKit
4:57
prefix. In Firefox, for example, this is already working without the prefix, but in Chrome
5:02
you need to use the prefix. Now if we save, you're going to notice something interesting. Our background, I'm sorry, looks like it just completely disappeared. And the reason for that is that
5:10
is that our background is only showing up behind our text, but our text is black. So if we change
5:15
the text color to be transparent and save, you can now see the image is showing through only
5:21
where our text is. And if we just change the background of our body, for example
5:26
background to like black or something, it's a lot easier to see this water showing through
5:32
We could even change it to like red, and that should be really obvious where our water is showing up
5:35
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
5:42
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
5:48
And like I said, if you're in Chrome, you need to have this prefix. So generally, what you would want to do is write something like this
5:56
That way, if it's in a browser like Chrome, it'll fall back to this web kit version
6:00
otherwise in something like Firefox, it'll just use this proper background clip version
6:04
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
6:12
and this is going to be a really simple property that allows you to access literally every single CSS property on an element
6:18
If you want to reset an element or change something about an element, you can use the all property
6:23
So we just select our H1 again down here, and we set it. like all is initial and save, you're going to notice all of the styles for our H1 have been
6:31
changed. Everything inside of here has been set to initial. So it's got all these fallback values being
6:37
set, and it's just some normal text showing up on our screen. This is really useful if you want to
6:41
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 3RAM Now you can see that our font size is 3RAM because we reset everything and then change the font size This is really useful
6:58
especially if you're importing a library or something that makes changes to some styles and you just want to wipe all of the default styles they apply. All initial is a great way to do
7:05
that. Now for our final unique CSS property, this is probably one that you used all the time
7:10
but you may not be exactly familiar with how it works. And this is the border
7:14
radius property because depending on how you set values for a border radius you may get an ellipse
7:19
shape or you may get a pill shape so understanding how to use border radius correctly is great
7:24
because it means you're always going to get the shape that you want so for example you know that if you
7:29
create a circle inside of border radius all you need to do is do border radius of 50 percent
7:35
this is going to give you a perfect circle and this is great if you have a perfectly circular object
7:39
but when you have something that's not a circle such as this rectangle here and you save this
7:44
and I make sure I'd 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
7:51
a 50% radius on all sides, which creates a circle because it's rounded all the way around
7:57
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
8:03
and is straight all the way until it rounds itself on the edge again, because this ellip shape is really not that good looking
8:09
So to get a pill shape, you normally would say border, radius, and then you would have to know the height of your button
8:14
So far, height, for example, was 50 pixels. We could come in here and say border radius 25 pixels
8:20
and that's going to give us our pill shape. But knowing that ahead of time kind of sucks
8:25
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
8:31
So generally, if I want a pill, I'll just set the border radius to 9,999
8:36
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
8:41
But when you use percentages such as 50%, it's going to give you this ellipse shape
8:46
Knowing the difference between the two and when to use which one is really useful. And those are my five unique CSS properties
8:53
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
9:01
That'll be linked in the description below. Thank you very much for watching and have a good day
#Skins
# Themes & Wallpapers