CSS 젖빛 유리 신용 카드

오늘은 우연히 만난 슈퍼쿨dribbble shot from Dede Dwiyansyah을 재현해보고 싶었습니다.



사실 이것은 불투명한 신용 카드 효과를 만드는 방법에 대한 Figma 튜토리얼입니다. 이 놀라운 장면을 HTML로 다시 만들기로 결정했습니다! (자신만의 반전으로)

그래서 그것에 대한 내 자신의 의견을 제시할 시간입니다CSS.

나는 이 효과를 할 수 있다는 것을 알고 있었지만 일반적으로 사람들은 배경 이미지 필터 블러를 활용하는데, 이 경우 뒤에 있는 공에는 작동하지 않습니다.

그래서 나는 약간의 조사를 하기로 결정했고 이것이 나의 최종 결과입니다.



CSS에서 만드는 방법을 안내해 드리겠습니다.

HTML 구조

이 프로젝트의 HTML 구조를 정의하는 것으로 시작하겠습니다.

<div class="holder">
  <div class="card">
    <div class="card__text">
      8293 3412 5976 1254
      <br />
      <small>12/24</small>
    </div>
    <svg>Insert Visa logo here</svg>
  </div>
</div>

보시다시피 홀더 div를 사용하고 있으므로 두 개의 궤도 공에 이 div가 필요합니다.

그런 다음 텍스트에 대한 또 다른 컨테이너가 포함된 카드가 있고 마지막에는 비자 로고용 SVG가 있습니다.

Note: The full SVG visa logo can be found on the Codepen.

이제 재미있는 비트CSS를 시작할 시간입니다.

CSS 프로스트 흐릿한 유리 효과

이 멋진 CSS 젖빛 유리 효과를 다시 만드는 데 필요한 모든 작은 부분을 안내해 드리겠습니다.

먼저 신용카드 글꼴과 유사한 글꼴을 사용해야 합니다.
나는 Inconsolata font on Google fonts이 꽤 잘 작동한다는 것을 알았다.

@import url('https://fonts.googleapis.com/css2?family=Inconsolata&display=swap');

이 라인으로 우리는 import the font directly from Google fonts .

다음으로 기본 여백과 패딩을 제거하기 위해 작은 재설정을 추가합니다.

* {
  margin: 0;
  padding: 0;
}

이제 바디에 스타일을 지정해 보겠습니다.
드리블 샷에서 사람이 그라데이션 배경을 사용하는 것을 보고 배경 이미지를 주기로 결정했습니다.

body {
  background: url('https://images.pexels.com/photos/1655166/pexels-photo-1655166.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260')
    no-repeat center center;
  background-size: cover;
  display: grid;
  font-family: 'Inconsolata', monospace;
  min-height: 100vh;
  place-items: center;
}

또한 CSS grid center method을 사용하여 카드를 페이지 중앙에 배치합니다.
이 지점에서 글꼴도 로드합니다.

언급했듯이 우리는 두 개의 궤도 공을 배치하기 위해 홀더를 사용하고 있습니다.
우리는 이러한 공을 생성하기 위해 의사 요소를 사용할 것이므로 홀더는 상대 요소가 되어야 합니다.

.holder {
  position: relative;
}

이제 공을 만들어 보겠습니다. 주황색은 before pseudo element을 사용하여 만들고 파란색은 after pseudo element을 사용하여 만듭니다.

크기와 원형도 면에서 몇 가지 유사점을 공유하므로 이중 선택기로 작성해 보겠습니다.

.holder:before,
.holder:after {
  animation: orbit 5s linear infinite;
  border-radius: 50%;
  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.2);
  content: '';
  height: 150px;
  position: absolute;
  width: 150px;
}

이것은 50% border-radius 때문에 둥근 공을 만듭니다.orbit 라는 애니메이션도 추가합니다. 잠시 후 애니메이션을 만들어 보겠습니다.

이제 주황색 공의 경우 방사형 그래디언트를 만들어야 합니다.

.holder:before {
  background: #ffe897;
  background: -moz-radial-gradient(top right, #ffe897, #f98a05);
  background: radial-gradient(to bottom left, #ffe897, #f98a05);
  background: -webkit-radial-gradient(top right, #ffe897, #f98a05);
}

그라디언트를 생성하기 위해 css-gradient.com을 사용했습니다.

그런 다음 파란색의 경우 방사형 그래디언트도 배치하고 오른쪽으로 오프셋합니다.
이것은 또한 애니메이션 지연이 필요합니다. 그렇지 않으면 똑같은 일을 할 것입니다.

.holder:after {
  animation-delay: 2.5s;
  background: #e0e793;
  background: -moz-radial-gradient(bottom right, #e0e793, #6dd0f1);
  background: radial-gradient(to top left, #e0e793, #6dd0f1);
  background: -webkit-radial-gradient(bottom right, #e0e793, #6dd0f1);
  right: 0;
  top: 0;
  z-index: -1;
}

그런 다음 카드를 추가할 차례입니다.

카드 자체는 고정된 크기와 조금 더 튀어나오게 만드는 작은 상자 그림자를 가지고 있습니다.

.card {
  border: 1px solid #fff;
  border-radius: 15px;
  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.2);
  font-size: 2rem;
  height: 220px;
  overflow: hidden;
  position: relative;
  width: 370px;
}

그런 다음 마법 부분에 대해 흐림 효과를 사용합니다 :before pseudo element.

.card:before {
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px) saturate(100%) contrast(45%) brightness(130%);
  content: '';
  height: 100%;
  position: absolute;
  width: 100%;
}

전체 마법 흐림 효과는 backdrop-filter에서 비롯되어 흐릿하게 보입니다.
또한 rgba 스펙트럼을 사용하여 불투명도가 30%인 배경색을 사용합니다.

내부 텍스트의 경우 약간만 오프셋하고 모든 것 위에 있는지 확인하면 됩니다.

.card__text {
  color: #6f7886;
  margin-left: 30px;
  margin-top: 100px;
  position: relative;
  z-index: 2;
}

Visa SVG 로고가 있다는 것을 기억하십시오. 우리는 그것을 오른쪽 하단 모서리에 넣었습니다.

.card svg {
  bottom: 30px;
  position: absolute;
  right: 30px;
}

orbit 애니메이션에 대해 이야기하기 전에 이 애니메이션은 두 개의 공이 카드 주위를 원형 동작으로 회전하도록 합니다.

@keyframes orbit {
  from {
    transform: rotate(0deg) translateX(100px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(100px) rotate(-360deg);
  }
}

이 특정 애니메이션은 요소를 0도에서 360도(전체 원)로 회전하도록 변환하는 2단계 애니메이션을 사용합니다.
또한 translateX 축을 오프셋하여 이동합니다.

이것의 전체 결과는 이 Codepen에서 볼 수 있습니다.

브라우저 지원

이 방법은 꽤 괜찮은 지원을 제공하는 backdrop-filter에 크게 의존합니다.

모든 최신 브라우저에서 안전하게 사용할 수 있으며 모든 접두사를 활용하여 더 많은 지원을 받을 수 있습니다.

읽어주셔서 감사합니다. 연결해 보겠습니다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook 또는