CSS Schachbrettmuster… Aber mit abgerundeten Ecken und Hover- Effekten

Einerseits ist es einfach, einfache Schachbrettmuster mit CSS zu erstellen. Andererseits, es sei denn, wir sind einer der CSS-Gradient-Ninjas, sind wir irgendwie auf einfache Muster beschränkt.

Das dachte ich zumindest, als ich auf den karierten Hintergrund auf meinem Bildschirm starrte und versuchte, die Ecken der Quadrate nur ein wenig abzurunden… bis ich mich an mein liebstes Aufzählungszeichen-Glyph erinnerte — ✦ — und mir überlegte, dass ich, wenn ich es nur über jede Kreuzung im Muster legen könnte, sicher das gewünschte Design erhalten würde.

Es stellt sich heraus, dass es möglich ist! Hier ist der Beweis.

Beginnen wir mit dem Grundmuster

<div></div>

div {
 background: 
  repeating-linear-gradient(
    to right, transparent, 
    transparent 50px, 
    white 50px, 
    white 55px
  ),
  repeating-linear-gradient(
    to bottom, transparent,  
    transparent 50px, 
    white 50px, 
    white 55px
  ),
  linear-gradient(45deg, pink, skyblue);
  /* more styles */
}

Das ergibt uns einen sich wiederholenden Hintergrund aus Quadraten, die von Rosa zu Blau gehen, mit 5px weißen Lücken dazwischen. Jedes Quadrat ist fünfzig Pixel breit und transparent. Dies wird mit repeating-linear-gradient erstellt, was ein lineares Gradientenbild erzeugt, das sich im umschließenden Bereich wiederholt.

Mit anderen Worten, der erste Gradient in dieser Sequenz erzeugt weiße horizontale Streifen und der zweite Gradient erzeugt weiße vertikale Streifen. Zusammen bilden sie das schachbrettartige Muster, und der dritte Gradient füllt den Rest des Raumes.

Nun fügen wir das Stern-Glyph hinzu, das ich zuvor erwähnt habe, über dem Hintergrundmuster. Das können wir tun, indem wir es in dieselbe background-Eigenschaft wie die Gradienten aufnehmen, während wir eine kodierte SVG für die Form verwenden

div {
  background: 
    repeat left -17px top -22px/55px 55px
    url("data:image/svg+xml,
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35px 35px'>
      <foreignObject width='35px' height='35px'>
        <div xmlns='http://www.w3.org/1999/xhtml' style='color: white; font-size: 35px'>✦</div>
      </foreignObject>
    </svg>"
    ), 
    repeating-linear-gradient(
      to right, transparent,
      transparent 50px,
      white 50px,
      white 55px
    ),
    repeating-linear-gradient(
      to bottom, transparent,
      transparent 50px,
      white 50px,
      white 55px
    ),
    linear-gradient(45deg, pink, skyblue);
  /* more style */
}

Zerlegen wir das mal. Das erste Schlüsselwort, repeat, gibt an, dass es sich um ein sich wiederholendes Hintergrundbild handelt. Darauf folgen die Position und Größe jeder wiederholten Einheit (left -17px top -22px/55px 55px). Diese Offset-Position basiert auf der Größe des Glyphs und des Musters. Unten sehen Sie, wie die Glyph-Größe angegeben wird. Der Offset wird hinzugefügt, um den wiederholten Glyph exakt über jede Kreuzung im schachbrettartigen Muster zu positionieren.

Die SVG enthält ein HTML <div>, das das Glyph trägt. Beachten Sie, dass ich ihm eine font-size zugewiesen habe. Dies bestimmt letztendlich den Randradius der Quadrate im Schachbrettmuster – je größer das Glyph, desto abgerundeter die Quadrate. Die entrollte SVG aus der Daten-URL sieht so aus

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 35px 35px'>
  <foreignObject width='35px' height='35px'>
    <div xmlns='http://www.w3.org/1999/xhtml' style='color:white;font-size:35px'>✦</div>
  </foreignObject>
</svg>

Da nun ein CSS-Muster etabliert ist, fügen wir einen :hover-Effekt hinzu, bei dem das Glyph entfernt wird und die weißen Linien durch die Verwendung von rgb()-Farbwerten mit Alpha-Transparenz leicht durchscheinend gemacht werden.

div:hover {
  background:
    repeating-linear-gradient(
      to right, transparent,
      transparent 50px,
      rgb(255 255 255 / 0.5) 50px,
      rgb(255 255 255 / 0.5) 55px
    ),
    repeating-linear-gradient(
      to bottom, transparent,
      transparent 50px,
      rgb(255 255 255 / 0.5) 50px,
      rgb(255 255 255 / 0.5) 55px
    ),
  linear-gradient(45deg, pink, skyblue);
  box-shadow: 10px 10px 20px pink;
}

Da haben wir es! Nun haben wir nicht nur unsere abgerundeten Ecken, sondern auch mehr Kontrolle über das Muster für Effekte wie diesen

Auch diese ganze Übung war ein Versuch, ein Raster von Quadraten in einem Schachbrettmuster zu erhalten, das abgerundete Ecken, einen Hintergrundgradienten, der als Überlagerung über dem Muster dient, und interaktive Stile unterstützt. Ich denke, das erfüllt die Aufgabe ziemlich gut, aber ich bin auch daran interessiert, wie Sie es vielleicht angegangen wären. Lassen Sie es mich in den Kommentaren wissen!