No-Jank CSS Stripes | CSS-Tricks

Bei der Erstellung von Streifen in CSS denke ich sofort an repeating-linear-gradient und harte Farbverläufe. Man erstellt einen Streifen, indem man die gleiche Farbe zwischen zwei Farbstopps verwendet, und einen weiteren Streifen (oder mehr), aber mit einer anderen Farbe zwischen zwei Farbstopps (wobei der mittlere geteilt wird).

Also wie

background: repeating-linear-gradient(
  45deg,
  black,
  black 10px,
  #444 10px,
  #444 11px
);

Das erzeugt schräge dunkelgraue Streifen mit 10px Abstand auf schwarzem Hintergrund.

Aber so rendert es auf meinem Bildschirm

Sehen Sie diese Darstellungsruckler, bei denen ein oder zwei der Streifen heller und dünner erscheinen als die anderen? Ich habe keine Ahnung, warum. Ich gehe davon aus, dass es etwas mit Subpixel-Rendering oder Ähnlichem zu tun hat. Das ist nicht schwer zu replizieren. Es liegt nicht nur an diesen beiden Farben oder diesem speziellen Winkel, es betrifft im Grunde alle Streifen, die mit repeating-linear-gradient erstellt werden. Es fällt bei dickeren Streifen (z. B. ab 5px) nicht mehr so stark auf.

Ich habe ein paar Beispiele gemacht. Dieses mit engeren Streifen in die andere Richtung ist besonders auffällig

Ich musste das neulich tun, fand die Ruckler und erinnerte mich an diese kleine Notiz in unserem Streifen-Artikel. Sie läuft darauf hinaus: Verwenden Sie nicht repeating-linear-gradient. Verwenden Sie einfach linear-gradient, setzen Sie eine background-size und lassen Sie es sich wiederholen. Das scheint tatsächlich den Trick zu tun. Das Problem dabei ist... wie groß soll man die background-size machen? Wenn die Streifen vertikal oder horizontal sind, ist es ziemlich einfach, etwas hinzubekommen. Aber wenn die Streifen schräg sind... die Berechnung der perfekten Breite×Höhe ist knifflig. Ich vermute, es hat mit dem Satz des Pythagoras zu tun, aber da bin ich überfragt.

Also, was macht man?

Benutzen Sie dieses nettes kleines Generator-Tool.

Es führt die notwendigen ausgefallenen Berechnungen durch, um es richtig zu machen. Sie können den unminifizierten JavaScript-Code hier sehen. Suchen Sie nach / GET BACKGROUND SIZE /, um all die Berechnungen zu sehen. Was auch immer dort gemacht wird, die Streifen kommen perfekt heraus.

Schade, dass repeating-linear-gradient keine bessere visuelle Ausgabe hat, da das so viel einfacher zu verstehen ist, aber hey, man muss tun, was man tun muss.

Kommentare

Chris Morgan

# 1. Februar 2021

Der Hauptgrund für die Ruckler in Ihren CSS-Streifen ist die variierende kumulative Subpixel-Fehler, da Sie wahrscheinlich die gesamte Trigonometrie, die Sie in der Schule gelernt haben, vergessen haben.

Sie definieren Dinge in einem Winkel von 45°, was bedeutet, dass Sie für jedes 1 Pixel, das Sie gehen, nur (√2÷2) Pixel in der horizontalen und vertikalen Achse zurückgelegt haben. Kombiniert mit Subpixel-Rendering bedeutet dies, dass der Bruchteil eines Pixels, um den Sie die Linie versetzt rendern, sich mit jeder neuen Linie ändert – z. B. die erste bei etwa 0,707 Pixeln, dann die nächste bei 0,414 Pixeln, dann 0,121 Pixeln, dann 0,828 Pixeln, dann 0,536 Pixeln, usw. (Diese stammen aus dem Bruchteil von jedem √2÷2×i für aufeinanderfolgende natürliche Zahlen i.)

Sie können diese Art von Fehler beheben, indem Sie sicherstellen, dass die Dinge sowohl auf der x- als auch auf der y-Achse Pixelgrenzen treffen. Bei 45° bedeutet dies, dass Sie Ihre gewünschte horizontale und vertikale Periode mit √2 multiplizieren sollten, sodass eine 10px Periode auf dieser 45°-Achse 14,142143562373059504 Pixel beträgt. (Entscheiden Sie selbst, welche Genauigkeit Sie wählen; ich empfehle, nicht weniger als Single-Precision zu gehen, also etwa acht signifikante Stellen.)

(In der Praxis wird es etwas seltsamer als das, und der Fehler sieht oft nicht so zufällig aus, wie Sie es vielleicht von meiner Erklärung erwarten würden, da der Browser tatsächlich nur ein ziemlich begrenztes Subpixel-Rendering mit einer Form von Supersampling durchführt, anstatt dessen, was ich als Subpixel-Rendering mit unendlicher Präzision bezeichnen würde.)

Auch nachdem Sie dies behoben haben, sind wiederholende Verläufe immer noch ein bisschen Glücksspiel, da Browser damit immer noch einige leicht seltsame Dinge tun, obwohl sie sich im Laufe der Zeit in eine vernünftigere Richtung entwickelt haben. Wiederholende, sorgfältig dimensionierte lineare Verläufe sind im Moment definitiv robuster und oft leichter zu verstehen – besonders wenn Sie andere Winkel als 45° wünschen, dann benötigen Sie mehr aufwendige Trigonometrie, um alles auf ein Pixelraster abzustimmen. (Ja, Schul-Trigonometrie hat solide praktische Anwendungen im Design, wenn man auf ein Rastergerät rendert.)

Eine letzte Anmerkung: Der Grund, warum der Fehler im zweiten Beispiel am auffälligsten ist, liegt tatsächlich daran, dass der "Linien"-Teil ein Verlauf ist, da der dritte Stopp bei 5px liegt, obwohl er bei 4px liegen sollte. Dies neigt dazu, die Sichtbarkeit von Subpixel-Fehlern zu verstärken.

Terry Hale

Permalink zum Kommentar# 1. Februar 2021

Das ist der beste Artikel-Kommentar, den ich seit langer Zeit gesehen habe.

Camillo

# 1. Februar 2021

@chris der Kommentar hat mich mehr umgehauen als der Artikel selbst!!! Aber ich muss ihn noch 100 Mal lesen....

Peter Laxalt

# 28. Februar 2021

Wenn jemand Styled Components verwendet, habe ich eine Hilfsfunktion aus dem oben geposteten Quellcode erstellt, um Streifen zu generieren. Sie können sie gerne unten verwenden.

Verwendung

.striped-element {
  ${gradientStripesCss(0, [
     {
        size: 2,
        color: "#fff"
     },
     {
        size: 30,
        color: "transparent"
     },
  ])};
}

Funktion

import { css } from "styled-components";

type gradientStripes = {
  size: number,
  color: string,
  color_name?: string
}

export function gradientStripesCss(gradientAngle: number = 45, gradientStripes: gradientStripes[] = [
  {
    size: 30,
    color: '#e34',
    color_name: '',
  },
  {
    size: 30,
    color: '#4a4',
    color_name: '',
  },
], gradientRatio: boolean = true) {
  if (gradientAngle > 180) {
    gradientAngle = gradientAngle - 180;
  }

  var stripes_size_sum = 0;
  for (var i = 0; i < gradientStripes.length; i++) {
    stripes_size_sum += gradientStripes[i].size;
  }

  //////////////////// GET BACKGROUND SIZE ///////////////////////////////
  var bg_size_x: number;
  var bg_size_y: number;

  bg_size_x = stripes_size_sum * 2;

  if (gradientAngle > 0 && gradientAngle <= 45) {
    bg_size_x /= 2;
  }
  else if (gradientAngle > 45 && gradientAngle < 90) {
    bg_size_x *= Math.tan(gradientAngle * Math.PI / 180) / 2;
  }
  else if (gradientAngle > 90 && gradientAngle <= 135) {
    bg_size_x *= Math.tan((180 - gradientAngle) * Math.PI / 180) / 2;
  }
  else if (gradientAngle > 135 && gradientAngle < 180) {
    bg_size_x /= 2;
  }

  if (gradientRatio && !(gradientAngle == 0 || gradientAngle == 90 || gradientAngle == 180)) {
    bg_size_x = bg_size_x / Math.sin(gradientAngle * Math.PI / 180);
  }


  bg_size_y = bg_size_x;
  if (gradientAngle > 90 && gradientAngle < 180) {
    bg_size_y = bg_size_x * Math.tan((180 - gradientAngle) * Math.PI / 180);
  }
  else if (gradientAngle != 90 && gradientAngle != 0 && gradientAngle != 180) {
    bg_size_y = bg_size_x * Math.tan(gradientAngle * Math.PI / 180);
  }


  if (bg_size_y > bg_size_x) {
    var temp = bg_size_x;
    bg_size_x = bg_size_x * bg_size_x / bg_size_y;
    bg_size_x = parseFloat(bg_size_x.toFixed(2));
    bg_size_y = temp;
  }

  var bg_size_x_float = bg_size_x.toString();
  var bg_size_y_float = bg_size_y.toString();

  bg_size_x = parseFloat(parseFloat(bg_size_x_float).toFixed(2));
  bg_size_y = parseFloat(parseFloat(bg_size_y_float).toFixed(2));


  //////////////////// GET PERCENT CODE ///////////////////////////////

  var percents = [];
  for (var i = 0; i < gradientStripes.length; i++) {
    percents[i] = (gradientStripes[i].size * 100 / stripes_size_sum) / 2;
  }

  var percents_code = '';
  var percents_code_text = '';
  for (var i = 0; i < gradientStripes.length * 2; i++) {
    var percents_sum = 0;
    for (var j = 0; j <= i; j++) {
      var k = j;
      if (j >= gradientStripes.length) {
        k = j - gradientStripes.length;
      }
      percents_sum += percents[k];
    }

    var percents_sum_float = percents_sum.toString();

    percents_sum = parseFloat(parseFloat(percents_sum_float).toFixed(2).replace(/\.0+$/, ''));

    var j = i;
    if (j >= gradientStripes.length) {
      j = j - gradientStripes.length;
    }

    var k = j + 1;
    if (k >= gradientStripes.length) {
      k = k - gradientStripes.length;
    }

    var color_name = gradientStripes[j].color;
    if (gradientStripes[j].color_name) {
      color_name = gradientStripes[j].color_name;
    }

    var color_name2 = gradientStripes[k].color;
    if (gradientStripes[k].color_name) {
      color_name2 = gradientStripes[k].color_name;
    }

    if (i == gradientStripes.length * 2 - 1) {
      percents_code += gradientStripes[j].color + ' ' + percents_sum + '%';
      percents_code_text += color_name + ' ' + percents_sum + '%';
    }
    else {
      percents_code += gradientStripes[j].color + ' ' + percents_sum + '%, ' + gradientStripes[k].color + ' ' + percents_sum + '%, ';
      percents_code_text += color_name + ' ' + percents_sum + '%, ' + color_name2 + ' ' + percents_sum + '%, ';
    }
  }

  return css`
    background-image: linear-gradient(${gradientAngle}deg, ${percents_code}); 
    background-size: ${bg_size_x}px  ${bg_size_y}px;
  `;
};

Dieser Kommentarbereich ist geschlossen. Wenn Sie wichtige Informationen teilen möchten, kontaktieren Sie uns bitte.