CSS 페인트 API : 둥근 모양

CSS가있는 복잡한 모양에 둥근 모서리를 마스터하는 것은 어려울 수 있습니다. CSS Paint API는 우아한 솔루션을 제공합니다! "CSS Paint API 탐색"시리즈의 일부인이 기사는이를 달성하는 방법을 보여줍니다.

CSS 페인트 API 시리즈 탐색 :

• 1 부 : 이미지 조각화 효과
• 2 부 : Blob Animation
• 3 부 : 다각형 테두리
• 파트 4 : 반올림 모양 (이 기사)

현재 Chrome and Edge가 지원하는이 기술은 깨끗한 CSS 전용 접근 방식을 제공하여 유지 보수 및 코드 이해를 단순화합니다.

페인트 API의 대안

복잡한 모양을 반올림하기위한 다른 방법이 존재하지만, 종종 SVG를 포함하고 조정 및 유지 가능성에 대한 과제가 있습니다. 여기에는 다음이 포함됩니다.

clip-path: path()

이 SVG 기반 접근법은 모양이 사전 정의 된 경우 간단하지만 곡률 또는 크기를 수정하려면 복잡한 경로 편집이 필요합니다.

SVG 필터

Lucas Bebber의 Gooey Effect 튜토리얼에서 볼 수 있듯이 SVG 필터를 사용하면 코너 반올림이 가능합니다. 그러나 여전히 조정에 대한 상당한 SVG 전문 지식이 필요합니다.

Ana Tudor의 CSS 전용 방법

Ana Tudor의 혁신적인 CSS 전용 기술은 대안을 제공하지만, 특히 투명성 또는 이미지와 함께 다양한 시나리오를 구현하고 조정하는 것은 복잡 할 수 있습니다.

CSS 페인트 API 솔루션

CSS Paint API는보다 관리하기 쉬운 솔루션을 제공합니다. 이 접근법은 이전 기사에서 다각형 테두리 예제와 유사한 구조를 활용합니다.

CSS 설정

우리는 간단한 사각형으로 시작하여 clip-path: polygon() 과 유사한 --path 변수를 사용하여 모양을 정의합니다. Clippy는 이러한 경로를 생성하는 데 도움을 줄 수 있습니다.

 .상자 {
  디스플레이 : 인라인 블록;
  높이 : 200px;
  너비 : 200px;
  -경로 : 50% 0,100% 100%, 0 100%;
  -radius : 20px;
  -webkit 마스크 : 페인트 (둥근 모양);
}

--path 변수는 모양을 정의하고 --radius 코너 곡률을 제어합니다.

JavaScript 구현

JavaScript 코드는 경로 세그먼트에 중간 점을 추가하고 arcTo() 함수를 사용하여 매끄러운 둥근 모서리를 생성합니다. arcTo() 의 제어점 사용을 이해하는 것이 중요합니다. 코드는 포인트를 통해 반복되어 중간 점을 계산하고 arcTo() 적용하여 둥근 모양을 생성합니다. 반경 값이 큰 오버플로를 방지하기 위해 반경 한계가 구현됩니다.

(JavaScript 코드는 Brevity에 대해 생략되었지만 원본 기사에 자세히 설명)

마지막 단계는 원하는 시각적 효과를 달성하기 위해 모양을 채우거나 쓰다듬는 것입니다.

단점 및 솔루션

기본 단점은 가공 할 수있는 영역 (마스크를 사용하여 상호 작용에 영향을 미치는)과 반경 값이 큰 잠재적 오버플로입니다. 호버 가능한 영역 문제는 테두리의 의사 요소에 두 번째 마스크를 사용하여 해결되며, 오버플로 문제는 모양의 형상에 따라 반경을 동적으로 제한하여 처리됩니다.

기능 확장 기능

--path 변수는 각 모서리의 개별 반경 값을 수용하여보다 세분화 된 제어를 제공하도록 향상되었습니다.

예

몇 가지 예는이 기술의 다양성을 보여줍니다 : CSS 모양, 음성 기포, 프레임, 섹션 분배기, 내비게이션 메뉴, 끈적 끈적한 효과 및 모양 변형. 이 예는 시각적으로 매력적이고 쉽게 유지 가능한 디자인을 만들기 위해 CSS 페인트 API의 힘과 유연성을 보여줍니다.

결론

CSS Paint API는 복잡한 모양에 둥근 모서리를 생성하는 강력하고 효율적인 방법을 제공하여 전통적인 CSS 및 SVG 접근법의 한계를 극복합니다. 간단한 구현과 유연성은 현대적인 웹 디자인을위한 귀중한 도구입니다.

위 내용은 CSS 페인트 API : 둥근 모양의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!