유리상 생성기

배경 필터: 흐림()은 반투명 유리 모양 뒤에 있는 CSS 속성입니다. 즉, 단순한 색상을 희미하게 만드는 대신 뒤에서 움직이는 모든 것을 흐리게 하는 반투명 패널입니다. 중요한 점은 정적 견본에 대해 흐림 품질을 판단하는 것이 거의 불가능하다는 것입니다. 콘텐츠, 비디오 또는 애니메이션 영웅이 포함된 실제 페이지에서처럼 무언가가 실제로 그 아래에서 움직이는 경우에만 설득력 있는 것으로 읽혀집니다. 이 생성기는 정지된 배경 대신 실제 애니메이션 배경 위에 미리보기 카드를 배치하므로 슬라이더를 드래그하는 동안 표시되는 내용이 방문자가 실제로 경험하게 되는 내용입니다.

배경은 실제 CSS 애니메이션입니다. @keyframes가 루프에서 배경 위치를 앞뒤로 이동하면서 요소 크기의 400%로 칠해진 큰 선형 그라데이션입니다. JavaScript 애니메이션 루프도 없고 캔버스도 없으며 프로덕션 히어로 섹션에 사용되는 것과 동일한 연속 배경 위치 기술이 있습니다. 흐림, 색조 색상 및 불투명도, 테두리 강조 색상/불투명도/폭, 모서리 반경 및 그림자 부드러움은 모두 플로팅 카드의 라이브 스타일을 구동하며 복사 가능한 CSS 상자는 정확히 동일한 값을 미러링합니다.

모든 브라우저가 배경 필터를 지원하는 것은 아니므로 생성기는 토큰 제스처가 아니라 실제 색조 불투명도에서 계산된 자체 배경색이 있는 대체 규칙인 실제 @supports not (backdrop-filter: Blur(1px)) 블록도 내보냅니다. 블러가 없는 반투명은 눈에 띄게 나빠 보이기 때문에(그 뒤에 있는 것이 무엇이든 블러되지 않은 상태로 표시됨) 폴백은 자동으로 선택한 색조 불투명도 위로 알파 채널을 높이고 생성된 CSS의 주석에서 그 이유와 정도를 정확하게 설명합니다.

모든 것이 귀하의 브라우저에서 계산되고 렌더링됩니다. 업로드도, 계정도, 서버 왕복도 없습니다. 카드가 제대로 보이면 CSS를 복사하여 사진, 비디오 또는 그라데이션 위에 배치할 요소에 놓고 @supports 블록을 유지하여 오래된 브라우저에서 거의 보이지 않는 카드 대신 읽기 쉽고 불투명한 카드를 얻을 수 있도록 하세요.