변수 및 상대 색상 구문을 사용하여 CSS 색상 음영을 어떻게 만들 수 있습니까?

변수를 사용하여 CSS 색상 음영 만들기

새로운 상대 색상 구문을 통해 CSS 변수 내에서 Sass의 darken() 함수 기능을 구현하는 것이 가능합니다. .

원하는 형식을 사용하여 기본 색상 변수(--color-primary)를 정의합니다. 각 음영에 대해 hsl() 함수와 calc()를 사용하여 기본 색상의 밝기(l) 구성 요소를 조정합니다. 예를 들어, 5% 더 어두운 음영을 생성하려면:

--color-primary-darker: hsl(from var(--color-primary) h s calc(l - 5));

마찬가지로 10% 더 어두운 음영을 생성합니다:

--color-primary-darkest: hsl(from var(--color-primary) h s calc(l - 10));

요소의 배경에 --color-primary를 할당합니다. 그런 다음 --color-primary-darker 및 --color-primary-darkest를 hover, focus 및 활성 상태에 적용합니다.

.button {
  background: var(--color-primary);
}

.button:hover,
.button:focus {
  background: var(--color-primary-darker);
}

.button:active {
  background: var(--color-primary-darkest);
}

이 접근 방식은 색상 음영을 정의하는 데 유연성을 제공하고 프로세스를 단순화합니다. CSS 변수 시스템 내에서 일관된 색 구성표 만들기.

위 내용은 변수 및 상대 색상 구문을 사용하여 CSS 색상 음영을 어떻게 만들 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!