순수 CSS로 글래스모피즘 효과를 만드는 방법

Glassmorphism은 많은 개발자들이 또 다른 디자인 트렌드인 neomorphism의 논란이 된 스타일에 대해 불평한 후 2021년에 시작된 새로운 디자인 트렌드입니다. 오늘날 많은 웹 사이트와 UI는 Apple 및 Microsoft와 같은 주요 기술 대기업을 포함하여 유리 형태 효과를 구현합니다.

이름에서 알 수 있듯이 glassmorphism은 반투명 유리와 유사한 HTML 의미론적 컨테이너를 만드는 것입니다. 개발자가 컨테이너의 다른 스타일 속성을 결정할 수 있지만 유리모형 자체는 개발자가 선택한 다른 CSS 속성으로 모핑된 유리와 같은 효과입니다.

일부 웹 응용 프로그램은 glassmorphism 효과를 생성하고 코드 편집기에서 코드를 복사하여 붙여넣기만 하면 되지만 개발자가 외부 지원 없이 CSS로 만드는 방법을 아는 것은 큰 도전입니다. 이 기사에서는 순수 CSS를 사용하여 glassmorphism 카드를 만드는 방법을 배웁니다.

backdrop-filter 속성 추가

값이 backdrop-filter인 CSSblur 속성은 유리모형의 유리 효과를 요소에 추가합니다.

    .glass {
      backdrop-filter: blur(10px);
    }

backdrop-filter 속성이 최근에 도입되었기 때문에 모든 브라우저가 완전히 호환되는 것은 아니므로 작동하려면 공급업체 접두사-webkit-가 필요합니다.

배경색 속성 추가

background-filter 속성과 blur 값이 유리 효과를 생성하는 동안 유리 컨테이너의 background-color 속성은 유리 효과의 명확한 가시성을 정의합니다. CSSrgba 속성은 유리 용기의 배경색을 지정하는 데 선호되는 솔루션입니다. rgb의 값은 각각 255이고 알파 채널 "a"는 유리 용기에 약간의 투명도를 부여하는 값입니다. .

.glass {
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      background-color: rgb(255, 255, 255, 0.3);
    }

원하는 측정기준 추가

.glass 컨테이너 크기와 같이 이러한 스타일에 추가된 다른 속성은 개발자의 취향에 맞게 정의되고 설계됩니다.

.glass {
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      min-height: 250px;
      width: 450px;
      border-radius: 1rem;
      background: rgb(255, 255, 255, 0.3);
      padding: 1.5rem;
      color: #fff;
    }

주목해야 할 한 가지 중요한 속성은 .glass 컨테이너의 부모 배경입니다. 이미지 또는 색상 그라데이션일 수 있는 배경은 유리 형태의 아름다움을 드러내는 데 큰 도움이 됩니다. 제 생각에는 그라데이션 배경이 더 예쁘고 좋습니다. 당신은 당신을 선택할 수 있습니다.

결과는 다음과 같습니다!



이 기사에서는 glassmorphism이 무엇이며 순수한 CSS를 사용하여 만드는 방법을 배웠습니다.

여기에서 결과의 codepen에 액세스하고 원하는 대로 스타일을 업데이트할 수 있습니다.