어디서나 컬러 알파

이전 기사 인 "다른 수준의 사용자 정의 속성 사용"에서 HSL 색상 값의 분리를 과도하게 사용하는 색상 및 CSS 사용자 정의 속성과 관련된 시나리오에 대해 논의했습니다. 각 색상을 H, S 및 L 구성 요소로 완전히 분할하면 과도 할 수 있습니다.

그러나보다 실용적인 접근 방식은 이러한 분리를 포함합니다.

 <code>html { --color-1-hsl: 200deg 15% 73%; --color-1: hsl(var(--color-1-hsl)); }</code>

이것은 색상 당 두 가지 사용자 정의 속성을 사용합니다. 왜? 이것은 컬러 응용 프로그램을위한 간단한 방법을 제공 하고 쉽게 알파 투명도 조정을 허용하기 때문입니다.

 <code>.card { background: var(--color-1); } .card-with-alpha { background: hsl(var(--color-1-hsl) / 0.5); }</code>

표준 CSS에는 기존 색상에 알파를 추가하는 간단한 방법이 없습니다. 미래의 CSS 기능은 잠재적 인 솔루션을 제공합니다.

 <code>/* Future CSS! (currently works in Safari Technology Preview) */ .card-with-alpha { background: hsl(from var(--color-1) hsl / 0.5); }</code>

이것은 우아하지만 생산 준비는 확실하지 않습니다.

마찬가지로, Houdini 페인트 워크릿은 유망하지만 (Dave Rupert의 작품은 특히 주목할 만하다!) 광범위한 브라우저 지원이 부족하다 (Firefox 또는 Safari 지원은 아직 없음). 캔버스 API를 사용하여 알파로 이미지를 생성하여 모든 색 형식에 대한 알파 투명성을 효과적으로 가능하게하여 매력적인 솔루션을 제공합니다. 이것은 크롬에서 작동합니다. 코드와 비디오 데모는 Dave의 Github 및 블로그에서 제공됩니다.

이 기능을 요구하는 생산 준비 솔루션의 경우 초기 사용자 정의 속성 방법이 가장 안정적인 접근법입니다.

위 내용은 어디서나 컬러 알파의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!