Streifen in CSS

Streifen sind heutzutage ziemlich einfach in CSS zu machen. CSS-Verläufe über die background-image-Eigenschaft haben uns wirklich den Rücken gestärkt. Ich dachte, ich dokumentiere einige Variationen an einem einfach nachzuschlagenden Ort.

Normal farbige diagonale Streifen

Diagonale Streifen lassen sich dank repeating-linear-gradient() leicht erstellen.

background: repeating-linear-gradient(
  45deg,
  #606dbc,
  #606dbc 10px,
  #465298 10px,
  #465298 20px
);

Anstatt dass der allerletzte Farb-Stopp 100 % (oder nichts, was 100 % bedeutet) ist, ist es ein fester Wert. Danach beginnt es irgendwie von vorne. So stelle ich es mir vor (herangezoomt)

Siehe den Pen epfEc von Chris Coyier (@chriscoyier) auf CodePen.

Verlauf-Diagonale Streifen

Wenn Sie den Hintergrund zu einem normalen linear-gradient() machen und dann die Hälfte der Streifen mit repeating-linear-gradient() komplett transparent machen, kann es so aussehen, als ob die Streifen Verläufe hätten. Aufgrund mehrerer Hintergründe (und der Stapelreihenfolge können Sie das alles auf einem einzigen Element kombinieren.

background: 
  /* On "top" */
  repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    #ccc 10px,
    #ccc 20px
  ),
  /* on "bottom" */
  linear-gradient(
    to bottom,
    #eee,
    #999
  );

Siehe den Pen xhkpD von Chris Coyier (@chriscoyier) auf CodePen.

Streifen über Bild

Vielleicht eine Textur? Jedes Bild funktioniert. Sie könnten einen Teil des Bildes offenlegen, indem Sie einige Streifen vollständig transparent und andere vollständig opak machen. Oder jede Kombination. Wieder ermöglichen mehrere Hintergründe, dass all dies auf demselben Element geschieht.

background: repeating-linear-gradient(
  45deg,
  rgba(0, 0, 0, 0.2),
  rgba(0, 0, 0, 0.2) 10px,
  rgba(0, 0, 0, 0.3) 10px,
  rgba(0, 0, 0, 0.3) 20px
),
url(http://s3-us-west-2.amazonaws.com/s.cdpn.io/3/[email protected]);

Siehe den Pen gaKyv von Chris Coyier (@chriscoyier) auf CodePen.

Beliebige Richtung, beliebiger Winkel

Es muss nicht genau 45 Grad sein. Das ist Teil der Schönheit von repeating-linear-gradient(). Es ist nicht wie dieses perfekte Rechteck, das sich ausrichten und wiederholen muss, es ist nur eine Reihe von Zeichenanweisungen, die sich wiederholen.

background: repeating-linear-gradient(
  -55deg,
  #222,
  #222 10px,
  #333 10px,
  #333 20px
);

Siehe den Pen qfHmw von Chris Coyier (@chriscoyier) auf CodePen.

Gerade Streifen (etwas bessere Browserunterstützung)

Es gibt eine super alte Syntax für CSS-Verläufe, die -webkit-gradient() verwendete (beachten Sie das Fehlen von „linear“ oder „radial“). Grundsätzlich: Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0. Alte Sachen. Diese Browser unterstützen keine wiederholenden Verläufe. Aber man konnte es irgendwie vortäuschen, besonders bei geraden Streifen, indem man ein kleines Rechteck aus Hintergrund mit background-size erstellt, die Streifen darin zeichnet und es wie background-image wiederholen lässt.

background: linear-gradient(
  to bottom,
  #5d9634,
  #5d9634 50%,
  #538c2b 50%,
  #538c2b
);
/* The rectangle in which to repeat. 
   It can be fully wide in this case */
background-size: 100% 20px;

Siehe den Pen uxJrf von Chris Coyier (@chriscoyier) auf CodePen.

Wenn Sie es verrückt treiben wollten, könnten Sie ein Element mit diesen geraden Streifen mit transform: rotate() drehen und den Überlauf abschneiden, um diagonale Streifen mit tieferer Browserunterstützung zu replizieren. Klingt nach viel Arbeit.

Vertikale Streifen

Sie könnten dieselbe Methode wie oben auch für vertikale Streifen verwenden. Oder einfach repeating-linear-gradient().

background: repeating-linear-gradient(
  to right,
  #f6ba52,
  #f6ba52 10px,
  #ffd180 10px,
  #ffd180 20px
);

Siehe den Pen oCpEu von Chris Coyier (@chriscoyier) auf CodePen.

Nur zur Klarstellung: Mit repeating-linear-gradient() ist es am besten, auch ein -webkit-repeating-linear-gradient() zu verwenden, zusätzlich zum ungeprefixsten, wenn Sie, wissen Sie, prefixen, aber Sie sollten es nicht tun.

Radiale Streifen

Wer sagt denn, dass sie gerade Linien sein müssen, hm? Radiale Verläufe können repeating-linear-gradients() sein.

/* Note the RADIAL */
background: repeating-radial-gradient(
  circle,
  purple,
  purple 10px,
  #4b026f 10px, 
  #4b026f 20px
);

Siehe den Pen AEymd von Chris Coyier (@chriscoyier) auf CodePen.

Funky Town

Manchmal passieren Rundungsfehler (vielleicht?) oder andere Render-Funkereien.

Was willst du machen. Ich vermute, es wird mit der Zeit besser werden.

Update: Christopher Cohen schreibt dazu

Sie können den Funky Town besiegen, indem Sie prozentuale Stopps setzen und background-size verwenden. Ich weiß nicht, ob Chrome einfach mit einer anderen Präzision für % vs px berechnet, aber ich habe festgestellt, dass dies mir wunderschön saubere Linien verschafft hat.

Ein weiterer schneller Tipp; manchmal müssen Sie background-attachment: fixed angeben, sonst ignoriert es background-position. Dies ist nützlich, wenn Sie Fortschrittsbalken usw. mit überlappenden, mit Verläufen gefüllten Boxen gestalten.

Siehe den Pen Repeating gradients von Christopher Cohen (@Jeevecore) auf CodePen.

Alle Demos

Alle zusammen.