당신이보고있는 동안, CSS 그라디언트가 더 좋아졌습니다

CSS 그라디언트 개선 : 이중 위치 구문은 그라디언트 줄무늬를 단순화합니다.

Lea Verou의 conic-gradient () polyfill 함수 목록에는 내 관심을 끌었습니다.

듀얼 위치 구문을 지원합니다 (동일한 컬러 스톱 포인트는 동일한 색상의 2 개의 연속 컬러 스톱 포인트의 바로 가기로 두 개의 위치를 ​​사용합니다)

놀랍게도, 나는 최근에 대부분의 사람들이 그라디언트 스톱 포인트의 2 위치 구문이 실제로 사양에 존재한다는 것을 알지 못했기 때문에 기사를 작성하기로 결정했습니다.

사양에 따라 :

두 위치를 지정하면 색상을 두 번 반복하지 않고도 그라디언트에서 "줄무늬"를보다 쉽게 ​​만들 수 있습니다.

나는 이것이이 기능을 이해할 때 가장 먼저 떠오르는 것이라는 데 전적으로 동의합니다.

다음과 같은 결과를 얻고 싶다고 가정 해 봅시다. 같은 폭이 많은 세로 줄무늬가있는 그라디언트 (Chris의 이전 게시물에서 얻었습니다).

16 진수 값은 다음과 같습니다. #5461C8, #C724B1, #e4002b, #ff6900, #f6be00, #97d700, #00ab84 및 #00a3e0.

먼저 듀얼 스톱 포인트 위치를 사용하지 않고 CSS를 사용하여이를 달성하는 방법을 살펴 보겠습니다!

우리는 8 개의 줄무늬가 있으며, 각 줄무늬는 그라디언트 너비의 1/8을 차지합니다. 100%의 8 분의 1은 12.5%이므로 우리는 하나의 스트라이프에서 그 값의 배수로 다음 스트라이프로 전환합니다.

이것은 우리의 선형 gradient ()가 다음과 같습니다.

 <code>linear-gradient(90deg, #5461c8 12.5% /* 1*12.5% */, #c724b1 0, #c724b1 25% /* 2*12.5% */, #e4002b 0, #e4002b 37.5% /* 3*12.5% */, #ff6900 0, #ff6900 50% /* 4*12.5% */, #f6be00 0, #f6be00 62.5% /* 5*12.5% */, #97d700 0, #97d700 75% /* 6*12.5% */, #00ab84 0, #00ab84 87.5% /* 7*12.5% */, #00a3e0 0)</code>

정지 위치가 이전 위치보다 작을 때마다 자동으로 급격히 전환하기 때문에 정지 위치의 백분율 값을 반복 할 필요가 없습니다. 그렇기 때문에 항상 0을 사용하고 (항상 양수 값보다 낮습니다) #C724B1 25%, #e4002b 0을 사용하여 #C724B1 25%, #e4002b 25%를 사용할 수 있습니다. 우리가 두 개의 줄무늬를 추가하고 스톱 위치를 10%의 배수로 설정한다면, 앞으로 우리의 삶이 더 쉬워 질 수 있습니다.

특히 그라디언트 생성기가 일반적으로 생성하는 코드에 비해 나쁘지 않습니다. 그러나 중간에있는 줄무늬 중 하나가 다른 줄무늬와 일치하지 않다고 결정하면 다른 줄무늬로 변경하면 두 곳에서 업데이트되어야합니다.

다시 말하지만, 이것은 큰 문제가 아니며, 우리는 전처리 자의 도움없이 그것을 해결할 수 있습니다.

 <code>$c: #5461c8 #c724b1 #e4002b #ff6900 #f6be00 #97d700 #00ab84 #00a3e0; @function get-stops($c-list) { $s-list: (); $n: length($c-list); $u: 100%/$n; @for $i from 1 to $n { $s-list: $s-list, nth($c-list, $i) $i*$u, nth($c-list, $i 1) 0 } @return $s-list } .strip { background: linear-gradient(90deg, get-stops($c))) }</code>

이것은 이전에 본 정확한 CSS 구배를 생성 할 것이며 이제 더 이상 두 곳에서 수정할 필요가 없습니다.

코데 펜 데모

그러나 사전 처리기가 우리가 같은 것을 두 번 입력하지 못하도록하더라도 생성 된 코드의 중복을 제거하지는 않습니다.

그리고 우리는 항상 사전 처리기를 사용하고 싶지 않을 수도 있습니다. 일부 사람들은 완고하거나 전처리에 대한 비이성적 인 두려움이나 증오가 있다는 사실을 제외하고, 때로는 루프를 사용하는 것이 약간 어리석은 느낌입니다.

예를 들어, 우리가 루프 할 것이 거의 없을 때! 대각선 해시 패턴과 같은 더 간단한 배경 패턴을 얻고 싶다고 가정 해 봅시다. 이는 과도한 과도한 무지개 패턴보다 더 일반적이라고 생각합니다. 이는 대부분의 웹 사이트에 전혀 적합하지 않을 수 있습니다.

이를 위해서는 반복적 인 선형 그라디언트 ()를 사용해야합니다. 이는 이전과 마찬가지로 16 진수 값 목록이 매우 길지 않더라도 일부 복제가 필요하다는 것을 의미합니다.

 <code>repeating-linear-gradient(-45deg, #ccc /* can't skip this, repeating gradient won't work */, #ccc 2px, transparent 0, transparent 9px /* can't skip this either, tells where gradient repetition starts */)</code>

여기서 우리는 첫 번째와 마지막 스톱 포인트를 버릴 수 없습니다. 왜냐하면 이들은 배경 크기로 정의 된 사각형 내에서 그라디언트가 어떻게 반복되는지를 나타내는 것이기 때문입니다.

적절한 배경 크기와 결합하여 해당 해시를 만드는 일반 선형 등급 () 대신 반복 선형 그라디언트 ()를 사용하는 것이 더 나은 이유를 이해하려면 이전에 작성한 다른 게시물을 확인하십시오.

이 기능이 작동하는 곳입니다. 최종 CSS 코드의 복제를 피할 수 있습니다.

Rainbow Stripe 케이스의 경우 CSS가됩니다.

 <code>linear-gradient(90deg, #5461c8 12.5%, #c724b1 0 25%, #e4002b 0 37.5%, #ff6900 0 50%, #f6be00 0 62.5%, #97d700 0 75%, #00ab84 0 87.5%, #00a3e0 0)</code>

해시를 재현하려면 다음과 같습니다.

 <code>repeating-linear-gradient(-45deg, #ccc 0 2px, transparent 0 9px)</code>

코데 펜 데모

지원 상황은 어떻습니까? 아주 좋아, 당신은 바로 물었다! 실제로 아주 좋습니다! Safari, Chromium 브라우저 (Edge 포함!) 및 Firefox와 함께 작동합니다. 프리 크로 마움 에지 및 일부 모바일 브라우저는 여전히 가능한 방식 일 수 있지만 모든 브라우저에 대한 지원을 제공하거나 폴백 솔루션을 제공하는 것에 대해 걱정할 필요가 없다면 사용을 시작할 수 있습니다!

위 내용은 당신이보고있는 동안, CSS 그라디언트가 더 좋아졌습니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!