Fundal CSS de tablă de șah... Dar cu colțuri rotunjite și stiluri Hover

Pe de o parte, crearea de fundaluri simple în carouri cu CSS este ușoară. Pe de altă parte, totuși, dacă nu suntem unul dintre CSS-gradient-ninja, suntem oarecum blocați cu modele de bază.

Cel puțin, asta m-am gândit în timp ce mă uitam la fundalul în carouri de pe ecran și încercam să rotunjesc acele colțuri ale pătratelor doar puțin... până mi-am amintit gliful meu favorit de marcator - ✦ — și m-am gândit că dacă aș putea să-l plasez peste fiecare intersecție a modelului, cu siguranță voi obține designul pe care mi-l doresc.

Se dovedește că este posibil! Iată dovada.

Să începem cu modelul de bază:

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

Ceea ce ne oferă este un fundal repetat de pătrate care merg de la roz la albastru 5px goluri albe între ele. Fiecare pătrat are cincizeci de pixeli lățime și transparent. Acesta este creat folosind repeating-linear-gradient, care creează o imagine cu gradient liniar în care gradientul se repetă în toată zona care o conține.

Cu alte cuvinte, primul gradient din acea secvență creează dungi orizontale albe, iar al doilea gradient creează dungi verticale albe. Stratificat împreună, formează modelul în carouri, iar al treilea gradient umple restul spațiului.

Acum adăugăm gliful stea pe care l-am menționat mai devreme, deasupra modelului de fundal. Putem face asta incluzându-l pe același background proprietate ca gradienți în timp ce utilizați un SVG codificat pentru formă:

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

Să descompunem asta. Primul cuvânt cheie, repeat, indică faptul că aceasta este o imagine de fundal care se repetă. Urmează poziția și dimensiunea fiecărei unități care se repetă, respectiv (left -17px top -22px/55px 55px). Această poziție de compensare se bazează pe dimensiunea glifului și modelului. Veți vedea mai jos cum este dată dimensiunea glifului. Decalajul este adăugat pentru a repoziționa gliful care se repetă exact peste fiecare intersecție din modelul în carouri.

SVG-ul are un HTML <div> purtând gliful. Observați că am declarat a font-size pe el. În cele din urmă, aceasta determină raza graniței pătratelor din modelul de șah - cu cât gliful este mai mare, cu atât pătratele sunt mai rotunjite. SVG-ul derulat de la adresa URL a datelor arată astfel:

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

Acum că este stabilit un model CSS, să adăugăm a :hover efect în care gliful este îndepărtat și liniile albe sunt ușor translucide prin utilizarea rgb() valori de culoare cu transparență alfa.

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

Iată-ne! Acum, nu numai că avem colțurile noastre rotunjite, dar avem și mai mult control asupra modelului pentru efecte ca acesta:

Din nou, întregul exercițiu a fost o încercare de a obține o grilă de pătrate într-un model de șah care acceptă colțuri rotunjite, un gradient de fundal care servește ca suprapunere peste model și stiluri interactive. Cred că acest lucru îndeplinește sarcina destul de bine, dar sunt, de asemenea, interesat de cum ați fi abordat-o. Anunță-mă în comentarii!