Aurora UI - CSS로 생성하는 방법

디자인 트렌드는 적어도 하루에 한 번은 새로운 자바스크립트 프레임워크처럼 변화하고 있습니다. 😄 오늘 저는 제 친구 Michal Malewicz가 명명한 또 다른 트렌드를 소개하려고 합니다. Aurora UI라고 하며 여기에서 Michal이 작성한 article을 찾을 수 있습니다.

오로라 트렌드는?

이러한 추세는 그리 새로운 것이 아닙니다. 예를 들어 Stripe는 헤더에서 오랫동안 사용해 왔습니다. Dribbble 또는 Behance와 같은 서비스에서 점점 인기를 얻고 있습니다.



그 특징은 다음과 같습니다.

흐릿한 모양

유사색상

색상 간의 부드러운 전환

CSS로 어떻게 만드나요?

이 효과를 만드는 방법에는 적어도 세 가지가 있습니다.

흐릿한 모양

흐린 그라데이션

흐린 이미지

흐린 모양

첫 번째 방법은 서로 겹치는 세 개의 타원을 만드는 것입니다. 큰 것을 만들고 배치하십시오.

컨테이너 상단의 첫 번째 것

하단 모서리에 2개

그런 다음 filter: blur()를 추가하고 불투명도를 약간 낮춰야 합니다.



HTML

 <div class="wrapper">
  <div class="base one"></div>
  <div class="base two"></div>
  <div class="base three"></div>
</div>

CSS

.wrapper {
  width: 400px;
  height: 400px;
  background: #fff;
  position: relative;
  overflow:hidden;
  border-radius: 40px;
}

.base {
  position: absolute;
  filter: blur(60px);
  opacity: 0.8;
}

.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;
}

방사형 그래디언트

두 번째 방법은 그라디언트 색상을 사용하는 것입니다! 단색 대신 방사형 그래디언트를 사용하여 효과를 만들 수 있습니다.

단색에서 투명으로 세 가지 방사형 그라데이션을 추가해 보겠습니다.

왼쪽 위

오른쪽 위

왼쪽 하단

HTML

  <div class="wrapper"></div>

CSS

.wrapper {
  width: 400px;
  height: 400px;
  position: relative;
  overflow:hidden;
  border-radius: 40px;
  background-color: #fff;
  background-image: 
    radial-gradient(at top left, #F0ACE0, transparent),
    radial-gradient(at top right, #FFA4B2, transparent),
    radial-gradient(at bottom left, #A7D3F2, transparent);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

이미지를 흐리게

이 효과를 만드는 가장 쉬운 방법은... 좋은 이미지를 선택하고 일부filter: blur()를 추가하는 것입니다. 😄



HTML

<div class="wrapper">
  <img src="ourImg.png"/>
</div>

CSS

.wrapper {
  height: 400px;
  position: relative;
  overflow:hidden;
  border-radius: 40px;
}
img {
  filter: blur(60px);
}

애니메이션 배경

배경에 애니메이션을 적용하여 더 보기 좋게 만들 수도 있습니다! 다음은 회전 배경의 작은 예입니다. 🚀
transform:rotate(1turn) translate(100px) rotate(-1turn);를 사용하여 원 경로에 움직임을 만들었습니다.



HTML

  <div class="wrapper">
    <div class="base one"></div>
    <div class="base two"></div>
    <div class="base three"></div>
  </div>

CSS

@keyframes fly {
  100% {
    transform:rotate(1turn) translate(100px) rotate(-1turn);
  }
}

@keyframes flyPlus {
  100% {
    transform:rotate(-1turn) translate(100px) rotate(1turn);
  }
}

.wrapper {
  width: 400px;
  height: 400px;
  background: #fff;
  position: relative;
  overflow:hidden;
  border-radius: 40px;
}

.base {
  position: absolute;
  filter: blur(60px);
  opacity: 0.8;
}

.one {
  border-radius: 100%;
  width: 600px;
  height: 600px;
  background-color: #373372;
  left:-50px;
  top:-300px;
  z-index: 3;
  animation: fly 12s linear infinite;
  transform:rotate(0) translate(80px) rotate(0);
}

.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;
  animation: flyPlus 8s linear infinite;
  transform:rotate(0) translate(100px) rotate(0);
}

여기에서 모든 배경으로 플레이할 수 있습니다. 💪



그리고 그게 다야! Aurora를 glassmorphism과 결합하여 더 나은 UI를 만들 수 있습니다.

읽어 주셔서 감사합니다!

Twitter에서 저를 팔로우하거나 제 뉴스레터에 가입하세요!

🐦
💌 Newsletter
🦄 Frontend Unicorn ebook