나는 모든 종류의 모양, 특히 밝은 색의 모양을 좋아합니다! 웹 사이트의 모양은 배경색, 그림, 배너, 분리기, 예술 작품 등만큼 중요합니다. 상황을 이해하고 혜택을 통해 우리를 안내하는 데 도움이됩니다.
몇 달 전에 저는 7 살짜리 딸을위한 수학 학습 응용 프로그램을 개발했습니다. 기본 추가 및 뺄셈 외에도 문제를 모양으로 제시하고 싶습니다. 당시 나는 웹 페이지에서 모양을 만드는 안정적인 방법 인 CSS clip-path 속성에 익숙해졌습니다. 그런 다음 clip-path 의 Power를 사용하여 Tryshape라는 다른 응용 프로그램을 구축하게되었습니다.
Tryshape의 비하인드 스토리와 그것이 형태를 만들고 관리, 공유 및 수출하는 데 어떻게 도움이되는지 이야기합니다. 이 과정에서 우리는 CSS clip-path 로 뛰어 들고 어떻게 신청서를 신속하게 구축하는 데 도움이되었습니다.
중요한 링크는 다음과 같습니다.
clip-path Encapsulation 반응 용 NPM 패키지clip-path 속성 및 모양정기적 인 종이와 연필이 있다고 상상해보십시오. 그리고 그 위에 사각형처럼 모양을 그려고 싶다고 상상해보십시오. 당신은 무엇을 하시겠습니까? 한 지점 에서 시작한 다음 다른 지점으로 선을 그린 다음 초기 지점으로 돌아 가기 전에 세 번 반복 할 것입니다. 또한 반대쪽 반대쪽과 같은 길이가 있는지 확인해야합니다.
따라서 모양의 기본 요소에는 점, 선, 방향, 곡선, 각도 및 길이 등이 포함됩니다. CSS clip-path HTML 요소의 영역을 자르기 위해 이러한 속성 중 다수를 지정하여 특정 영역을 표시하는 데 도움이됩니다. 자른 부위의 부분이 표시되고 나머지는 숨겨집니다. clip-path 속성을 사용하여 다양한 모양을 만들 수있는 많은 기회를 개발자에게 제공합니다.
자르기와 마스킹과 어떻게 다른지에 대해 자세히 알아보십시오.
clip-path 값 clip-path 속성은 다음 값을 수용하여 모양을 만듭니다.
circle()
ellipse()
inset()
polygon()
url() 함수를 사용한 클립 소스입니다path()
이러한 값을 사용하려면 기본 좌표계를 약간 이해해야합니다. 모양을 만들기 위해 요소에 clip-path 속성을 적용 할 때 요소의 왼쪽 상단 모서리의 x 축, y 축 및 초기 좌표 (0,0)를 고려해야합니다.
이것은 x 축, Y 축 및 초기 좌표 (0,0)를 갖는 DIV 요소입니다.
이제 circle() 값을 사용하여 원 모양을 만들어 봅시다. 이 값을 사용하여 원의 위치와 반경을 지정할 수 있습니다. 예를 들어, 좌표 위치 (70, 70)에서 반경 70px의 원형 모양을 만들려면 clip-path 속성 값을 다음과 같이 지정할 수 있습니다.
클립 경로 : 원 (70px at 70px 70px)
따라서 원의 중심은 좌표 (70, 70)에 있으며 반경은 70px입니다. 이제이 원형 영역 만 자르고 요소에 표시됩니다. 나머지 요소는 원형 모양의 인상을 만들기 위해 숨겨져 있습니다.
다음으로 위치를 (0,0)로 지정하려면 어떻게됩니까? 이 경우 원의 중심은 반경이 70px의 (0,0) 위치에 있습니다. 이것은 원소 내에서 원의 일부만 볼 수있게합니다.
계속해서 다른 두 가지 기본 값 inset() 및 polygon() 사용합시다. 우리는 inset 사용하여 사각형 모양을 정의합니다. 우리는 4 개의 가장자리가 요소에서 영역을 자르기 위해 필요한 간격을 지정할 수 있습니다. 예를 들어:
클립 경로 : 삽입 (30px)
clip-path 값은 요소의 가장자리에서 30px 값을 제외하여 영역을 클립합니다. 아래 그림에서 이것을 볼 수 있습니다. 또한 각 모서리에 대해 다른 inset 값을 지정할 수도 있습니다.
다음은 polygon() 값입니다. 우리는 정점 세트를 사용하여 다각형 모양을 만들 수 있습니다. 이 예를 참조하십시오 :
클립 경로 : 다각형 (10% 10%, 90% 10%, 90% 90%, 10% 80%)
여기서 우리는 자르기 영역을 만들기 위해 정점 세트를 지정합니다. 다음 그림은 다각형 모양을 만들기위한 각 정점의 위치를 보여줍니다. 필요에 따라 많은 정점을 지정할 수 있습니다.
다음으로 ellipse() 및 url() 값을 살펴 보겠습니다. ellipse() 값은 두 개의 반경 값과 하나의 위치를 지정하여 모양을 만드는 데 도움이됩니다. 아래 그림에서, 우리는 반경 (50%, 50%)의 위치에서 타원이 70px이고 높이가 100px입니다.
url() 는 SVG 모양을 렌더링하기 위해 clip-path 요소의 ID 값을 지정하는 CSS 함수입니다. 아래 그림을 참조하십시오. clipPath 및 path 요소를 사용하여 SVG 모양을 정의합니다. clipPath 요소의 ID 값을 url() 함수에 대한 인수로 사용 하여이 모양을 렌더링 할 수 있습니다.
또한 path() 함수에서 직접 path 값을 사용하여 모양을 그릴 수 있습니다.
괜찮은. 다른 clip-path 속성 값을 이미 이해했으면 좋겠습니다. 이러한 이해를 통해 일부 구현을 살펴보고 시도해 봅시다. 예를 들어, 추가 시도를 사용하여 값을 수정하여 새 모양을 만듭니다.
이제 트리 쉐이프와 배경 이야기에 대해 이야기 할 시간입니다. Tryshape는 선택한 모든 모양을 작성, 내보내기, 공유 및 사용하는 데 도움이되는 오픈 소스 응용 프로그램입니다. 배너, 서클, 아트 워크, 다각형을 만들어 SVG, PNG 및 JPEG 파일로 내보낼 수 있습니다. 응용 프로그램에서 복사 및 사용할 CSS 코드 스 니펫을 만들 수도 있습니다.
Tryshape는 다음 프레임 워크 및 라이브러리 (및 clip-path )를 사용하여 구축됩니다.
clip-path :이 강력한 CSS 속성의 기능에 대해 논의했습니다.clip-path 특성을 처리하기위한 수제 모듈clip-path 사용하여 Tryshape에서 모양을 만듭니다 CSS clip-path 속성을 사용하여 모양을 만드는 데 도움이되는 소스 코드를 강조하겠습니다. 다음 코드 스 니펫은 300px 정사각형 인 컨테이너 요소 (Box)의 사용자 인터페이스 구조를 정의합니다. 박스 요소에는 두 개의 자식 요소의 그림자와 구성 요소가 있습니다.
<box height="300px" onclick="{(e)"> props.handlechange (e)} width = "300px">
{
props.shapeinformation.showshadow &&
<shadow backgroundcolor="{props.shapeInformation.backgroundColor}"></shadow>
}
<component backgroundcolor="{props.shapeInformation.backgroundColor}" formula="{props.shapeInformation.formula}"></component>
</box>그림자 구성 요소는 clip-path 클립으로 숨겨진 영역을 정의합니다. 최종 사용자 가이 영역을 부분적으로 볼 수 있도록 가벼운 배경을 보여주기 위해 그것을 만듭니다. 구성 요소는 클립 영역을 표시하기 위해 clip-path 값을 할당하는 데 사용됩니다.
박스, 그림자 및 구성 요소의 스타일링 구성 요소 정의를 참조하십시오.
// CSS 속성을 사용하여 UI 구성 요소에 대한 스타일 컴포넌트 작성 // 컨테이너 DIV
const box = styled.div`
너비 : $ {props => props.width || '};
높이 : $ {props => props.height || '100px'};
여백 : 0 Auto;
위치 : 상대;
`;;
// 섀도우는`clip-path` 자르기로 숨겨진 영역을 정의합니다. // 우리는이 영역이 부분적으로 보이도록 가벼운 배경을 표시합니다.
Const Shadow = Styled.div`
배경색 : $ {props => props.backgroundColor ||.
불투명도 : 0.25;
위치 : 절대;
상단 : 10px;
왼쪽 : 10px;
오른쪽 : 10px;
하단 : 10px;
`;;
//`clip-path` 값 (공식)을 가져 와서`clip-path` 속성의 실제 구성 요소로 설정하십시오.
const 구성 요소 = Styled.div`
Clip-Path : $ {props => props.formula};
위치 : 절대;
상단 : 10px;
왼쪽 : 10px;
오른쪽 : 10px;
하단 : 10px;
`;;GitHub 코드베이스에서 전체 코드 기반을 자유롭게보십시오.
Tryshape는 배경 CSS clip-path 사용하여 기본 모양을 만들고 관리합니다. 웹 애플리케이션에 사용하기 위해 모양과 CSS 코드 스 니펫을 내보내는 데 도움이됩니다. 더 가치있는 기능을 개발할 가능성이 있습니다. 주요 기능은 곡선 가장자리로 모양을 만들 수있는 기능입니다.
곡선 모양을 지원하려면 Tryshape에서 다음 값을 지원해야합니다.
url()
path() . 이 값을 사용하면 SVG를 사용하여 모양을 생성 한 다음 위의 값 중 하나를 사용할 수 있습니다. 이것은 SVG 지원을 사용하여 모양을 만드는 url() CSS 함수의 예입니다.
<div> 마음</div>
<svg><clippath clippathunits="objectBoundingBox"><path d="M0.5,1
C 0.5,1,0,0.7,0,0.3
A 0.25,0.25,1,1,1,0.5,0.3
A 0.25,0.25,1,1,1,1,0.3
C 1,0.7,0.5,1,0.5,1 Z"></path></clippath></svg>그런 다음 CSS가 있습니다.
.마음 {
클립 경로 : URL (#하트 패스);
} 이제 path() 값을 사용하여 모양을 만들어 봅시다. html은 div와 같은 요소가 있어야합니다.
<div> 곡선</div>
CSS에서 :
.curve {
클립 경로 : 경로 ( "M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");
}나는 당신이 나의 트리 쉐이프 응용 프로그램을 즐기고 그 뒤에있는 철학, 내가 고려하는 전략, 기본 기술 및 미래의 잠재력을 이해하기를 바랍니다. 시도하고 소스 코드를 확인하십시오. 물론 질문, 기능 요청 및 코드를 통해 언제든지 기여할 수 있습니다.
끝나기 전에, 나는 당신에게 Hashnode Hackathon에 대한 짧은 비디오를 보여 드리고 싶습니다. Tryshape는 출품작이며 마침내 우승자를 위해 선정되었습니다. 나는 당신이 그것을 즐겼기를 바랍니다.
저희에게 연락합시다. 트위터에서 @ME (@TapasAdhikary)에 댓글을 달거나 언제든지 팔로우 할 수 있습니다.
위 내용은 CSS Clip-Path 속성의 쇼케이스 인 Tryshape의 이야기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
