hey hi guys welcome to the channel. In this video, I will show you how to create a YouTube logo by using CSS only. So let's get started. Now it's very easy to create YouTube logo. Let me show you step by step. First, we have to create something like this, this kind of rectangle. And of course, we have to give the radius to it. And after that, we need to create this type of shape, this triangle shape. And we will achieve the YouTube logo. To create this triangle, what we basically do, we use borders. We will use the border property in CSS. That's it. And we will be able to create this triangle. Let me show you now step by step. This is the HTML file, totally empty. And in style sheets, only I have this container, which, you know, shows the results in the center of the webpage. Now let's get started. First, I will create the div for div container. Inside this, I will create my YouTube shape. So let's create YouTube icon shape. This will be my shape. This is the HTML structure. Now let's go to the CSS part.

in CSS, I have given display flags and justify content center align item center so logo will be in the centered position automatically. Let's create the logo now. This is the class we have used YouTube-hyphen-shape. First, I will just give the width, the height, and now the background color to my rectangle, and that's it. We achieved half of the logo. This portion is done. And of course, in real YouTube case, there are the curves. For that, we can use the border radius. In case of border radius, let's give the value of 10 percent. And of course, we wanted smooth edges. For that, I can just simply type slash and 20. And now I have smooth edges, smooth borders, basically. And that's it. That's all. Now let's create the this triangle. To create this triangle, there are a lot of ways. I can create a different HTML structure, of course, or I can use before and after. In this case, I will use the after property. Basically, what happens in the after, suppose we have created this kind of shape like

this box. Okay, if I use uh after in CSS, in that case, what happens, there will be a content ah after this box created, and I can make any kind of shape in this area. If I use before, then in that case, um before the box, there will be an element which I can also use to create some different shape. Now choice is here if you want to use after or before. In my case it's after, so I will just type YouTube shape, and then after content will be the uh empty, of course, and after that I will just give the width 0 pixels and height also zero pixel to the triangle y because to create this triangle we have to use the border property. Now let's use the border properties. The border top will be 30 pixels solid, of course, and transparent, and then border bottom also will be transparent. Now let me tell you why I'm creating these things transparent. Suppose we want to create, of course, we are creating the triangle, we are creating this kind of shape by using borders. In that case, what happens

is in reality, it looks like this. It looks like this. Uh, this part is a top border. This is the right one. This is the bottom one. And this is the now left one. So if I suppose, uh, in our case, we wanted this kind of shape here. So in this case, in our case, we need this side, basically border left. We need BL. We need another shape like this top one, this right one, and this bottom one. We don't need it, of course. We need the top and bottom, you know, to support the, uh, left one, but we don't want this part to appear. For that, we can basically create this transparent so it will be not visible to us. And in this case, border left, we can give this a red color. And of course, right, we don't need it. So I will just not give any code here. Let me just show you. Now, if I save here, you can see nothing visible. Yeah, but instead of transparent, if I write down white, still there is nothing. Why? Because there is no support for, support. At least we need

some corner side, and that's why we will use now border left. And we need this part. I will just write down 50 pixel solid, sorry white white. And now this must be visible. So if I refresh here, you can see the part on the edge. It's visible but not totally. Um, let's make it clear inside the YouTube shape. I will just use display flex and justify content center and align center. So the shape will be in the center. So this is how the shape is looking. Um, as I said, I don't want the top part. Instead of the top top part, we just want to hide it. So that's why I was using transparent. Uh, here you can see the result. Right now, this the position is, sorry, this shape is something like this. Yeah, something like this we are getting. So if I relate these two shapes, these two like this, like this, okay. So this part is right now visible. If I basically just hide this part, if I hide this part, then I will just get this. Sorry, I will just get in this kind.

of shape so let me just create this transparent and here we go. I got b part and if I make a bottom and this is of course the YouTube logo is created and now I'm just teaching you something here. You can see this is the top. I will create the blue one and here you can see the difference. This was how everything looking uh and of course I don't have border right. If I even write right code for the border right then this side also will be appeared to you and the color will be which color should I give yellow yellow and here we go. This is how uh basically these things work by using borders. In our case we just need transparent so we can get the YouTube logo. This is how you create YouTube logo. If you like the video please like share and subscribe and code will be in description. Thank you so much. [Music]

Create YouTube Logo Using CSS | CSS Shapes

Welcome to our free educational channel, open to everyone around the globe! If you have any special video requests, don't hesitate to drop us a message on our social media channels (links in the About section).

At our core, we love the art of videomaking. Most of our content is presented in different languages, and you'll always find the language specified at the beginning of each video. We believe in transparency and want to make sure everyone can access valuable educational content.

We are committed to delivering high-quality videos, but we're only human. Mistakes may happen, and if you notice any, please let us know. Your feedback is invaluable in helping us improve and refine our content.

If you appreciate our videos, consider subscribing to our channel. Your support encourages us to keep creating and sharing knowledge. Thank you for being a part of our community! 🚀

