👩🏻‍🍳 👩‍👩‍👦‍👦 🎍 使用渐变色渐变简化背景图案 👨🏻‍⚕️ 🧜🏼 ♑️

创建重复背景图案的一种众所周知的方法是使用

线性渐变。但是，如果用于相同目的conic-gradient()，则需要的CSS会大大减少。本文从Leah Veru画廊获得的几个示例说明了锥形渐变的这一优势。

我们必须考虑

金字塔装饰，
,
,
,
.

, Firefox .

75 Firefox, 7 , , about:config, layout.css.conic-gradient.enabled true. — false, .

Firefox 75+

, CSS , Firefox.

. CSS-, .

, , . , 10 linear-gradient(), , , .

background:
  linear-gradient(315deg, transparent 75%, #d45d55 0) -10px 0,
  linear-gradient(45deg, transparent 75%, #d45d55 0) -10px 0,
  linear-gradient(135deg, #a7332b 50%, transparent 0) 0 0,
  linear-gradient(45deg, #6a201b 50%, #561a16 0) 0 0 #561a16;
background-size: 20px 20px;

CSS, , , . , . , , , , CSS, . , , , , -, , -, .

CSS- conic-gradient() . , !

, background-size, . , , , , . .

, , 12, . 45° , , (25%) .

25% , 45°. .

, :

$s: 20px;
background:
  conic-gradient(from 45deg, 
    #561a16 25%, 
    #6a201b 0% 50%, 
    #a7332b 0% 75%, 
    #d45d55 0%) 
    50%/ #{$s $s};

CSS , 103 260. , , .

, .

CodePen:

background-color: #eee;
background-image:
  linear-gradient(45deg, black 25%, transparent 25%, 
    transparent 75%, black 75%, black),
  linear-gradient(45deg, black 25%, transparent 25%, 
    transparent 75%, black 75%, black);
background-size: 60px 60px;
background-position: 0 0, 30px 30px;

, CSS, .

, , , background-size.

, - , , , , 12. , — -, : - .

, 25%, . 50% . C. .

0 100% , repeating-conic-gradient(). 76 CSS 263, 70%:

$s: 60px;
background:
  repeating-conic-gradient(#000 0% 25%, #eee 0% 50%) 
    50%/ #{$s $s};

CodePen:

background-color: #eee;
background-image: 
  linear-gradient(45deg, black 25%, transparent 25%, 
    transparent 75%, black 75%, black),
  linear-gradient(-45deg, black 25%, transparent 25%, 
    transparent 75%, black 75%, black);
background-size: 60px 60px;

, :

, . , , 45° .

, , :

, , .

, :

b$s: 60px;
background:
  repeating-conic-gradient(from 45deg, 
    #000 0% 25%, #eee 0% 50%) 
  50%/ #{$s $s};

CodePen:

, : 83 SS 229.

( )

background: #36c;
background:
  linear-gradient(115deg, transparent 75%, rgba(255,255,255,.8) 75%) 0 0,
  linear-gradient(245deg, transparent 75%, rgba(255,255,255,.8) 75%) 0 0,
  linear-gradient(115deg, transparent 75%, rgba(255,255,255,.8) 75%) 7px -15px,
  linear-gradient(245deg, transparent 75%, rgba(255,255,255,.8) 75%) 7px -15px,
  #36c;
background-size: 15px 30px;

, , .

, : , . , , . :

, . , , , .

, . , . β. . .

, β. ( ) α, ( ) — 2·α. ( ) , 180° (50%) . ( ) 180° + α, ( ) — 180° + 2·α, .

α β ()

, , :

tan(α) = (.5·h)/(.5·w) = h/w;

(w) (h) , α β:

α = atan(h/w)
β = 90° - α

, :

$w: 15px;
$h: 30px;
$a: atan($h/$w)*180deg/pi();
$b: 90deg - $a;
$c0: #36c;
$c1: #d6e0f5;

html {
  background: 
    conic-gradient(from $b, 
      $c1 0% $a, 
      $c0 0% 2*$a, 
      $c1 0% 50%, 
      $c0 0% 180deg + $a, 
      $c1 0% 180deg + 2*$a, 
      $c0 0%) 
    0 0/ #{$w $h};
}

, 157 CSS 343. :

, , Sass-.

, 2*$a 50% (180deg) $a, , $a 60deg, . CSS 100 :

$a: 60deg;
$b: 90deg - $a;
$w: 15px;
$h: $w*tan($a);
$c0: #36c;
$c1: #d6e0f5;

html {
  background: 
    repeating-conic-gradient(from $b, 
      $c1 0% $a, $c0 0% 2*$a) 
    0 0/ #{$w $h}
}

:

, , , , , , .

, , , background.

(x,y). β, , . , α, 50% (180°) 180° + α.

, , CSS-:

.panel {
  background: 
    conic-gradient(from var(--b) at var(--xy), 
      var(--c0) var(--a), var(--c1) 0% 50%, 
      var(--c2) 0% calc(180deg + var(--a)), var(--c3) 0%);
}

(--xy), (--b), (--a) --c0 --c3.

.panel {
  /* same as before */
  
  &:nth-child(1) {
    --xy: 80% 65%; 
    --b: 31deg;
    --a: 121deg; 
    --c0: #be5128;
    --c1: #ce9248;
    --c2: #e4c060;
    --c3: #db9c4e
  }
  
  /* similarly for the other panels */
}

您可以生成随机值或使用CSS和HTML预处理器从对象中获取随机值，而不是对指定参数的值进行硬编码。在后一种情况下，您可以应用内联样式，这是我在Codepen上的演示中所做的：

本示例conic-gradient()使用CSS变量作为参数，因此该演示在不支持它们的浏览器中不起作用。

到此结束本文。我希望您喜欢它并给出一些关于如何借助圆锥形渐变使生活更轻松的想法。

使用渐变色渐变简化背景图案

( )

:

More articles: