CSS Tips And Tricks I Wish I Knew Before

Video Statistics and Information

Video
Captions Word Cloud
Reddit Comments
Captions
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.
Info
Channel: Lama Dev
Views: 412,170
Rating: undefined out of 5
Keywords: css, css tips, css tricks, html css, web design, lama dev, design, css 3, pseudo class, placeholder, css properties, css classes, web development, coding, programming
Id: 2KWdT4PkXgY
Channel Id: undefined
Length: 12min 11sec (731 seconds)
Published: Wed Aug 16 2023
Related Videos
Note
Please note that this website is currently a work in progress! Lots of interesting data and statistics to come.