CSS로 Aurora Ui 만들기 | Html Css 자습서 By Code With Random

안녕하세요, Code With Random 블로그에 오신 것을 환영합니다! 오늘은 순수 CSS로 오로라 UI를 만드는 방법을 배웁니다. 이 블로그 게시물에서 전체 코드를 제공하며 코드를 쉽게 복사하고 이것이 CSS의 도움으로 Aurora UI가 생성되는 방식을 이해합니다. 간단한 단계부터 시작하겠습니다.

간단한 HTML 구조 만들기

 <h1>Aurora UI</h1>  
 <div class="blurred">  
  <h2>Blurred shapes</h2>  
  <div class="wrapper">  
   <div class="one"></div>  
   <div class="two"></div>  
   <div class="three"></div>  
  </div>  
 </div>  

이 HTML 코드에서 먼저 Aurora ui에 대한 h1을 사용한 다음 클래스가 흐려진 div를 생성합니다. div에서 클래스 래퍼로 div를 생성하거나 래퍼에서 클래스 1, 2, 3으로 3div를 생성합니다.

css/scss를 aur HTML에 적용

 * {  
  box-sizing: border-box;  
 }  
 body {  
  background: #0e0e0e;  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  flex-direction: column;  
  padding: 100px;  
  font-family: Helvetica, Arial;  
  > div {  
   display: flex;  
   flex-direction: column;  
   align-items: center;  
   justify-content: center;  
   margin-bottom: 100px;  
  }  
 }  
 h1 {  
  color: #fff;  
  font-size: 52px;  
 }  
 h2 {  
  color: #fff;  
  font-size: 36px;  
 }  
 .wrapper {  
  width: 400px;  
  height: 400px;  
  background: #fff;  
  position: relative;  
  overflow:hidden;  
  border-radius: 40px;  
 }  
 .wrapper div {  
  position: absolute;  
  filter: blur(60px);  
  opacity: 0.8;  
 }  
 // Basic blured shapes  
 .blurred {  
  .one {  
   border-radius: 100%;  
   width: 600px;  
   height: 600px;  
   background-color: #373372;  
   left:-50px;  
   top:-300px;  
   z-index: 3;  
  }  
  .two {  
   width: 500px;  
   height: 800px;  
   background-color: #7C336C;  
   bottom:-30px;  
   left:-80px;  
  }  
  .three {  
   border-radius: 100%;  
   width: 450px;  
   height: 450px;  
   bottom:-80px;  
   right:-100px;  
   background-color: #B3588A;  
  }  
 }  

또한 div의 이 CSS 본문 태그에서 Scss를 사용합니다. CSS의 도움으로 이 간단한 Aurora 디자인을 만드는 방법을 쉽게 확인할 수 있습니다. 더 많은 디자인이 있으므로 살펴보겠습니다.

방사형 그래디언트 만들기
HTML
전체 기사를 읽으려면 저희 웹 사이트를 방문하십시오! 감사합니다🙏💕
https://www.codewithrandom.com/2021/08/create-aurora-ui-with-css-html-css.html