Categories: Uncategorized

Create Youtube Logo Using CSS | CSS Shapes

Create Youtube logo using css and html, this article contains code and video tutorial.

CSS Code


body{
 margin:0;
}




/.container{
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100vh;
}

.youtube-shape{
 width: 280px;
 height: 180px;
 background-color: red;
 border-radius: 10%/ 20%;
 display: flex;
 justify-content: center;
 align-items: center;
}


.youtube-shape::after{
 content: '';
 width: 0px;
 height: 0px;
 border-top: 30px solid transparent;
 border-bottom: 30px solid transparent;
 border-left: 50px solid white;
} 

HTML Code

reecry

Recent Posts

Insta360 – Videos keep exporting backwards | Wrong side render in insta360

https://youtu.be/0RRUOIvmuWA I realized that I had my camera set up incorrectly, so when I upload…

9 months ago

Make Animated progress step bar using Figma

https://youtu.be/C3oFfV20K_c Make Animated progress step bar using Figma

11 months ago

How to Hide All Grids in Figma

https://youtu.be/o3pSH_oRzko How to Hide All Grids in Figma

11 months ago

How to Create Responsive Tool tip in figma

https://youtu.be/hdSUylKSsho How to Create Responsive Tool tip in Figma

11 months ago

Pixel Grid not visible in figma | How to Turn on figma Pixel Grid

https://youtu.be/AEiH7dSDhKo Having issue in figma pixel grid? learn how to show/ hide figma pixel grid…

11 months ago

Fix External Monitor Lag on Mac OS Ventura

https://youtu.be/iilYzHg9LwQ There are some issues going on in ventura OS its still in development phase…

2 years ago