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 ??? ????? ?? ?? ??? ?????!