클리핑, 클리핑 및 더 많은 클리핑!

CSS clip-path 속성의 마법 적 사용 : 다양한 창의적인 기술과 신청 사례를 탐색합니다. 이 기사는 clip-path 속성을 사용하여 달성 된 일련의 흥미로운 효과를 공유하여 프로젝트에 적용하거나 창의적인 시도를하도록 영감을주기를 희망합니다.

이 기사는 CSS- 트릭에 저자가 게시 한 clip-path 에 대한 세 번째 기사입니다. 배경을 알고 싶다면 먼저 다음 기사를 읽을 수 있습니다.

• CSS clip-path 사용하여 대화식 효과를 만듭니다
• CSS clip-path , Part 2를 사용하여 대화식 효과를 만듭니다

이 기사는 새로운 아이디어를 소개 할 것입니다!

창조적 인 것 : 더블 컷

영리한 속임수는 clip-path 여러 번 사용하여 콘텐츠를 자르는 것입니다. 이것은 분명하게 들릴지 모르지만 실제로이 개념을 사용하는 사람은 거의 없습니다.

예를 들어 확장 된 메뉴를 살펴 보겠습니다.

clip-path 단일 DOM 노드에 한 번만 적용 할 수 있습니다. 노드는 동시에 동일한 CSS 규칙의 여러 활성 인스턴스를 가질 수 없으므로 각 인스턴스에는 하나의 clip-path 만 있습니다. 그러나 결합 된 작물 노드가 결합 된 횟수에는 상한이 없습니다. 예를 들어, 우리는 a를자를 수 있습니다<div> 다른 자르기에 배치되었습니다<code><div> 내부 등. DOM 노드의 조상 관계에서, 우리는 많은 독립적 인 작물을 적용 할 수 있습니다. 이것은 위의 데모에서 수행되는 일입니다. 자른 노드 하나가 다른 자른 노드를 채우고 있습니다. 상위 노드는 경계 역할을하며, 하위 노드는 스케일링 할 때 부모 노드를 채 웁니다. 이것은 둥근 메뉴의 비정상적인 효과를 생성합니다. 그것을 <code>overflow: hidden .

물론 SVG 가이 목적에 더 적합하다고 생각할 수 있습니다. clip-path 와 비교하여 SVG는 더 많은 기능을 달성 할 수 있습니다. 여기에는 부드러운 줌이 포함됩니다. clip-path 가 Bezier 곡선을 완전히 지원하면 상황이 다릅니다. 그러나 글을 쓰는 시점에서는 그렇지 않습니다. 어쨌든 clip-path 매우 편리합니다. CSS 규칙 인 노드를 사용하면 시작할 수 있습니다. 위의 시연과 관련하여 clip-path 작업을 수행하므로 실행 가능한 옵션입니다.

메뉴가 내부적으로 어떻게 작동하는지 설명하기 위해 짧은 비디오를 만들었습니다.

크리에이티브 2 : 스케일 클리핑 경로

또 다른 (덜 명백한) 트릭은 스케일링을 위해 clip-path 사용하는 것입니다. 실제로 CSS 전환을 애니메이션 clip-path 로 사용할 수 있습니다!

전환 시스템은 어떻게 구축되는지에 놀랍습니다. 제 생각에는 최근 몇 년간 웹 기술 개발에서 가장 큰 도약 중 하나입니다. 다양한 값의 전환을 지원합니다. clip-path 우리가 애니메이션 할 수있는 허용되는 가치입니다. 애니메이션은 일반적으로 두 가지 극단 값 사이의 보간을 의미합니다. clip-path 의 경우, 이것은 완전히 다른 두 가지 경로 사이의 보간을 의미합니다. 웹의 훌륭한 애니메이션 시스템이 장점을 보여주는 곳입니다. 단일 값뿐만 아니라 애니메이션 값 세트에서도 작동합니다.

clip-path 애니메이션 할 때 각 좌표는 별도로 보간됩니다. 이것은 매우 중요합니다. clip-path 애니메이션이 일관적이고 매끄럽게 보이게 만듭니다.

데모를 살펴 보겠습니다. 이미지를 클릭하여 효과를 다시 시작하십시오.

이 데모에서 나는 clip-path 전환을 사용했습니다. 작은 영역을 덮고있는 하나의 clip-path 에서 다른 거대한 clip-path 로 확장하는 데 사용됩니다. clip-path 의 최소 버전은 해상도보다 훨씬 작습니다. 즉, 적용 할 때 육안으로 보이지 않습니다. 다른 극단적 값은 뷰포트보다 약간 큽니다. 이 줌 수준에서는 모든 자르기가 가시 영역 밖에서 발생하므로 가시 자르기가 없습니다. 이 두 가지 다른 clip-path 사이를 애니메이션하면 흥미로운 효과가 있습니다. 자른 모양은 스케일링 될 때 뒤에 무엇이 있는지 보여주는 것처럼 보입니다.

이 데모는 다른 모양을 사용한다는 것을 알았을 것입니다. 이 경우 인기있는 운동화 브랜드의 로고를 사용했습니다. 이것은보다 현실적인 시나리오에서 어떻게 작동하는지에 대한 아이디어를 제공합니다.

마찬가지로 다음은 기술적 인 세부 사항을 자세히 설명하는 비디오입니다.

창의적 3 : 작물 오버레이

또 다른 아이디어는 clip-path 사용하여 하이라이트 효과를 만드는 것입니다. 예를 들어, clip-path 사용하여 메뉴의 활성 상태를 만들고 싶다고 가정 해 봅시다.

위의 클리핑 경로는 애니메이션 할 때 다른 메뉴 옵션 사이에서 확장됩니다. 또한, 우리는 흥미로운 모양을 사용하여 UI를 돋보이게했습니다.

이 데모는 동일한 컨텐츠의 수정 된 사본을 사용하며, 여기서 사본은 기존 컨텐츠 상단에 있습니다. 메뉴 장치와 똑같은 위치에 있으며 활성 상태로 사용됩니다. 기본적으로 메뉴의 다른 정기 활동 상태처럼 보입니다. 차이점은 HTML 요소에서 멋진 CSS 스타일을 사용하는 대신 clip-path 사용하여 작성된다는 것입니다.

clip-path 사용하여 여기서 특이한 효과를 만듭니다. 경사 모양은 한 가지 측면이지만 스트레칭 효과도 얻습니다. 메뉴에는 두 개의 독립적 인 작물 (왼쪽과 오른쪽에 하나)이있어 전환 지연을 사용하여 작물을 다른 시간에 애니메이션 할 수 있습니다. 결과는 매우 편안한 스트레치 애니메이션입니다. 기본 완화는 비선형이므로 지연이 약간의 고무 밴드 효과로 이어질 수 있습니다.

여기서 두 번째 트릭은 방향에 따라 지연을 적용하는 것입니다. 활성 상태가 오른쪽으로 이동 해야하는 경우 오른쪽은 애니메이션을 먼저 시작하고 그 반대도 마찬가지입니다. 작은 JavaScript를 사용하여 클릭에 따라 올바른 클래스를 적용하여 방향 인식을 얻습니다.

크리에이티브 포 : 슬라이스 슬라이스

웹에서 원형으로 확장되는 메뉴가 얼마나 자주 보입니까? 말도 안돼! ? 글쎄, clip-path 가능할뿐만 아니라 매우 간단합니다.

우리가 보는 메뉴에는 이전에 본 첫 번째 트릭과 마찬가지로 단일 라인 또는 드롭 다운 메뉴로 배열 된 링크가 포함되어 있습니다. 우리가 여기서하는 일은이 링크를 직사각형 대신 호에 넣는 것입니다. 물론 사각형을 사용하는 것이 전통적인 방법입니다. 여기서 아이디어는보다 모바일 친화적 인 상호 작용을 탐색하고 두 가지 특정 UX 원칙을 염두에 두는 것입니다.

• 명확한 목표, 엄지 손가락으로 쉽게 클릭 할 수 있습니다
• 변경 사항은 거의 초점이 발생합니다 - 시각적 초점이있는 곳

이 데모는 특히 clip-path 를 목표로하지 않습니다. 방금 clip-path 사용하여 펜을 만들었습니다. 다시, 이전 확장 가능한 메뉴 데모와 마찬가지로 이것은 편리한 질문입니다. clip-path 와 50% 테두리 반경을 사용하여 즉시 필요한 아크를 얻었습니다.

크리에이티브 5 : 토글 버튼

토글 버튼은 항상 우리와 같은 웹 개발자를 지냅니다. 새로운 토글 버튼 설명이 매주 소개 될 것 같습니다. 좋아, 이것은 내 것 :

이 데모는 Oleg Frolov의 Dribbble 스크린 샷 리메이크입니다. 이 기사에 설명 된 세 가지 기술을 모두 결합합니다. 이들은 다음과 같습니다.

• 이중 컷
• 스케일링 클립 경로
• 작물 오버레이

이 스위치는 모두 공통점이있는 것 같습니다. 그들은 실제 기계적 스위치와 유사한 타원형 배경과 원으로 구성됩니다. 이 토글 버튼이 작동하는 방식은 원형 컨테이너 내부의 원형 clip-path 확대하는 것입니다. 컨테이너는 overflow: hidden , 즉 이중 작물.

데모의 또 다른 핵심 부분은 태그에 두 개의 교대 버전을 사용하는 것입니다. 그것들은 원래 버전이며 음양 반전은 미러 사본입니다. 하나의 버전 대신 두 버전을 사용하는 것은 편리한 문제 인 반복의 위험을 감수하는 것입니다. 두 버전을 모두 사용하면 첫 번째 버전에 대한 전환 만 만들어야합니다. 그런 다음 두 번째 버전 에서이 대부분을 반복 할 수 있습니다. 전환이 끝나면 토글 버튼이 반대 버전으로 전환됩니다. 역 버전은 이전 끝 상태와 동일하므로 변경 사항을 찾을 수 없습니다. 이 기술의 장점은 애니메이션의 일부를 재사용하는 것입니다. 단점은 애니메이션이 중단 될 때 말더듬이 있다는 것입니다. 이는 애니메이션이 완료되기 전에 사용자가 토글 버튼을 누르면 발생합니다.

다시 무대 뒤에서 살펴 보겠습니다.

결론

당신은 생각할 수도 있습니다 : 탐험은 한 가지이지만 생산은 어떻습니까? 현재 작업중 인 웹 사이트에서 clip-path 사용할 수 있습니까? 생산에 들어갈 준비가 되셨습니까?

글쎄,이 질문에 대한 쉬운 대답은 없습니다. 무엇보다도 신중하게 연구 해야하는 두 가지 문제가 있습니다.

1. 브라우저 지원
2. 성능

글을 쓰는 시점에서 Caniuse에 따라 브라우저의 약 93%가이를 지원합니다. 나는 우리가 대량 채택 직전에 있다고 생각합니다. 이 숫자는 WebKit Prefix를 고려합니다.

IE의 주장도 있지만, 그것은 실제로 나에게 논쟁이 아닙니다. IE에 대한 추가 노력이 무엇을 의미하는지 알 수 없습니다. 안전하지 않은 브라우저에 대한 해결 방법을 만들어야합니까? 사용자는 최신 브라우저를 사용하는 것이 좋습니다. 물론 유산으로 간주되어야하는 드문 상황이 있습니다. 그러나 이러한 경우 현대 CSS 사용을 전혀 고려하지 않을 수 있습니다.

그렇다면 성능은 어떻습니까? 글쎄, 상황이 점점 더 커짐에 따라 공연이 까다로워 지지만 오늘은 clip-path 사용하는 것을 막을 것이라고 말하지 않을 것입니다. 항상 측정되는 성능이 중요합니다. 평균적으로 clip-path 다른 CSS 규칙보다 성능에 큰 영향을 줄 수 있습니다. 그러나 우리가 여기서 소개하는 관행은 법이 아니라 조언이라는 것을 기억하십시오. 그것들을 제안으로 생각하십시오. 성능 측정 습관을 개발하십시오.

계속해서 페이지를 조각으로 자릅니다. 무슨 일이 일어나는지보세요!