웹이 계속 발전함에 따라 아름다운 UI를 만드는 것은 웹사이트에서 고객 참여를 높이는 가장 중요한 작업 중 하나입니다. 프런트 엔드의 모양을 개선하는 한 가지 방법은 CSS에 그라데이션 그림자를 적용하는 것입니다. 그라디언트 음영을 적용하는 가장 중요한 두 가지 방법은 선형 그라디언트와 방사형 그라디언트입니다.
그라디언트 그림자를 사용하면 특정 정보에 사용자의 주의를 끌거나, 호버 또는 포커스 효과를 적용하거나, 웹 사이트에 Web3 모양과 느낌을 줄 수 있습니다. 이 튜토리얼에서는 실제 사례를 통해 두 가지 그라데이션 음영을 분석합니다.
효과를 달성하기 위해 두 가지 중요한 CSS 개념을 사용합니다. 하나는 필터 속성이고 다른 하나는 ::after 의사 클래스입니다. 의사 클래스는 가짜 배경을 만드는 데 사용되고, 필터 속성은 주변 배경에 흐림 효과를 적용하는 데 사용됩니다.
이 예에서는 카드에 선형 그래디언트 그림자 효과를 적용하는 방법을 살펴보겠습니다.
이 중 classname은 해당 label에 할당된 클래스를 의미하며, 방향 속성은 색상의 선형 배열을 어느 방향으로 배열해야 하는지 나타냅니다. 이는 "deg"로 제공되거나 미리 디자인된 문자열(예: "to right")을 사용하여 제공될 수 있습니다.
1단계: 웹사이트의 HTML 문서 뼈대를 만들고 그라데이션 효과가 필요한 태그의 클래스 이름을 지정합니다.
2단계: 태그에 할당된 클래스 이름과 동일한 클래스 이름을 가진 ::after 가상 클래스를 사용합니다.
3단계: Linear−gradient() CSS 함수를 사용하여 의사 클래스의 배경을 원하는 그라데이션 색상으로 채웁니다.
4단계: 의사 클래스가 원래 클래스에 겹쳐지지 않도록 하려면 원래 클래스에 할당된 값보다 낮은 값을 사용하여 의사 클래스에 z−index 속성을 추가하세요.
5단계: 원래 클래스가 배경을 완전히 덮지 않도록 의사 클래스에 약간의 삽입 속성을 추가합니다.
6단계: 마지막으로 그라데이션 그림자 효과를 적용하고 의사 구성 요소에 흐림 효과를 적용합니다.
이 예에서는 동일한 카드 효과에 방사형 그라데이션 그림자 효과를 적용하고 변경 사항을 관찰하는 방법을 살펴보겠습니다.
1단계: 웹사이트의 HTML 문서 뼈대를 만들고 그라데이션 효과가 필요한 태그의 클래스 이름을 지정합니다.
2단계: 태그에 할당된 클래스 이름과 동일한 클래스 이름을 가진 ::after 가상 클래스를 사용합니다.
3단계: Radial−gradient() CSS 함수를 사용하여 의사 클래스의 배경을 원하는 그라데이션 색상으로 채웁니다.
4단계: 의사 클래스가 원래 클래스에 겹쳐지지 않도록 하려면 원래 클래스에 할당된 값보다 낮은 값을 사용하여 의사 클래스에 z−index 속성을 추가하세요.
5단계: 원래 클래스가 배경을 완전히 덮지 않도록 의사 클래스에 약간의 삽입 속성을 추가합니다.
6단계: 마지막으로 그라데이션 그림자 효과를 적용하고 의사 구성 요소에 흐림 효과를 적용합니다.
방사형 그라데이션 색상은 라벨 중앙에서 시작되며, 위 예시에서 볼 수 있듯이 노란색은 검정색 배경에 완전히 겹쳐져 있고, 카드 측면 중앙에는 빨간색 흔적이 일부 발견됩니다. 반면에 선형 그래디언트에서는 제공된 방향에 따라 모든 색상을 모든 가장자리에 고르게 분포하므로 오버레이가 관찰되지 않습니다.
삽입 및 흐림 값을 조정하여 그라디언트 효과가 적용되는 영역을 늘리거나 줄일 수도 있습니다. 음수 값이 많을수록 그라디언트가 더 두드러지고 흐림 값이 높을수록 효과가 측면으로 더 퍼집니다.
위 내용은 CSS를 사용하여 그라데이션 그림자를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
