컨테이너 섀도우

컨테이너 그림자는 요소에 그림자를 표시하는 시각 효과입니다. 텍스트 요소를 선택하고 다음으로 이동하여 텍스트 그림자에 액세스할 수 있습니다. 스타일 패널 > 효과 > 컨테이너 섀도우.

이 가이드 전체에서 다음 내용을 확인할 수 있습니다.

1. 컨테이너 섀도우 전환을 생성하는 방법
2. 컨테이너 그림자 테두리를 만드는 방법

컨테이너 섀도우 전환을 만드는 방법

컨테이너 그림자 전환을 통합하는 기능이 있으므로 방문자가 요소와 상호 작용할 때 컨테이너 그림자가 시각적 표시를 변경합니다. 예를 들어 요소에 마우스를 올리면 컨테이너 그림자의 색조가 더 어두워지는 마우스 오버 효과를 구현할 수 있습니다.

1. 컨테이너 그림자 전환을 포함하려는 요소를 선택하세요.
2. 향하다 스타일 패널 > 효과 > 컨테이너 섀도우
3. 누르세요 "...을 더한컨테이너 섀도우를 삽입하는 ” 아이콘
4. 수정하다 색조 검정색으로 변경하고 20% 불투명도를 통합합니다.
5. 컨테이너 섀도우를 요소에 통합하여 검은색과 20% 불투명도로 디자인합니다.
6. 선택하다 호버 ~로부터 상태 드롭 다운 메뉴
7. 방문하다 스타일 패널 > 효과 > 컨테이너 섀도우
8. 컨테이너 섀도우를 55% 불투명도로 구성
9. 선택하다 없음 ~로부터 상태 드롭 다운 메뉴
10. 향하다 스타일 패널 > 효과 > 전환
11. “를 클릭하세요....을 더한전환을 삽입하려면 ” 아이콘을 클릭하세요.
12. 선택하다 컨테이너 섀도우 ~로부터 유형 드롭 다운 메뉴
13. 설립하다 지속 또는 기본 200ms로 유지하세요.

전환을 적용하면 호버 효과가 원활하게 전환됩니다. 없음 주와 호버 상태. 200ms 전환이 없으면 호버 효과가 다른 불투명도 수준 간에 갑자기 이동합니다.

컨테이너 그림자 테두리를 만드는 방법

단일 요소에 여러 컨테이너 그림자를 적용하여 뚜렷한 시각적 효과를 생성할 수 있습니다. 다음은 여러 컨테이너 그림자를 활용하여 미묘한 테두리와 그림자를 만드는 예입니다.

1. 컨테이너 그림자 전환을 포함하려는 요소를 선택하세요.
2. 이동 스타일 패널 > 효과 > 컨테이너 섀도우
3. 을 치다 "...을 더한컨테이너 섀도우를 삽입하는 ” 아이콘
4. 선택하다 밖의 으로 유형
5. 조정하다 엑스 그리고 와이 선호도에 따른 가치
6. 세트 흐림 0px로
7. 세트 크기 1px로
8. 세트 색상 rgba(0,0,0,0.1) - 10% 불투명도의 검정색
9. 그림자의 색조를 rgba(0, 0, 0, 0.1)로 조정합니다(즉, 불투명도가 10%인 검정색).
10. 방문하다 스타일 패널 > 효과 > 컨테이너 섀도우
11. 누르세요 "...을 더한다른 컨테이너 섀도우를 삽입하는 ” 아이콘
12. 세트 흐림 8px로
13. 수정하다 엑스 그리고 와이 선호도에 따른 가치
14. 세트 색상 rgba(0, 0, 0, 0.1)로