영향

필터, 불투명도, 변형 및 기타 효과를 적용하여 요소의 상호작용성을 향상합니다.

이 교육 세션에서는 다음에 대한 지식을 얻게 됩니다.

  1. 혼입
  2. 반투명
  3. 국경
  4. 숨겨진 상자
  5. 2D 및 3D 변환
  6. 변경 사항
  7. 흡수체
  8. 배경 체
  9. 바늘
  10. 발생
내부자 힌트: 호버링 단계나 설정 메뉴의 다른 단계에서 이러한 영향의 대부분을 구현할 수 있습니다. 다양한 단계에 대한 영향 구성에 대해 자세히 알아보세요.

혼입

Webflow의 혼합 방법은 엔터티가 다른 기본 요소와 혼합(또는 중첩)될 수 있는 다양한 고유한 접근 방식을 제공합니다. 모두 사용자 정의 코드가 필요하지 않습니다. Webflow는 혼합 혼합 모드 CSS 기능을 관리하여 엔터티의 콘텐츠가 상위 콘텐츠 및 엔터티의 배경과 혼합되는 방식을 정의하는 기능을 제공합니다. 혼합 모드는 요소에 대한 단순한 투명도 조정을 뛰어넘는 수많은 창의적인 가능성을 보여줍니다.

16가지 믹싱 모드가 있습니다. 유사하게 작동하는 모드는 믹서 드롭다운에 서로 가깝게 그룹화되어 있습니다. 이러한 모드 그룹은 다음으로 구성됩니다.

  • 일반 모드(일반)
  • 디밍 모드(Dim, Multiply 및 Color scald)
  • 밝기 모드(밝게, 화면 및 색상 닷지)
  • 스타크 모드(오버레이, 소프트 라이트, 하드 라이트)
  • 상대 모드(차이 및 제외)
  • 통합 모드(색조, 채도, 색상 및 광도)

각 믹싱 모드의 샘플을 보고 해당 애플리케이션에 대해 자세히 알아보려면 믹싱 모드 튜토리얼을 살펴보세요.

반투명

엔터티와 그 자손의 투명도를 수정하려면 충격 설정 내에서 반투명도를 변경하세요. 입력 영역에 값을 입력하거나 반투명 슬라이더를 원하는 설정으로 이동하여 반투명을 조정할 수 있습니다.

반투명 값은 백분율로 정의됩니다. 100%는 불투명함을 나타내고, 0은 완전한 투명함을 나타냅니다.

국경

테두리는 웹 사이트 방문자가 키보드를 사용하여 대화형 구성 요소를 탐색할 때 디자인을 탐색하는 데 도움을 주기 위한 것입니다. 엔터티를 둘러싼 테두리는 방문자가 어떤 요소와 상호 작용하고 있는지, 즉 관심이 집중되어 있는 특정 요소가 무엇인지 명확하게 보여줍니다. 키보드에서 Tab을 다시 누르면 새로 초점이 맞춰진 다음 요소 주위에 테두리가 나타납니다.

따라서 테두리를 추가하는 것이 중요합니다. 가운데 맞춤(키보드) 상태 또는 가운데 맞춤 구성 요소의 상태.

테두리 설정에서 다음 속성을 제어할 수 있습니다.

  • 설계 - 요소를 둘러싸는 테두리 유형(예: 실선, 점선, 점선)을 지정합니다.
  • 너비 — 테두리의 두께를 지정합니다. 이 그림은 단위 드롭다운에서 사용 가능한 세트의 CSS 단위를 채택할 수 있습니다.
  • 여유 — 테두리와 요소의 가장자리 또는 테두리 사이의 공간을 지정합니다. 이 그림은 단위 드롭다운에서 사용 가능한 세트의 CSS 단위를 채택할 수 있습니다.
  • 색상 — 테두리 색상을 지정합니다.

입력 값과 단위에 대한 추가 정보를 탐색할 수 있습니다.

중대한: 테두리 스타일을 제거하고 기본 브라우저 구성으로 되돌리려는 경우 테두리 스타일에 대해 "없음"을 선택하는 것이 매력적으로 보일 수 있지만 이 작업을 수행하면 설정된 다른 속성(예: 너비, 여백 또는 색상)이 지워지지 않는다는 점을 명심하십시오. 국경이 완전히 사라지게 되어 접근이 불가능해지고 사용자 경험이 저하됩니다.

국경에 관한 가이드를 살펴보세요.

숨겨진 상자

숨겨진 상자에는 요소의 직사각형 경계 외부 또는 내부 장식이 포함됩니다. 버튼, 세그먼트, div 블록 또는 사이트의 기타 요소에 관심을 집중시키거나 깊이를 전달하는 데 사용할 수 있습니다.

다음으로 이동하여 요소 외부 레이어에 그림자 상자를 적용하거나 여러 그림자를 형성할 수 있습니다. 디자인 패널 > 효과 > 숨겨진 상자.

그림자의 유형, 수평 거리, 수직 거리, 흐림, 퍼짐, 색상을 개인화할 수 있습니다.

스태킹

디자인 패널에서 대부분의 효과에 대해 여러 레이어를 포함할 수 있습니다. 예를 들어 요소에 여러 그림자를 추가하고 레이어할 수 있습니다.

충격 설정에서 '를 선택하여 각 레이어의 가시성을 전환할 수 있습니다." 아이콘을 선택하고 "를 선택하여 각 레이어를 제거합니다.쓰레기” 아이콘입니다. 각 충격의 순서를 수정하려면 순서를 바꾸려는 레이어를 선택하고 원하는 번호로 드래그하면 됩니다.

귀하는 숨겨진 상자 설정에서 다음 속성에 대한 권한을 갖습니다.

  • 친절한 — 요소 경계 내부 또는 외부에 그림자를 적용합니다.
  • 수평의 —그림자의 수평 거리
  • 수직의 —그림자의 수직 거리
  • 흐림 — 그림자 흐림의 선명도에 영향을 미칩니다.
  • 확산 — 그림자가 있는 요소의 경계를 기준으로 그림자의 확장을 지정합니다.
  • 색상 —그림자의 색상과 불투명도를 변경합니다.

입력 값과 단위에 대한 더 깊은 통찰력을 얻으세요.

중대한: 애니메이션 흐림 효과는 속도가 느려지므로 권장되지 않습니다.

2D 및 3D 변경

다음의 변경 사항을 통합할 수 있습니다. 디자인 패널 > 영향 > 2D 및 3D 변경 호버링과 같은 개별 단계에 걸쳐 요소의 모양과 위치를 조작합니다.

변경에는 네 가지 범주가 있습니다.

  1. 옮기다
  2. 크기 조정
  3. 회전
  4. 기대다

옆에 있는 줄임표를 탭하세요. 2D 및 3D 변경 도달하기 위해 변경 설정 변환 원점, 뒷면 가시성, 자기 관점 및 하위 관점을 미세 조정합니다.

스태킹 효과와 유사하게 이전 설정을 그대로 유지하면서 여러 유형의 변경을 도입할 수 있습니다. “를 클릭하세요....을 더한” 아이콘을 클릭하여 추가 변환을 추가합니다.  

변경에 대한 추가 통찰력을 탐색할 수 있습니다.

변경 사항

수정을 통해 요소의 다양한 상태 간에 부드러운 애니메이션이 생성됩니다. 기간과 완화 유형을 맞춤화하여 뚜렷한 변경을 생성할 수 있습니다. 수정의 일반적인 용도 중 하나는 요소의 호버 상태가 호버 시 갑작스러운 이동을 겪지 않도록 보장하는 것입니다.

기본적으로 수정 사항은 없음으로 설정되어 모든 상태에 자동으로 적용됩니다. 모든 주에 걸쳐 설정된 모든 속성/스타일에 대한 수정이 포함되어야 합니다.

수정 사항을 작성하려면 다음으로 이동하십시오. 디자인 패널 > 영향 > 변경 사항, '를 탭하세요....을 더한” 아이콘을 클릭하고 다음 속성을 지정합니다.

  • 유형 — 수정의 영향을 받는 속성 유형
  • 지속 — 수정 기간을 밀리초(ms) 단위로 규정합니다. 슬라이더를 사용하거나 입력 영역에 지속 시간 값을 입력하여 사전 설정된 지속 시간(200ms)을 조정할 수 있습니다.
  • 완화 —수정의 속도를 결정합니다. 값을 삽입하거나 이징 편집기를 활성화하여 사전 설정을 미리 보거나 고유한 이징 효과를 고안할 수 있습니다.

체는 요소에 독점적인 시각적 효과를 적용합니다. 호버 상태에 대한 변경을 트리거할 수도 있습니다. 이미지, 배경 비디오 또는 기타 요소에 체를 통합할 수 있습니다. 체는 자손을 포함하여 전체 요소의 모양을 변경합니다.

체를 통합하려면 다음을 방문하세요. 디자인 패널 > 영향 > , '를 탭하세요....을 더한” 아이콘을 클릭하고 드롭다운 메뉴에서 체 효과를 선택하세요. 

  • 블러링 - 요소의 내용을 흐리게 합니다. 흐림 반경 값이 증가하면 흐림 수준이 증폭됩니다. 0은 효과를 생성하지 않습니다.
  • 번개- 0~200% 범위의 밝기 수준을 나타냅니다. 100% 값은 요소를 초기 밝기로 되돌립니다.
  • 차이 —0과 200% 사이의 대비 수준을 나타냅니다. 100% 값은 대비를 원래 상태로 재설정합니다.
  • 색조 변화 —이미지 또는 요소의 색상/색조를 조정합니다. 값은 각도로 측정됩니다. 값이 0 또는 360이면 원래 색상이 복원됩니다. 방향 다이얼의 점과 상호 작용하거나, 다이얼의 아무 곳이나 클릭하여 각도를 설정하거나, 화살표를 사용하여 시계 방향 또는 시계 반대 방향으로 45도씩 회전하거나, 입력 필드에 원하는 각도를 입력하여 색조를 수정할 수 있습니다.
  • 채도 - 0%에서 200%까지 색상 강도를 결정합니다. 100% 값은 원래 채도로 돌아갑니다.
  • 그레이스케일 - 모든 색상을 회색조로 변환합니다. 0%는 원본 이미지를 표시하고 100%는 완전히 회색조로 만듭니다.
  • 거꾸로 하다 - 요소의 모든 색상을 반전시킵니다. 0% 값은 원본 이미지를 표시하고 100% 값은 색상을 완전히 반전시킵니다.
  • 세피아 - 이미지나 요소에 빈티지한 노란색 모양을 적용합니다. 0%는 원본 이미지를 나타내고, 100%는 전체적으로 세피아 톤입니다.

중요한: 애니메이션 블러를 사용하면 성능이 크게 저하될 수 있으므로 사용하지 마세요.

적용하거나 조정하는 모든 필터는 캔버스에 표시됩니다. 단일 요소에 여러 필터를 추가하고 필터 설정에서 가시성과 우선순위를 전환할 수 있습니다.

배경화면 필터링

요소에 배경화면 필터를 적용하면 요소 경계 내의 투명한 영역에 필터 효과(예: 흐림, 색상 변화, 대비)를 구현할 수 있습니다. 투명한 영역을 사용하면 요소 뒤의 콘텐츠가 배경화면 필터의 영향을 받을 수 있습니다.

단일 요소에 여러 배경화면 필터를 겹쳐서 결합하여 다양한 시각 효과를 만들 수 있습니다.

유용한 팁: 배경화면 필터는 요소 뒤에 있는 모든 것에 영향을 미치므로 효과를 관찰하려면 요소, 해당 부분 또는 배경에 투명도를 도입해야 합니다.

배경화면 필터 목록에는 유사한 동작을 함께 그룹화하는 8개의 배경화면 필터가 있습니다. 이러한 그룹화된 필터에는 다음이 포함됩니다.

  • 전역(흐림)
  • 색상 교정(밝기, 대비, 색조 변화, 채도)
  • 색상 향상(회색조, 반전, 세피아)

각 배경 필터에 대한 데모와 해당 응용 프로그램에 대한 자세한 지침을 보려면 배경 필터에 대한 가이드를 참조하세요.

마우스 포인터

웹페이지를 탐색하는 동안 예상되는 상호 작용을 사용자에게 안내하려면 적절한 커서를 선택하는 것이 필수적입니다. 일치하지 않는 커서 스타일은 혼란을 야기하거나 아무런 조치도 취하지 않을 수 있습니다.

기본 커서 설정은 '자동'이며, 브라우저 설정에 정의된 특정 요소 유형을 기반으로 기본 커서를 표시합니다. 예를 들어 링크 위에 마우스를 올리면 포인터 커서가 트리거되고 텍스트에는 텍스트 커서가 표시됩니다.

대부분의 시나리오에서는 브라우저가 적절한 커서를 결정할 수 있도록 기본 설정을 유지하는 것이 좋습니다. 그러나 커서 값을 조정하여 기본 커서를 무시할 수 있습니다. 스타일 패널 > 효과 > 커서.

미리보기 모드에서 스타일이 지정된 요소 위로 마우스를 가져가면 커서 동작을 미리 볼 수 있습니다.

대응 조치

포인터 이벤트는 클릭과 터치에 반응하는 요소에 대한 제어를 제공하며, 특히 겹치는 요소(예: 텍스트와 아이콘이 겹치는 배경 비디오) 또는 대화형 호버 효과나 도구 설명이 있는 디자인에 대한 상호 작용을 관리하는 데 유용합니다.

기본 포인터 이벤트 값은 'auto'이며 표준 클릭 및 터치 상호 작용을 용이하게 합니다. 값을 '없음'으로 전환하면 선택한 요소에 대한 모든 클릭 및 터치 상호 작용이 비활성화됩니다. 스타일 패널 > 효과 > 이벤트.

포인터 이벤트에 대해 자세히 알아보세요.

이완 막
Ewan Mak의 최신 게시물 (모두 보기)