Houdini가있는 작업 이미지 마스크 마술

Sep 12, 2025

어떻게

An image showing the outlines of a circle, square and triangle used as CSS masks for images of a seascape.

Houdini에 대해 더 배우는 데 관심이 있다면 뉴욕을 생성하는지 확인하십시오 (24-25 월 24 일). 회의에서 Google에서 Sam Richard, Enterprise Partner Engineer를 Catch하여 Houdini가 유연성, 전력, 성능 및 설계 패턴의 유지 보수성을 크게 향상시킬 수있는 방법을 논의 할 수 있습니다. 웹 디자이너를위한 수상 경력에 빛나는 회의에 대한 티켓을 예약하려면 방문하십시오. generateConf.com. ...에

개발자로서 우리는 때때로 CSS를 부여받는 경우가 있습니다. 몇 가지 속성을 변경함으로써 전체 웹 사이트의 모양을 변경할 수 있습니다. 브라우저 공급 업체는 그 시점에 도착하기 위해 우리를 대신하여 많은 일을하고 있습니다.

그러나 새로운 CSS 기능이 나오면 생산 현장을 위해 사용하기 전까지는 잠시 동안 일 수 있습니다. 오래된 브라우저가있는 사용자는 현대 브라우저에서 훌륭한 것처럼 보이지 않는 스타일로 점진적으로 향상된 스타일의 스타일 세트로 착취됩니다.

19 멋진 CSS 애니메이션의 예제를 재현합니다

Houdini는 그 모든 것을 변경하도록 설정되었습니다. 개발자가 CSS가 제공하는 백인 장면 마법의 일부에 액세스 할 수있는 초안 사양 모음입니다. 모든 사양이 완료되면 개발자가 JavaScript를 사용하여 레이아웃 및 스타일 계산과 같은 측면이 수행되는 방법을 결정할 수 있습니다.

Houdini는 무엇을 할 수 있습니까?

Houdini는 JavaScript와 CSS 간의 마찰을 줄이기 위해 고안된 API 및 사양의 모음입니다. 브라우저가 개발자에게 수행하는 마술 중 일부를 노출시킴으로써 우리는 특정 유스 케이스에 가장 적합한 페이지를 조정할 수 있습니다.

이러한 발전의 중간에 고정 된 것은 애니메이션과 같은 특정 조치에 중점을 둔 가볍고 전문화 된 클래스 인 가볍고 전문화 된 클래스의 개념입니다. 그들은 웹 노동자와 유사하며, 주사에서 멀리 실행하고 페이지를 반응시키는 것입니다. 개발자의 요구가 진화하기 때문에 앞으로도 확장 될 수 있습니다.

이러한 API 중 일부는 여전히 초기 단계에 있지만 V66 및 V53의대로 크롬과 오페라 모두에 각각 착륙했습니다. CSS Paint API는 개발자가 CSS를 입력하는 동안 이미지가 일반적으로 사용되는 곳이면 CSS 입력 한 객체 모델은 단순한 문자열이 아닌 CSS 오브젝트를 JavaScript에 노출시키는 곳이면 어떻게 해제 할 수 있습니다. 이러한 API에 대한 Safari 지원은 현재 개발 중이며, 몇 가지 더 많은 API가 Chrome에서 더 많은 API가 W3C 사양 프로세스를 통해 W3C 사양 프로세스를 통해 작업하고 있으며 페인트 API가 이미 후보 권장 사항에 도달했습니다.

드래프트 API가 끊임없이 변화하고 현재 브라우저에 착륙하는 것과 유사하지는 않을 수 있습니다. 눈을 지키십시오 ishoudinireadyyet.com. 최신 개선 사항을 앞당겨야합니다.

더 간단한 것을 원하십니까? 해보세요 웹 사이트 빌더 ...에 어느 쪽이든, 당신 웹 호스팅 서비스는 당신을 위해 일해야합니다.

Houdini를 사용하여 이미지 마스크를 재구성합니다

당분간의 경우 Houdini의 CSS 페인트 API조차도 큰 거래를 달성 할 수 있습니다. 예를 들어,이를 이미지 마스크와 결합하여 주문형 요소를 다시 닦을 수 있습니다.

이것이 어떻게 작동하는지 보여주기 위해, 파일로 관련 파일에 액세스하려면 (또한 파일이 오른쪽에서 쉽게 액세스 할 수 있는지 확인하십시오. 클라우드 스토리지 짐마자

01. 마스킹 CSS를 적용하십시오

An image showing three images of seascapes, awaiting the application of a CSS mask. — CSS 마스크가 발생하기 전에 이미지가 적용됩니다

작업자를 만들기 전에 로컬 서버를 설정하십시오. 그런 다음 각 이미지에 마스크를 설정해야합니다. CSS 속성은 필요합니다 마스크 - 이미지 , 그것은 여전히 크롬 접두사가 붙어 있습니다. 이것은 우리가 필요로하는 것을 의미합니다 WebKit. 접두사가 옆에 있습니다.

개방 스타일 / mask.css. 및 스타일을 업데이트하십시오 마스킹 수업. 효과의 일부는 사용자가 그 위에 올려 놓을 때 이미지를 완전히 공개하는 것입니다. 을 추가하다 창틀 해당 인스턴스의 요소에 맞춤 속성.

. 마스킹 된 {
  [...]
  -webkit-mask-image : 페인트 (마스크);
  마스크 이미지 : 페인트 (마스크);
}
.masked : hover, .masked : Focus {
  - 마스크 공개 : 사실;
}

02. 마스크 모양의 속성을 바르십시오

사용자 정의 속성은 API가 선택할 루트 요소에있을 필요가 없습니다. 페인터로 그린 요소에 적용 할 수 있으며, 이는 더 낮은 특이성을 가진 선택기를 무시합니다.

이제 우리는 특별한 것을 적용 할 것입니다 마스크 모양 사용자 정의 속성은 세 모양의 클래스입니다. 이것은 렌더링 할 작업을하는 작업자에게 알려줍니다.

 .Masked.Square {
  - 마스크 모양 : 광장;
}
.masked.circle {
  - 마스크 모양 : 서클;
}
.masked.Triangle {
  - 마스크 모양 : 삼각형;
}

03. 어떤 모양을 정의하십시오

열다 스크립트 / mask.js. ...에 이것은 이미 모양을 만들기 위해 일부 논리에서 이미 채워졌습니다. 우리는 여전히 우리가 쓴 수업과 함께 묶어야합니다.

그만큼 마스크 모양 사용자 정의 속성은 사용할 모양을 정의합니다. 우리는 원, 정사각형 또는 선택할 삼각형이 있습니다. 누군가가 다른 모양이나 모양을 선택하지 않으면 원형 모양으로 기본값으로 설정됩니다. CSS 포맷으로 남아있는 공간을 모두 자릅니다.

 = '원'으로 찍는 것;
if (properties.get ( 'mask-shape) & amp; & amp;
  [ '광장', '삼각형', '원']
  .includes (properties.get (
  '- 마스크 모양'). toString (). trim ())) {
  Shape = Properties.get (
  '- 마스크 모양'). toString (). trim (); }

04. 공개할지 여부를 결정하십시오

기본적으로 마스크는 정의 된 모양의 윤곽을 제공합니다. 사용자가 이들 중에 호버를 가져 가면 창틀 사용자 정의 속성은 사실이므로 모양을 채워야합니다.

사용자 정의 속성 유형은 이후 지점에서 오는 것입니다. 이는 현재 진실 값은 문자열로 전달됩니다. 문자열과 일치시키고 설정된 경우 새 변수를 설정하십시오.

 공개 = 거짓;
if (properties.get ( 'mask-loend') & amp; & amp;
  properties.get ( '- 마스크 - 공개')
  .ToString (). trim () == 'true') {
  공개 = 사실; }

05. 가장 작은 길이를 찾으십시오

마지막으로, 우리는 모양을 동등한 길이의 측면을 갖도록 원합니다. 즉, 이미지의 폭 또는 높이 중 가장 작은 부분을 찾아서 그 길이를 사용하여 도형을 계산해야합니다.

그를 정의하십시오 맥주 변수는 코드를 나머지 코드를 셰이프를 만드는 크기를 알려줍니다. 컨텍스트의 선 너비를이 크기의 비율로 설정하여 사물을 확장 할 수 있습니다.

 const maxlength =.
  math.min (geom.width, geom.height);
ctx.linewidth = maxlength / 25;

이 기사는 원래 크리에이티브 웹 디자인 잡지에 출판되었습니다. 웹 디자이너 ...에 웹 디자이너를 구독하십시오 ...에

더 많은 Houdini 트릭을 집어 들고 싶습니까?

An image of generate New York speaker Sam Richard, promoting his talk 'Design System Magic with Houdini'. Generate New York runs from April 24 - 25. — 웹 디자이너를위한 수상 경력이있는 컨퍼런스, 4 월 24 일부터 25 일까지 NYC로 돌아갑니다! 티켓을 예약하려면 이미지를 클릭하십시오

Houdini가 당신의 디자인에 더 많은 oomph를 추가 할 수있는 방법에 대해 더 많이 배우는 것에 관심이 있습니까? Google의 Enterprise Partner Englisher는 4 월 25 일에 뉴욕을 생성 할 수있는 Houdini와의 토크 디자인 시스템 마술을 제공 할 것입니다.이 방법은 일반적인 디자인 시스템 문제를 해결하고 유연성, 전력, 이러한 패턴의 성능 및 유지 보수성.

4 월 24 일부터 25 일까지 뉴욕을 창출합니다. 지금 티켓을 받으십시오 ...에!

관련 기사:

2019 년 뉴욕을 생성합니다
최고의 JavaScript Apis의 14.
2019 년 4 월 10 일 새로운 웹 디자인 도구

Houdini가있는 작업 이미지 마스크 마술

Houdini는 무엇을 할 수 있습니까?

Houdini를 사용하여 이미지 마스크를 재구성합니다

01. 마스킹 CSS를 적용하십시오

02. 마스크 모양의 속성을 바르십시오

03. 어떤 모양을 정의하십시오

04. 공개할지 여부를 결정하십시오

05. 가장 작은 길이를 찾으십시오

더 많은 Houdini 트릭을 집어 들고 싶습니까?

어떻게 - 가장 인기있는 기사

Adobe XD : 자동 애니메이션 기능 사용 방법

친 화성 디자이너 : 수출 인물 사용법

믿을만한 판타지 짐승을 디자인하는 방법

CSS 사용자 정의 특성에 대한 소개

3 단계에서 그림을 그리는 이사회 준비

DAZ Studio와 Zbrush 사이를 이동하는 방법

대화식 PDF에 비디오를 추가하는 방법

p5.js로 창의적인 코드 탐색

카테고리