Glassmorphism 이란 무엇입니까? 배경 필터는 CSS 에서 반투명 유리를 어떻게 구축합니까

서리로 덥은 유리제 패널은 공용영역 디자인에 있는 어디에나 있습니다: 탁상용 운영 체계에 반투명 사이드바,사진을 통해 보여주는 흐리게 한 우두머리,착륙 페이지에 기온변화도 위에 뜨는 카드. 보기는 묘사하기 간단하고 CSS 에서 틀리게 하기 이상하게 쉽습니다. 패널은 편평하고 회색으로 끝나거나,흐림은 아무것도 하지 않거나,그것에 백색 원본은 배경의 반에 읽을 수 없습니다.

이 가이드에서는 효과를 작동시키는 CSS,5 가지 속성 각각이 존재하는 이유,배경이 계속 변경될 때 텍스트를 읽을 수 있도록 유지하는 방법,렌더링 성능에 드는 비용,우아하게 뒤로 물러나는 방법에 대해 설명합니다. 작업된 예제에서는 의 출력을 사용합니다 Toolz 유리형성 CSS 생성기슬라이더와 라이브 미리보기에서 코드를 빌드합니다.

TL;DR: Glassmorphism은 패널이 반투명 유리처럼 보이는 UI 스타일입니다: 반투명 배경 플러스 backdrop-filter: blur() 그래서 그 뒤에있는 내용은 일반적으로 1px 반투명 테두리와 부드러운 그림자로 마무리 된 부드러운 통해 보여줍니다. 그것은 눈에 보이는 두 가지가 필요합니다: 부분적으로 투명하고 패널 뒤에 뭔가 화려한 채우기. 텍스트 대비는 아래에 통과 무엇이든 변경,그래서 실제 배경의 가장 밝고 어두운 부분에 대해 테스트합니다. 그만큼 CSS 유리형성 생성기 다음을 포함하여 전체 블록을 작성합니다 -webkit- 접두사, 클라이언트 측, 무료, 가입 없음.

CSS에서 유리형태란 무엇인가?

Glassmorphism 은 반투명 유리를 모방한 시각적 스타일입니다. 요소는 불투명도가 낮은 배경색과 그 뒤에 있는 픽셀을 흐리게 하는 배경 필터를 얻으므로 그 아래의 모양과 색상이 표면을 통해 부드러워진 것처럼 보입니다. 얇은 빛의 테두리는 유리 가장자리를 암시하고 부드러운 그림자는 패널을 페이지에서 들어 올립니다.

핵심 속성은 backdrop-filter는, W3C에서 정의했습니다 필터 효과 모듈 레벨 2. 와 같은 필터 기능을 취합니다 filter (blur(), saturate(), brightness() 그리고 나머지는) 하지만 요소 자체보다는 요소 뒤의 영역에 적용합니다. 그 한 가지 차이점이 효과를 가능하게 하는 것입니다.

다음은 Frosted 사전 설정을 위해 생성기가 생성하는 전체 블록입니다:

background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);

여섯 줄, 그리고 각각 직업이 있다.

필터 대 백드롭 필터: 차이점은 무엇입니까?

filter 텍스트와 자식을 포함하여 요소 자체가 그려지는 방식을 변경합니다. backdrop-filter 뒤에 있는 요소를 통해 보여주는 것을 변경하고, element's 자신의 콘텐츠를 선명하게 남겨둡니다.

재산	영향을 미치는 것	흐림 예제 결과	일반적인 사용
filter: blur(10px)	요소와 모든 자식	카드와 그 텍스트가 흐릿합니다	이미지 효과, 비활성화된 상태, 자리 표시자 로드
backdrop-filter: blur(10px)	요소 뒤에 그려진 것이 무엇이든	카드는 선명하게 유지되고, 카드를 통해 보이는 배경은 흐릿합니다	젖빛 유리 패널, 흐린 헤더, 모달 오버레이

로 카드를 흐리게 하면 filter 그리고 왜 제목을 읽을 수 없는지 궁금합니다. 잘못된 속성을 사용했습니다. The CSS 필터 생성기 덮는다 filter 쌍의 측면.

유리 CSS의 각 라인은 어떻게 작동합니까?

배경이 은 색조이며, 알파 채널은 블록에서 가장 중요한 숫자입니다. rgba(255, 255, 255, 0.2) 는 20% 불투명도에 백색입니다. 1 의 알파에 패널은 단단하 아무 것도 처음부터 끝까지 보여주지 않습니다,그래서 배경막 흐림은 보이지 않습니다. 0 의 알파에 표면은 전혀 없습니다. 대부분의 사용 가능한 유리는 0,1 와 0,4 사이에서 앉습니다.

생성기에서 이것은 투명성 슬라이더이며,이름 지정에는 메모가 필요합니다: 슬라이더는 채우기의 불투명도를 설정하므로 투명성 값이 높을수록 패널이 더 견고해집니다. 투명성 20%는 알파 0,2 를 쓰고,40%는 0,4 를 씁니다.

배경 필터 프로스팅을 합니다. blur(10px) 뒤에 있는 것에 적용되는 블러의 반경을 설정합니다. saturate(120%) 흐리게 하는 회색,희미한 외관 플러스 백색 색조를 생성하는 경향이 있는 카운터액션하는 20%에 의하여 그 흐리게 한 배경의 색깔을 밀어줍니다. generator's 흐리게 하는 슬라이더는 0 에서 40px 까지 달리고 100%에서 200%에 채도를 달립니다.

접두사 사본 이전 Safari 릴리스는 이해만 하기 때문에 존재합니다 -webkit-backdrop-filter. 동일한 값으로 두 줄을 모두 작성하는 데는 비용이 들지 않으며 해당 버전을 다룹니다.

경계 반경 모서리를 둥글게,발전기에서 0 ~ 50px. 흐림은 둥근 모양에 잘립니다.

국경 는 18% 불투명도에 백색의 1px 선입니다. 그것은 유리제 가장자리에 하이라이트로 눈을 붙잡고 패널 경계가 그렇지 않으면 녹을 더 어두운 배경에 가장 중요합니다. generator's 국경 체크 박스는 그것을 켜거나 끕니다; 색깔과 폭은 고정됩니다.

그림자 0 8px 32px rgba(0, 0, 0, 0.12) 는 패널과 페이지를 분리하는 넓고 희미한 드롭 섀도우입니다. 튜닝을 하고 싶다면,the 박스 그림자 가이드 오프셋, 흐림 및 확산에 대해 심층적으로 설명합니다.

발전기 사전 설정은 무엇을 생성합니까?

프리셋은 완성된 디자인이 아닌 시작점입니다. 다섯 개 모두 반경 16px 를 사용하며,Subtle 을 제외한 모든 것은 테두리를 포함합니다.

미리 설정	배경	백드롭 필터	국경	최고입니다
서리가 내린	rgba(255, 255, 255, 0.2)	blur(10px) saturate(120%)	에	다채로운 그라데이션과 사진
라이트	rgba(255, 255, 255, 0.35)	blur(6px) saturate(130%)	에	텍스트에 더 많은 지원이 필요한 바쁜 이미지
어두운	rgba(15, 23, 42, 0.25)	blur(12px) saturate(120%)	에	가벼운 사진, 하얀 글씨
활기찬	rgba(139, 92, 246, 0.15)	blur(16px) saturate(180%)	에	어둡거나 포화된 영웅 섹션
미묘한	rgba(255, 255, 255, 0.12)	blur(4px) saturate(120%)	끄다	작은 칩 및 배지

Frosted 가 선택된 상태로 생성기가 로드됩니다. 사전 설정을 클릭하고 슬라이더와 색조 색상을 조정하고 드래그할 때 코드 블록이 업데이트됩니다.

내 배경 필터가 작동하지 않는 이유는 무엇입니까?

흐림이 아무 것도하지 않는 것처럼 보일 때,이 중 하나가 거의 항상 원인입니다.

1. 배경이 불투명하다. 고체 background: #fff 또는 1 의 알파는 배경을 완전히 숨깁니다. 알파를 낮춥니다.
2. 그 뒤에는 흐려질 것이 없습니다. 편평한 단 하나 색깔 페이지의 위,흐리게 한 편평한 색깔은 편평한 색깔과 동일하 봅니다. 유리는 그라데이션,그것의 뒤에 사진 또는 모양을 필요로 합니다. generator's 시사점은 이 이유를 위한 착색한 원을 가진 그라데이션에 고의로 앉습니다; 그만큼 CSS 그라디언트 가이드 는 효과를 잘 보여주는 좋은 배경 소스입니다.
3. 접두사가 누락되었습니다. 이전 Safari 버전은 접두사가 없는 속성을 무시합니다.
4. 조상은 필터가 볼 수 있는 것을 제한합니다. 현재 필터 효과 사양에서는 조상 자체의 일부 속성과 같은 조상에 대한 일부 속성이 있습니다 filter, 안 opacity 1 이하 또는 다른 backdrop-filter를, 새로운 배경막 뿌리를 시작하고, 흐림은 그 뿌리 안쪽에 내용만 간색합니다 유리가 이들 중 하나와 포장지 안에 앉아있다면, 효과 또는 속성을 이동합니다.
5. 패널은 크기가 없거나 다른 방식으로 완전히 투명합니다. 높이가 0인 요소 또는 opacity: 0 패널에는 패널과 함께 효과가 숨겨져 있습니다.

유리 패널에서 텍스트를 읽을 수 있도록 유지하려면 어떻게 해야 합니까?

읽기 쉬운 유리는 스타일의 다른 어떤 부분보다 더 많은 작업을 소요,왜냐하면 텍스트 색상은 패널 아래의 배경이 아닌 동안 고정되어 있기 때문입니다. The WCAG 2.2 대비 최소값 보통 텍스트의 경우 최소 4,5: 1,큰 텍스트의 경우 3:1 의 비율을 요구합니다. 반투명 패널에서 그 비율은 그 순간 패널의 각 부분 뒤에 무엇이 있는지에 따라 달라집니다.

일된 예는이 콘크리트. 명암비는 두 색상의 상대 휘도로부터 계산된다, (L1 + 0.05) / (L2 + 0.05). 배경 위에 유리 채우기 복합: 각 채널은 알파 곱하기 채우기 플러스 (1 마이너스 알파) 배 배경이된다. 블러는 이웃 픽셀을 평균하지만 leaves a region's 평균 색상은 대략 어디에 있었으므로 한 색상의 넓은 영역에 걸쳐 복합은 공정한 추정이다.

채우다	배경색	합성 색깔	흰색 텍스트와 대조
서리가 내린, 0.2 에서 흰색	블루 #60A5FA	대한 rgb(128, 183, 251)	2.1:1 정도
서리가 내린, 0.2 에서 흰색	노란색 #FBBF24	대한 rgb(252, 204, 80)	1.5:1 정도
어두운, rgba(15, 23, 42, 0.25)	블루 #60A5FA	대한 rgb(76, 130, 198)	약 4.0:1

첫 번째 행을 가져 가라. 빨간색은 0.2 x 255 + 0.8 x 96 = 127.8, 녹색은 0.2 x 255 + 0.8 x 165 = 183, 파란색은 0.2 x 255 + 0.8 x 250 = 251 입니다. 그 color's 상대 휘도는 0.454 근처에서 작동하고 white's는 1 이므로 비율은 1.05 / 0.504, 약 2.1:1 입니다. 배경의 노란색 부분에 대한 동일한 패널은 약 1.5:1 로 떨어집니다. 본문 텍스트에는 둘 다 통과하지 못하며 파란색 위의 어두운 사전 설정은 큰 텍스트에는 약 4.0:1: 충분하지만 작은 텍스트에는 4.5:1이 부족합니다.

효율성 순으로 실제적인 수정 사항:

• 채우기 알파를 올립니다. 투명성을 20%에서 40%로 이동하면 배경이 더 많이 숨겨지고 대비가 변동하는 범위가 좁아집니다.
• 가벼운 텍스트의 색조를 어둡게하십시오또는 어두운 텍스트를 위해 밝게 합니다. 흰색 텍스트가 있는 어두운 유리는 흰색 텍스트가 있는 흰색 유리보다 훨씬 더 많은 배경을 유지합니다.
• 흐림 증가. 고대비 디테일을 부드럽게 만들어 문자 뒤의 얇은 흰색 선이 잘리지 않습니다.
• 텍스트 그림자 추가하기 제목에 대한 최후의 수단으로. The 텍스트 그림자 생성기 부드러운 것을 빠르게 만듭니다.
• 극단에서 테스트. 패널이 앉을 수 있는 가장 밝은 영역과 가장 어두운 영역의 대비를 확인하세요 색상 대비 검사기, 한 편리한 지점에 없습니다.

Generator's 복사된 CSS 는 유리 표면만 덮습니다. 미리보기의 흰색 텍스트는 출력의 일부가 아니므로 설정합니다 color 당신의 요소에 당신 자신.

백드롭 필터가 성능에 해를 끼치나요?

수 있습니다. 배경 흐림은 브라우저가 요소 뒤의 픽셀을 다시 읽고 해당 영역이 변경 될 때마다 그 위에 흐림을 실행하도록합니다. 값싼 정적 카드에서. 큰 영역에서 스크롤하는 동안 또는 패널 뒤에서 콘텐츠가 애니메이션 될 때 합성하는 데 더 비싼 효과 중 하나이며 저전력 전화는 드롭 프레임으로 먼저 보여줍니다.

이를 통제하는 지침:

• 유리 패널의 크기를 적당히 유지하십시오. 전체 뷰포트 프로스트 오버레이는 카드보다 훨씬 비쌉니다.
• 더 작은 흐림 반경을 선호하십시오. 비용은 반경에 따라 증가하고 약 20px 를 지나면 시각적 차이가 작습니다.
• 블러 값 자체를 애니메이션화하지 마십시오. 애니메이션 opacity 또는 transform 대신 패널의.
• 모든 스크롤 프레임에서 다시 흐려지는 긴 스크롤 콘텐츠에 대한 스티커 헤더를 조심하십시오. 실제 중급 전화에서 테스트하십시오.

필요한 브라우저나 사용자에 대한 대체 기능을 어떻게 추가합니까?

Chrome, Edge, Firefox 및 Safari의 현재 버전이 모두 지원됩니다 backdrop-filter니다. 아주 오래된 브라우저는 그것을 무시하고 흐림없이 반투명 채우기를 보여줍니다. 낮은 알파에서 바쁜 배경에 텍스트를 남길 수 있습니다. 두 개의 작은 추가는 효과가 잘 저하됩니다. 에 현재 지원 테이블을 확인할 수 있습니다 MDN's 백드롭-필터 페이지.

.glass {
  /* Fallback: a more solid fill for browsers without backdrop-filter */
  background: rgba(255, 255, 255, 0.7);
  border-radius: 16px;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .glass {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 10 @supports block 은 blur 가 존재하는 반투명 버전만 적용합니다. The prefers-reduced-transparency 미디어 기능은 다음과 같이 정의됩니다 미디어 쿼리 레벨 5를 사용하면 운영 체제에 투명성이 떨어지도록 요청한 사용자가 견고한 패널을 얻을 수 있습니다. 해당 미디어 기능에 대한 브라우저 지원은 여전히 부분적이므로 유일한 보호 장치가 아닌 사용 가능한 경우 개선 사항으로 처리하십시오.

유리형성 vs 신형성 vs 평면 디자인

Glassmorphism은 여러 표면 스타일 중 하나이며 각각 비용이 다릅니다.

스타일	표면이 어떻게 만들어지는지	메인 CSS	힘	주요 위험
유리형성	반투명 채우기 플러스 배경 흐림	background 알파와 함께, backdrop-filter	배경의 깊이와 맥락	대비는 다양하며 흐림은 성능을 저하시킵니다
신형성	페이지와 동일한 색상으로, 한 쌍의 그림자로 올리거나 누릅니다	둘 box-shadow 레이어	부드럽고 촉각적인 컨트롤	컨트롤과 페이지 사이의 대비가 매우 낮습니다
플랫	단단한 채우기, 깊이 없음	background	빠르고 예측 가능합니다	평탄한 느낌을 받을 수 있습니다
소재 스타일의 입면도	그림자 깊이 레벨로 채워진 솔리드	box-shadow	명확한 계층 구조	덜 대기

부드럽고 압출된 룩이 원하는 것에 더 가깝다면 신형성 생성기 페어링된 그림자를 빌드합니다. 많은 인터페이스 믹스 스타일: 영웅 이미지 위에 떠 있는 탐색 막대를 위한 유리,그 아래에 밀도 있는 콘텐츠를 위한 플랫 카드.

유리 카드를 만드는 방법, 시작부터 끝까지

1. 열다 젖빛 유리 CSS 발전기 그리고 배경에 가장 가까운 사전 설정을 선택하세요: 밝은 사진의 경우 어둡고, 화려한 그라데이션의 경우 서리가 내립니다.
2. 배경 세부 정보가 텍스트와 경쟁하지 않을 정도로 Blur를 높게 설정하십시오, 보통 8 ~ 16px.
3. 투명도를 설정합니다. 20%에서 시작하여 텍스트가 배경의 가장 가혹한 부분에 대한 대비를 통과할 때까지 올립니다.
4. 색상 선택기로 색조를 선택하십시오. background's 자신의 팔레트에서 그려진 색조는 순수한 흰색보다 더 자연스러워 보입니다.
5. 나머지 구성 요소와 일치하도록 Radius를 조정하고 어두운 배경의 경우 Border를 계속 유지합니다.
6. CSS 복사를 클릭하고 블록을 카드 클래스에 붙여 넣습니다. 추가 color 그리고 자신을 패딩.
7. 블록을 감싸세요 @supports 이전 브라우저를 지원하는 경우 위의 대체.

생성기의 모든 것이 브라우저에서 실행되므로 아무것도 업로드되지 않으며 페이지가 로드된 후에도 오프라인으로 계속 작동합니다. 관련 표면 및 효과 도구의 경우 CSS 도구 허브 한 곳에서 그라디언트, 그림자, 필터 및 전환을 나열합니다.