CSS Checkerboard-baggrund... Men med afrundede hjørner og svævestile

Tidsstempel: 20. september 2022 kl. 9
billede

På den ene side er det nemt at skabe enkle ternet baggrunde med CSS. På den anden side, med mindre vi er en af ​​CSS-gradient-ninjaerne, sidder vi lidt fast i grundlæggende mønstre.

Det var i hvert fald, hvad jeg tænkte, mens jeg stirrede på den ternede baggrund på min skærm og prøvede at runde de hjørner af firkanterne lidt...indtil jeg huskede min yndlings punkttegn-glyph - ✦ — og regnede med, at hvis bare jeg kunne placere det over hvert kryds i mønsteret, vil jeg helt sikkert få det design, jeg ønsker.

Det viser sig, at det er muligt! Her er beviset.

Lad os starte med det grundlæggende mønster:

<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 */
}

Det, der giver os, er en gentagende baggrund af firkanter, der går fra pink til blå med 5px hvide mellemrum mellem dem. Hver firkant er halvtreds pixels bred og gennemsigtig. Dette er oprettet vha repeating-linear-gradient, som skaber et lineært gradientbillede, hvor gradienten gentages i hele det indeholdende område.

Med andre ord, den første gradient i den sekvens skaber hvide vandrette striber, og den anden gradient skaber hvide lodrette striber. Lagt sammen danner de det ternede mønster, og den tredje gradient fylder resten af ​​rummet.

Nu tilføjer vi stjerneglyfen, jeg nævnte tidligere, oven på baggrundsmønsteret. Det kan vi gøre ved at inkludere det på det samme background egenskab som gradienter, mens du bruger en kodet SVG til formen:

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 */
}

Lad os bryde det ned. Det første nøgleord, repeat, angiver, at dette er et gentaget baggrundsbillede. Efterfulgt af det er henholdsvis positionen og størrelsen af ​​hver gentagende enhed (left -17px top -22px/55px 55px). Denne offsetposition er baseret på glyfens og mønsterets størrelse. Du kan se nedenfor, hvordan glyfstørrelsen er givet. Forskydningen tilføjes for at omplacere den gentagne glyf nøjagtigt over hvert kryds i det ternede mønster.

SVG har en HTML <div> bærer glyfen. Bemærk, at jeg erklærede en font-size på det. Det bestemmer i sidste ende grænseradius for firkanterne i skakternetmønsteret - jo større glyfen er, jo mere afrundede firkanterne. Den udrullede SVG fra data-URL'en ser sådan ud:

<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>

Nu hvor et CSS-mønster er etableret, lad os tilføje en :hover effekt hvor glyfen fjernes og de hvide linjer gøres let gennemskinnelige ved at bruge rgb() farveværdier med alfa-gennemsigtighed.

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;
}

Sådan der! Nu har vi ikke kun vores afrundede hjørner, men vi har også mere kontrol over mønstret for effekter som dette:

Igen var hele denne øvelse et forsøg på at få et gitter af firkanter i et skakternet mønster, der understøtter afrundede hjørner, en baggrundsgradient, der fungerer som en overlejring på tværs af mønsteret, og interaktive stilarter. Jeg synes, at dette løser opgaven ganske godt, men jeg er også interesseret i, hvordan du kunne have grebet det an. Fortæl mig det i kommentarerne!

Tidsstempel:

Mere fra CSS-tricks