그라디언트 배경으로 카드 및 쿠폰 레이아웃에 대한 갭 효과를 달성하는 방법은 무엇입니까?

CSS 마스크를 영리하게 사용하여 그라디언트 배경 카드 바우처 갭 효과를 만듭니다.

디자인에서는 카드 쿠폰, 특히 그라디언트 배경의 간격에 노치 효과를 추가하는 것이 종종 어려운 일입니다. 이 기사는 CSS의 mask 속성을 사용 하여이 효과를 쉽게 달성하는 방법을 자세히 소개합니다.

설계 퍼즐 : 그라디언트 배경 아래의 카드 쿠폰 간격

카드 쿠폰의 배경이 견고한 경우 단색으로 직접 마스킹하여 간격을 쉽게 달성 할 수 있습니다. 그러나 그라디언트 배경은 그렇지 않으며 간단한 마스크는 그라디언트 효과를 파괴합니다. 따라서 그라디언트를 유지하면서 간격을 정확하게 "파기"하는 방법이 필요합니다.

해결책 : CSS 마스크 특성

CSS mask 속성은이 문제를 해결하는 핵심입니다. 이미지 나 그라디언트를 사용하여 요소를 "차단"할 수 있으므로 그라디언트 배경의 노치 설계에 적합한 다양한 복잡한 무광택 효과를 만듭니다.

다음 코드 스 니펫은 방사형 구배를 사용하여 원형 간격을 만드는 방법을 보여줍니다.

 .card {
  -webkit-mask : Radial-Gradient (20px 20px, #0000 20px, 투명 0); / * 사파리 및 크롬 */
  마스크 : 방사형 등급 (20px 20px, #0000 20px, 투명 0); / * Firefox */
}

이 코드는 방사형 구배를 통해 원형 마스크를 만듭니다. #0000 불투명 한 검은 색 (폐색 영역)을 의미하며 transparent 수단 투명 (노치 영역). 20px 20px 중심 위치를 지정 20px 노치 반경을 제어합니다. 브라우저 호환성 측면에서 -webkit-mask Safari 및 Chrome을 지원하기 위해 추가되었습니다.

효과 미리보기

위의 코드를 적용한 후 쿠폰의 왼쪽 상단에 원형 간격이 나타나고 그라디언트 배경은 그대로 유지됩니다.

보조 도구

CSS 코드를 수동으로 작성하는 것 외에도 일부 온라인 디자인 도구는 카드 쿠폰 설계 및 갭 생성을 지원할 수 있습니다. 예를 들어, 일부 "쿠폰 디자이너"또는 "그래픽 편집자"는보다 직관적 인 노치 제작 기능을 제공 할 수 있습니다.

요약

CSS mask 속성을 사용하여 구배 배경 카드 쿠폰에 다양한 모양의 간격을 추가하여 설계 효과를 향상시킬 수 있습니다. 이 방법은 간단하고 사용하기 쉽고 카드 쿠폰의 전반적인 모양을 유지할 수 있습니다.

위 내용은 그라디언트 배경으로 카드 및 쿠폰 레이아웃에 대한 갭 효과를 달성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!