Eine beliebte Methode zum Zeichnen von Streifen in CSS, um einen linearen Farbverlauf mit überlappenden Farbstopps zu definieren. Es funktioniert sehr gut, ist aber nicht sehr bequem von Hand zu schreiben ... Milliarden-Dollar-Idee: Verwenden Sie Sass, um es automatisch aus einer Liste von Farben zu generieren!
/// Stripe builder /// @author Hugo Giraudel /// @param (Direction) $direction - Gradient direction /// @param (List) $colors - List of colors /// @output `background-image` if several colors, `background-color` if only one @mixin stripes($direction, $colors) ( $length: length($colors); @if $length > 1 ( $stripes: (); @for $i from 1 through $length ( $stripe: (100% / $length) * ($i - 1); @if $i > 1 ( $stripes: append($stripes, nth($colors, $i - 1) $stripe, comma); ) $stripes: append($stripes, nth($colors, $i) $stripe, comma); ) background-image: linear-gradient($direction, $stripes); ) @else if $length == 1 ( background-color: $colors; ) )Verwendung
body ( @include stripes(to right, #8e44ad #2c3e50 #2980b9 #16a085 #27ae60); )Siehe den Stift a990b82465115c2b556f1b86bf4692c7 von Hugo Giraudel (@HugoGiraudel) auf CodePen.