Harte Stopp-Farbverläufe

Das Wort „Farbverlauf“ impliziert einen Übergang von einer Farbe zu einer anderen Farbe. Das ist im Webdesign sehr nützlich und kann schöne Effekte erzielen. Wir werden diesen ganzen „Übergangs“-Teil überspringen und sehen, welche Art von CSS-Trickerei das freisetzt.

Hier ist ein Beispiel für „traditionelle“ Farbverläufe, bei denen Farben langsam ineinander übergehen.

Diese wurden alle mit CSS-Farbverläufen erstellt.

Es gibt ein Konzept namens Color-Stops (Farb-Stopps) bei Farbverläufen, das es Ihnen ermöglicht, die Position zu steuern, von der aus Farben ineinander übergehen. Hier ist ein Beispiel, bei dem die erste Farbe den größten Teil des Weges anhält

.stripe {
  height: 100px;
  background: linear-gradient(to right, red 85%, blue);
}

Hier ist der Trick: Die Farbstopps können immer näher zusammenrücken und sich tatsächlich an derselben Stelle befinden. Das bedeutet, dass anstatt dass die Farbe überhaupt übergeht, eine Farbe stoppt und die andere Farbe an einem exakten Punkt beginnen kann. Hier ist eine visuelle Erklärung von konvergierenden Farbstopps

Das untere Beispiel sieht fast so aus, als wären es zwei separate Elemente mit zwei separaten Hintergründen, aber nein, es ist ein einziges Element mit harten Stopp-Farbverläufen, die den Raum visuell aufteilen. Wenn Sie vertikale Spalten erstellen und deren Hintergründe alle auf einem Elternelement handhaben müssten, ist dies eine Möglichkeit! Da der Hintergrund den gesamten Bereich abdeckt, müssen Sie sich keine Sorgen machen, dass sich die Elemente über die volle Höhe „strecken“, was dies zu einem großartigen Trick machte, als wir Spalten basierend auf Floats oder Inline-Block-Elementen erstellen mussten.

Wenn wir das Konzept der harten Stopps erweitern, können wir einen farbgestreiften Balken erstellen. Hier sind Variationen davon, die durch Verschieben von background-position erstellt wurden.

.stripe {
  height: 15px;
  background: linear-gradient(
    to right, 
    red,
    red 20%,
    orange 20%,
    orange 40%,
    yellowgreen 40%,
    yellowgreen 60%,
    lightblue 60%,
    lightblue 80%,
    purple 80%,
    purple
  );
  margin: 0 0 20px 0;
}

.stripe:nth-child(2) {
  background-position-x: -10vw;
}

.stripe:nth-child(3) {
  background-position-x: -20vw;
}

Apropos Streifen: Diese harten Stopp-Farbverläufe eignen sich hervorragend für gestreifte Hintergründe jeder Art. Mit wiederholenden Farbverläufen (z. B. repeating-linear-gradient()) wird es etwas einfacher, da Sie nicht 100 % des Platzes ausfüllen müssen. Sie können Pixel verwenden und dort stoppen, wo Sie müssen.

.stripes {
  background-color: #ffd600;
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 9px,
    #f4ff81 9px,
    #f4ff81 10px
  );
}

.stripes {
  background-color: #cfd8dc;
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 1px,
    #90a4ae 1px,
    #90a4ae 2px
  );
}

.stripes {
  background-color: #e53935;
  background-image: repeating-linear-gradient(
    10deg,
    transparent,
    transparent 20px,
    #c62828 20px,
    #c62828 23px
  );
}

.stripes {
  background-color: #689f38;
  background-image: repeating-linear-gradient(
    -25deg,
    transparent,
    transparent 40px,
    #aed581 40px,
    #aed581 50px
  );
}

.stripes {
  background-image: repeating-linear-gradient(
      90deg,
      rgba(224, 82, 67, 0.5) 0px,
      rgba(224, 82, 67, 0.5) 40px,
      transparent 40px,
      transparent 80px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(224, 82, 67, 0.5) 0px,
      rgba(224, 82, 67, 0.5) 40px,
      transparent 40px,
      transparent 80px
    ),
    linear-gradient(90deg, hsl(250, 82%, 1%), hsl(250, 82%, 1%));
}

.stripes {
  background-image: repeating-linear-gradient(
      45deg,
      hsla(312, 0%, 63%, 0.05) 0px,
      hsla(312, 0%, 63%, 0.05) 10px,
      transparent 10px,
      transparent 100px
    ),
    repeating-linear-gradient(
      90deg,
      hsla(312, 0%, 63%, 0.05) 0px,
      hsla(312, 0%, 63%, 0.05) 50px,
      transparent 50px,
      transparent 100px
    ),
    linear-gradient(90deg, hsl(80, 0%, 20%), hsl(80, 0%, 20%));
}

Es gibt auch andere Arten von Farbverläufen! Wir können harte Stopps auch mit radial-gradient und repeating-linear-gradient verwenden!

.stripes {
  background: repeating-radial-gradient(
    circle at 100%,
    #333,
    #333 10px,
    #999 10px,
    #999 20px
  );
}

.stripes {
  background-image: radial-gradient(#90caf9 20%, transparent 20%),
    radial-gradient(#1e88e5 20%, transparent 20%);
  background-color: #64b5f6;
  background-position: top left, 50px 50px;
  background-size: 100px 100px;
}

.stripes {
  background-image: radial-gradient(
    circle at top left,
    #ec407a,
    #ec407a 20%,
    #7e57c2 20%,
    #7e57c2 40%,
    #42a5f5 40%,
    #42a5f5 60%,
    #26a69a 60%,
    #26a69a 80%,
    #9ccc65 80%
  );
}

.stripes {
  background: repeating-radial-gradient(
    circle at bottom right,
    #eee,
    #ccc 50px
  );
}

Beachten Sie im letzten Beispiel, dass immer noch etwas Farbe übergeht. Ein harter Stopp-Farbverlauf muss nicht ausschließlich verwendet werden. Dieses hat nur einen harten Stopp, der sich wiederholt.

Kegelförmige Farbverläufe sind ein weiterer Hauptkandidat für harte Stopp-Farbverläufe, da sie, wenn sie auf einen Kreis angewendet werden (z. B. border-radius: 50%), sofort zu Tortendiagrammen werden!

.chart {
  background: conic-gradient(
    #f15854 4%,
    #4d4d4d 0 8%,
    #5da5da 0 17%,
    #decf3f 0 48%,
    #b276b2 0 54%,
    #faa43a 0
  );
  border-radius: 50%;
  height: 0;
  padding-top: 100%;
}