흐림 및 유리 색조 컨트롤
흐림 값은 0 에서 100px 까지 실행되며 20px 에서 시작합니다. 배경 색상은 유리의 색조를 설정합니다: RGBA 색상을 선택하고 불투명도를 낮추어 뒤에있는 내용이 여전히 보여줍니다. 테두리 반경은 px,% 또는 em 으로 모서리를 둥글게하고 테두리 너비는 최대 10px 의 얇고 반투명한 흰색 가장자리를 추가합니다.
- 흐림 값 0 에서 100px,기본적으로 20px.
- 색조에 대한 RGBA 배경 색상. HEX 또는 RGB 색상이 당신을 위해 30% 불투명도로 변환됩니다.
- 모서리당 테두리 반경과 0~10px 유리 가장자리.
흐림이 표시되지 않을 때 오버플로를 수정합니다
흐림은 CSS backdrop-filter 속성에서 비롯되며,overflow: hidden 이 누락되는 가장 일반적인 이유입니다. Fix Overflow 스위치는 요소의 오버플로를 표시되도록 설정하므로 스타일시트를 열지 않고도 수정할 수 있습니다.
- Glassmorphism 패널에 스위치 1개, 사용자 정의 CSS 없음.
- 효과가 켜져 있지만 아무것도 흐려 보이지 않을 때 사용하십시오.
- 또한 요소가 사진,그라디언트 또는 기타 바쁜 배경 위에 있는지 확인하십시오. 일반 흰색 위에 흐리게 할 것이 없습니다.
Glassmorphism CSS 대 Glassmorphism 확장
Elementor 의 CSS Filters 는 요소 자체를 흐리게 하며 텍스트가 포함되어 있습니다. 유리 카드는 대신 backdrop-filter 가 필요하며,이는 요소 뒤에 있는 것만 흐리게 하고 Elementor 는 이에 대한 제어권이 없습니다. 손으로 쓴 CSS 는 다음과 같습니다:
.glass-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 16px;
}| 손으로 쓴 CSS | 유리형성 확장 | |
|---|---|---|
| 당신이 그것을 설정한 곳 | 사용자 정의 CSS 필드 또는 스타일시트 | 고급 탭의 컨트롤 |
| 사파리 접두사 | 추가 -webkit-backdrop-필터를 직접 | 포함 |
| HEX 또는 RGB 색상 | 불투명도를 추가하지 않는 한 견고함을 유지하세요 | 불투명도 30%로 변환 |
| 오버플로로 막힌 흐림: 숨김 | 직접 찾아서 재정의하세요 | 오버플로 스위치 수정 |
| 작동 | 선택자가 목표로 삼는 것이 무엇이든 | 위젯, 열, 섹션 및 컨테이너 |
백드롭-필터는 현재 크롬,엣지, 사파리 및 파이어폭스에서 작동합니다. 이전 브라우저는 흐림 없이 반투명한 배경을 보여줍니다. 유리는 움직임이나 색상보다 더 좋아 보이므로 그 위에 올려보세요 입자 또는 an 애니메이션 그라데이션 배경 (Pro). 패널이 다루지 않는 효과에 대해서는 자신의 규칙을 추가합니다 사용자 정의 CSS.
Glassmorphism에 대해 자주 묻는 질문
왜 내 흐림 효과가 나타나지 않습니까?
Glassmorphism 패널에서 오버플로 수정을 켭니다. 요소의 오버플로를 표시되도록 설정하므로 백드롭 필터가 작동할 수 있습니다. 또한 요소 뒤에 이미지나 다채로운 배경이 있는지 확인하십시오.
유리 효과로 단색을 사용할 수 있습니까?
예. HEX 또는 RGB 색상은 30% 불투명도에서 RGBA 로 변환되므로 유리는 투명 상태를 유지합니다. 정확한 제어를 위해 RGBA 색상을 선택하고 불투명도를 직접 설정하십시오.
어떤 테마와도 작동하나요?
예. 효과는 Elementor 요소에 설정되어 있으므로 Elementor 를 실행하는 모든 테마에서 작동합니다. 방문자는 Chrome,Edge, Safari 및 Firefox 의 현재 버전을 다루는 백드롭 필터를 지원하는 브라우저가 필요합니다.
Glassmorphism 확장은 무료입니까?
예. Glassmorphism 은 Elementor 용 Master Addons 의 무료 확장 프로그램 중 하나입니다. Master Addons 대시 보드에서 켜면 모든 요소의 고급 탭에 표시됩니다.
더 많은 기능을 탐색하여 더 빠르게 구축하고 더 스마트하게 디자인하세요
왜 한 효과에서 멈추나요? Master Addons 제품군은 필요한 다른 모든 것을 제공합니다: 고유한 위젯,더 깊은 사용자 정의,함께 원활하게 작동하는 특수 도구. Elementor 를 최고의 디자인 강자로 바꿔보세요.
