HTML CSS(소스 코드)를 사용하여 Instagram 로고 만들기

안녕하세요, Code With Random 블로그에 오신 것을 환영합니다. 오늘은 HTML 및 CSS로 Instagram 로고를 만드는 방법에 대해 알아보겠습니다. HTML에서는 div 태그만 사용했고 나머지는 CSS에서 했습니다. 순수 CSS를 사용하여 이 로고를 만들 것입니다.

CSS에서 우리는 원에 대한 가상 요소의 앞과 뒤에::를 사용했습니다. 당신이 그것을 즐길 수 있기를 바랍니다!

1. 두 개의 div 만들기

<div class="insta">  
     <div class="innerbox">  
     </div>  
   </div>  

HTML 부분은 이것뿐입니다! "insta"클래스가 있는 첫 번째 div 태그는 인스타그램의 상자에 사용되고 "innerbox"클래스가 있는 하위 div 태그는 테두리와 원에 사용됩니다.

*2. 이제 CSS로 이동 | 재설정 및 센터링 *

/* Css reset */  
 * {  
   margin: 0;  
   padding: 0;  
   box-sizing: border-box;  
 }  
 /* centering the insta logo */  
 body {  
   display: flex;  
   justify-content: center;  
   align-items: center;  
   width: 100vw;  
   height: 100vh;  
   overflow: hidden;  
 }  

먼저 CSS 재설정을 수행하고 콘텐츠를 수직 및 수평으로 중앙에 배치합니다.

*삼. 로고 상자 사용자 정의 *

/* main box of insta */  
 .insta {  
   width: 150px;  
   height: 150px;  
   background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);  
   border-radius: 35px;  
   display: grid;  
   place-items: center;  
 }  

이제 Instagram 로고, 높이, 너비, 배경 및 테두리 반경을 제공합니다.

산출-



*4. 로고 제공, 내부 테두리 *

/* innerbox in insta box */  
 .innerbox {  
   width: 120px;  
   height: 120px;  
   border: 10px solid #fff;  
   border-radius: 32px;  
   display: grid;  
   place-items: center;  
   position: relative;  
 }  

내부 테두리에 로고를 부여했습니다!

산출



5. 로고의 원: 이전 및: 이후

/* center circle of insta */  
 .innerbox::before {  
   content: '';  
   width: 45px;  
   height: 45px;  
   border: 10px solid #fff;  
   border-radius: 50%;  
   background: transparent;  
   position: absolute;  
 }  
 /* top right circle of insta */  
 .innerbox::after {  
   content: '';  
   width: 10px;  
   height: 10px;  
   border: 2px solid #fff;  
   border-radius: 50%;  
   background: #fff;  
   position: absolute;  
   top: 8px;  
   right: 10px;  
 }  

마지막으로 전과 후의 도움으로 크고 작은 원을 만들어야 합니다! 그리고 축하합니다! 귀하의 로고가 준비되었습니다.

최종 출력



결론
이 기사에서는 HTML 및 CSS를 사용하여 Instagram 로고를 만드는 방법을 배웠습니다.
관심을 가져 주셔서 감사합니다. 이 기사를 좋아하는 여러분이 무언가를 배우기를 바랍니다. 피드백을 보내주시고 Instagram을 팔로우하여 더 많은 내용을 확인하십시오.

작성자: Frontend Everything(Piyush)

일부 관련 주제 -

multi-step-form-multi-step-form-html-css-javascript-multi-step-form

create-header-html-create-header-html-css

make-calendar-using-html-css-javascript-

music-player-project-in-html-and-css