원뿔 구배로 단순화 된 배경 패턴

Firefox는 이제 원추형 구배를 지원합니다! 이 기사는 원추형 구배를 사용하여 배경 패턴을 단순화하는 방법을 보여줍니다.

Firefox 75에서 시작하여 원추형 구배를 활성화 할 수 있습니다. 방법은 about:config , layout.css.conic-gradient.enabled 플래그를 찾아 값을 true 로 설정합니다 (기본값은 false , Double Click to Switch). 활성화되면 Firefox에서 원추형 구배로 CSS를 테스트 할 수 있습니다.

이 기사의 일부 예는 Polyfill과 함께 제대로 작동하지만 일부는 원추형 구배에서 CSS 변수를 사용 하므로이 기능을 기본적으로 지원해야합니다.

원추형 구배의 주요 장점은 배경 패턴을 단순화하는 능력입니다. 10 년 전에 Lea Verou가 만든 선형 그라디언트 패턴 라이브러리의 몇 가지 예를 살펴보고 원뿔형 구배로 단순화하는 방법을 살펴 보겠습니다.

피라미드 패턴

원래 패턴은 4 개의 선형 구배를 사용합니다.

 배경:
  선형 그레이드 (315deg, 투명한 75%, #d45d55 0) -10px 0,
  선형 그레이드 (45deg, 투명한 75%, #d45d55 0) -10px 0,
  Linear-Gradient (135deg, #A7332b 50%, 투명 0) 0 0,
  선형 등급 (45deg, #6a201b 50%, #561a16 0) 0 0 #561a16;
배경 크기 : 20px 20px;

코드는 길고 이해하기 어렵습니다. 원뿔형 구배를 사용하면 하나의 배경 레이어만으로 동일한 효과를 얻을 수 있습니다.

 $ S : 20px;
배경:
  Conic-gradient (45deg, 
    #561A16 25%, 
    #6A201B 0% 50%, 
    #A7332B 0% 75%, 
    #d45d55 0%) 
    50%/ #{$ s $ s};

코드는 더 간결하고 볼륨은 260 바이트에서 103 바이트로 줄어 듭니다.

체스 보드 패턴

원래 패턴은 두 개의 선형 구배를 사용합니다.

 배경색 : #eee;
배경 이미지 :
  선형 그레이드 (45deg, 검은 25%, 투명 25%, 
    투명한 75%, 검은 색 75%, 검은 색),
  선형 그레이드 (45deg, 검은 25%, 투명 25%, 
    투명한 75%, 검은 색 75%, 검은 색);
배경 크기 : 60px 60px;
배경 위치 : 0 0, 30px 30px;

원추형 구배로 단순화 한 후 :

 $ S : 60px;
배경:
  반복적 인 등급 ( #000 0% 25%, #eee 0% 50%) 
    50%/ #{$ s $ s};

코드 볼륨은 263 바이트에서 73 바이트로 감소하여 70%이상 감소했습니다.

대각선 체스 보드 패턴

원래 패턴은 두 가지 선형 구배를 사용합니다.

 배경색 : #eee;
배경 이미지 : 
  선형 그레이드 (45deg, 검은 25%, 투명 25%, 
    투명한 75%, 검은 색 75%, 검은 색),
  선형 그레이드 (-45deg, 검은 25%, 투명 25%, 
    투명한 75%, 검은 색 75%, 검은 색);
배경 크기 : 60px 60px;

원추형 구배로 단순화 한 후 :

 $ S : 60px;
배경:
  반복적 인 학년 (45deg, 
    #000 0% 25%, #eee 0% 50%) 
  50%/ #{$ s $ s};

코드 볼륨은 229 바이트에서 83 바이트로 감소하여 거의 3 분의 2가 감소했습니다.

반 다이아몬드 패턴

원래 패턴은 4 개의 선형 구배를 사용합니다. (원래 코드와 자세한 설명은 여기서 생략되며 핵심 결론은 보존됩니다)

원뿔 구배로 단순화 한 후, 코드 볼륨은 343 바이트에서 157 바이트로 감소합니다.

추가 예 : 교차 라인 배경

원추형 구배는 또한 여러 선형 그라디언트에 의해 원래 달성하는 데 필요한 효과를 쉽게 달성 할 수 있습니다. (자세한 설명은 여기에서 생략되며 핵심 결론은 유지됩니다)

요약하면, 원추형 구배는 CSS 배경 패턴 코드를 크게 단순화하여 코드 가독성 및 효율성을 향상시킬 수 있습니다.

위 내용은 원뿔 구배로 단순화 된 배경 패턴의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!