영향

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

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%는 전체적으로 세피아 톤입니다.