Hello friends. Today I’ll share some useful
CSS tips that every front-end developer should know. The first one is clip-path. It allows you to create custom shapes by clipping
the visible area of an HTML element. What I mean by that. Let’s create a container here and give it
a style. I’ll give some width and height. And using a clip path, I can give it a shape. It can be a circle. I can give any radius here. By default, it’s 50%, which means half of
the given size. In this case, the radius will be 250 pixels. If I say 100%, it’s gonna fill inside this
given size. Because the radius is 500 pixels right now. And as you realize, it’s not overflowing,
and it’s awesome because you can give any animation easily. Let’s do that.
Firstly I’ll give a position on the x and y axes. In this case, the center of the circle
will be at the starting point. You can give any position here. Let’s take this back and give a hover effect. When I hover over, I’m gonna increase its
radius, and it’ll fill this size. Like that. If I give a transition, it’s gonna look
better. Perfect.
And also, you can give any specific shape using the Polygon value. To do that, I’ll google “CSS clip-path
generator.” You can choose any website you want. And here, there are many presets that you
can directly copy and paste. And also you can create your own shape.
Let’s copy this. And paste. And each point represents the position on the x and y-axis. You can think of it as a virtual pair of scissors
that allows you to cut and reshape your items. Let’s change this position using hover effect. It’s that easy. And the best thing is you can give here any
path, just like an SVG. Just draw your shape in Figma, save it as
an SVG, take its path, and paste it here. And right now, it’s really easy to animate
your shapes and logos using only CSS. And the second CSS property is Perspective. If you want to give 3D effects to your HTML
elements, you should use perspective. Let me explain to you with an example. Let’s remove this. By the way, you can find every example of
this video in the GitHub repository. It’ll be in the description. And let’s create here a frame div. And inside
this frame, I’ll create a shape. Let’s give a size for the frame and a border. And inside this frame, we have a shape and
that has exactly the same size. Right now, I’m gonna rotate my item using
transform. As you can see, it rotates the shape on the
Z-axis by default. There is no problem. What if I want to rotate it on the X or Y
axis? As you realize, something has changed, but
we can’t exactly see the 3D effect because we don’t have any perspective. We just see our items as 2D objects. So what perspective does is it allows us to
see our items as if we're looking at them from an angle in a 3D space. If I use perspective for the parent div and
give any distance between this div and my eyes, I can see the effect. And right now, imagine that you are in your
screen and see the items three dimensional. If I get closer to the div, as you can see,
the shape is out of my sight because its size is 500 pixels. But between me and this container is 100 pixels. Let me give here a transition, and you’ll
understand better. I’ll save it, and right now, it rotates
on the X-axis. But if I’m far enough, I can see my shape
completely. Let’s do the same thing for the Y-axis.
If I get closer, it’s gonna be behind my sight.
If you are not familiar with geometry and 3D shapes, it can be a little bit confusing. But to design creative websites, you should
definitely learn transforms and perspective. And if you want me to create a tutorial on
this topic, just let me know in the comments. And the other CSS property is the aspect ratio.
It’s the proportional relationship between the width and height. Let’s say we have a custom video player,
and we want to set its width to 100%. And height is 500 px. It looks okay, but if I shrink the page while
the width is getting smaller, the height is still the same.
So if you need a certain size rule, if you know the proportional relationship between
sizes, you can use aspect-ratio. If I say 16 to 9, I don’t have to give a
height; it’s gonna make all the calculations automatically. And you can use it pretty much everywhere.
For images, videos, containers. I think it’s really important to know. And the other CSS tip is filters. They are really useful when you want to give
some quick effects to your items. Let me give you some examples. I’ll create an image. And for this image, I’ll give a filter.
As you can see, there are many options, but the most important is this blur and grayscale. Let’s give it a blur. You can increase the radius of this effect,
like 10 pixels, 20 pixels. And it’s really useful when you have any
sensitive content. You can write here any hover or active effect,
and you can remove the filter. And it’s not special for images. You can
use it anywhere you want. Let’s say we have a review website. I’ll create here a spoiler text and write
some annoying spoilers. And I can give exactly the same effect here.
What else we have? Let’s get our image back. And I can change it’s brightness, contrast.
I can give a black-and-white effect. I really love this effect, by the way. When you use it for the entire website, it
looks pretty cool. And other filters. You can just play around and design something
creative. The other CSS tip is about inputs. Let’s create input and open up the css page. Let’s give a padding, and we can see better. And I can zoom in here. As you know, when you click on an input, it
shows this outline by default. To get rid of this, you can use focus pseudo-class
and say outline: none. Or, you can change its color as you do for
the border. Actually, let’s give a border here, and
you can see the difference. When I click, this outline shows up. What about this placeholder? To change its color, I’m gonna use Placeholder
pseudo-element. Okay. Most of you probably already knew those
tricks, but do you know how to change the color of this text cursor?
Actually, it’s really easy. I’ll come here and say caret-color, and
any color you want here. Another CSS tip I want to mention is using
is, where, not, and has pseudo-classes They are not commonly used, but I think they
save a lot of time when you get used to them. Let’s create an item here, and inside, I’ll
add some heading and a p tag. And let’s say I want to change the color
of the h1, h2, h4, and this p tag. I’ll not change this one. Normally, I’d follow this solution. The parent div and child. Let’s say color blue. But using this structure can be confusing,
especially when you have deep nested items. So I’m gonna comment this out and write
here the parent, is, and whatever I want to change. Color will be red.
As you can see, the given items are red. And also, I can use “where” instead of
“is”. And it’s exactly the same. But there is a small difference. If I open the previous block, as you can see,
the color is blue, but if I use “is”, it’s gonna change because it has a higher
priority. Since all our items are red, I can use the
“not” pseudo-class. And it means to take everything inside this
parent except h2. What about “has”? Let’s open up the HTML file. I’ll create here a div with another div,
and it will include a title and description. Let’s create one more. And I’m gonna add here a spoiler button. So what I want to do is, check these divs
and if any of them has a button, I want to filter the content using the blur effect. To do that, I’ll say review; if it has a
button, make the content, filter blur. So you don’t need to use any single line
of JavaScript. Just use this pseudo-class. And the last tip is styling captions of videos. It can be really useful if you have a video
or movie application. Firstly, let me show you how to add a caption
for a video in HTML. I added a video and a subtitle inside my directory.
And let’s use them here. I’ll say video and add my file as a source,
and I’ll say controls. So we can stop the video or change the volume. And inside, I’ll say track, and its type
will be “captions.” You can write the label of the captions. And finally, I’ll give my source. Let’s change the size of the video. Remember
how we do this. And right now, I can choose any captions here. And it works.
So what I want to do is, I want to change the background color and increase the font
size. To do that, I’ll use the “cue” pseudo-element
and change them. It’s that easy. Okay, guys. That’s all. I hope you liked it. If you want to see the second part of these
tips, please like the video and let me know in the comments. You can support Lama Dev by joining the channel
or using the link in the description below. Don’t forget to follow Lama Dev’s social
media accounts. I hope I’ll see you in the next video. Goodbye.
