Un moyen populaire de dessiner des bandes en CSS pour définir un dégradé linéaire avec des arrêts de couleur qui se chevauchent. Cela fonctionne très bien mais ce n'est pas très pratique d'écrire à la main… Idée milliardaire: utiliser Sass pour la générer automatiquement à partir d'une liste de couleurs!
/// 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; ) )Usage
body ( @include stripes(to right, #8e44ad #2c3e50 #2980b9 #16a085 #27ae60); )Voir le Pen a990b82465115c2b556f1b86bf4692c7 par Hugo Giraudel (@HugoGiraudel) sur CodePen.