그림자 효과는 웹 페이지에서 렌더링할 때 선택한 HTML 요소 뒤에 그림자를 떨어뜨리거나 추가하는 효과입니다. 이 효과는 ' 그림자() ” CSS에 대한 값으로 메서드 “ 필터 ” 재산 또는 “ 상자 그림자 ' 재산. 'box-shadow' 속성을 활용하여 특정 대상 HTML 요소에 시각적 향상, 사용자 경험, 강조 및 초점을 그릴 수 있습니다.
이 가이드는 box-shadow 속성을 사용하여 그림자 효과를 만드는 절차를 보여줍니다.
-
- box-shadow 속성을 사용하여 단색 그림자 만들기
- box-shadow 속성을 사용하여 흐릿한 그림자 만들기
- 그림자 영역 확장
box-shadow 속성을 사용하여 CSS3에서 그림자를 만드는 방법은 무엇입니까?
“ 상자 그림자 ” 속성을 사용하면 개발자가 페이지에서 요소의 상대적 위치를 표시하여 시각적 계층 구조를 설정할 수 있습니다. 이를 사용하여 웹 페이지 제작자는 개체가 표면에 그림자를 드리우는 환상을 만들어 요소에 보다 상호 작용적인 느낌을 줄 수 있습니다.
통사론
'box-shadow' 속성의 구문은 다음과 같습니다.
상자 그림자: [ 수평 오프셋 ] [ 수직 오프셋 ] [ 흐림 반경 ] [ 확산 반경 ] [ 색상 ] ;
위의 구문에 사용된 용어에 대한 설명:
-
- 처음에는 “ 수평 오프셋 ”는 X축 위치를 검색/저장하고, “ 부정적인 ” 값은 그림자를 왼쪽으로 설정하고 그 반대도 마찬가지입니다.
- “ 수직 오프셋 ” 값은 Y축 위치를 저장하고, “ 긍정적인 ” 값은 아래 방향으로 그림자를 설정하고 “ 부정적인 ' 값.
- 다음으로 “ 흐림 반경 ” 값은 이름에서와 같이 그림자의 흐릿함을 설정합니다.
- “ 확산 반경 ” 값은 그림자가 확장되어야 하는 반경을 지정합니다.
- “ 색상 '는 그림자 색상을 설정하며 ' HSL ' 또는 ' RGB ” 형식도 마찬가지입니다.
이제 더 나은 이해를 위해 몇 가지 예를 살펴보겠습니다.
예제 1: box-shadow 속성을 사용하여 단색 그림자 적용
단색 그림자 설정은 방향과 그림자 색상만 ' 상자 그림자 ' 재산:
< 스타일 >.boxShadow예제 {
너비: 210px;
테두리: 2px 솔리드 콘실크;
높이: 210px;
배경색: #f0f0f0;
상자 그림자: 10px 10px forestgreen;
}
스타일 >
위의 코드에서:
-
- 먼저 ' 클래스가 있는 HTML 요소가 선택됩니다. 상자그림자예제 '. 그리고 '의 값 210픽셀 '가 '에 제공됩니다. 키 ' 그리고 ' 너비 ' 속성. 또한 ' 국경 ' 그리고 ' 배경색 더 나은 시각화를 위한 속성.
- 다음으로 '의 값을 설정합니다. 10px 10px 포레스트그린 ' 로 ' 상자 그림자 ” CSS 속성. “ 10px ”는 그림자를 적용해야 하는 위치를 결정하는 수평 및 수직 오프셋입니다. 그리고 ' 포레스트그린 '는 그림자의 색상입니다.
컴파일 후 웹 페이지는 다음과 같이 나타납니다.
출력은 box-shadow 속성을 사용하여 단색 유형의 그림자가 배치되었음을 확인합니다.
예제 2: box-shadow 속성을 사용하여 흐릿한 그림자 적용
이미 적용된 그림자를 흐릿하게 만들기 위해 ' 상자 그림자 ' 재산. 아래 업데이트된 코드를 방문하십시오.
< 스타일 >.boxShadow예제 {
너비: 210px;
테두리: 2px 솔리드 콘실크;
높이: 210px;
배경색: 화이트스모크;
상자 그림자: 10px 10px 15px 포레스트그린;
}
스타일 >
위의 코드에 따르면 그림자는 이제 ' 15픽셀 흐려. 컴파일 단계가 끝나면 웹 페이지는 다음과 같이 보입니다.
위의 그림은 이제 그림자가 흐릿함을 보여줍니다.
예 3: 그림자 영역 확장
스프레드 값은 “ 상자 그림자 ” 그림자 영역을 확장하기 위한 속성입니다. 스프레드 값은 숫자 형식이어야 합니다. 아래 코드 스니펫과 같이 그림자 영역이 ' 20픽셀 ”:
< 스타일 >.boxShadow예제 {
너비: 210px;
테두리: 2px 솔리드 콘실크;
높이: 210px;
배경색: 화이트스모크;
상자 그림자: 10px 10px 15px 20px forestgreen;
}
스타일 >
실행 후 그림자는 이제 다음과 같이 나타납니다.
보시다시피 그림자 영역이 이제 20px 증가했습니다.
결론
“ 상자 그림자 ” 재산은 “ 그림자 ” 선택한 HTML 요소에 대한 효과. “ 그림자 ' 속성은 다섯 가지 값을 허용합니다. ' 수평 오프셋 ”, “ 수직 오프셋 ”, “ 흐림 반경 ”, “ 확산 반경 ' 그리고 ' 색상 '. '수평 오프셋' 및 '수직 오프셋' 값은 그림자가 나타나야 하는 위치에서 그림자의 치수를 설정합니다. '흐림 반경' 값은 그림자를 흐리게 만들고 '확산 반경' 값은 그림자 영역을 확장합니다.