Ozadje šahovnice CSS ... vendar z zaobljenimi vogali in slogi lebdenja

Po eni strani je ustvarjanje preprostih karirastih ozadij s CSS preprosto. Po drugi strani pa, razen če smo eden od CSS-gradient-nindž, smo nekako obtičali z osnovnimi vzorci.

Vsaj tako sem mislil, ko sem strmel v karirasto ozadje na svojem zaslonu in poskušal le malo zaokrožiti te vogale kvadratov ... dokler se nisem spomnil svojega najljubšega glifa z naboji - ✦ — in ugotovil, da če bi ga le lahko postavil čez vsako križišče v vzorcu, bom zagotovo dobil dizajn, ki ga želim.

Izkazalo se je, da je mogoče! Tukaj je dokaz.

Začnimo z osnovnim vzorcem:

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

To nam daje ponavljajoče se ozadje kvadratov, ki prehajajo od rožnate do modre 5px bele vrzeli med njimi. Vsak kvadrat je širok petdeset slikovnih pik in je prosojen. To je ustvarjeno z uporabo repeating-linear-gradient, ki ustvari sliko linearnega preliva, kjer se preliv ponavlja po celotnem vsebovalnem območju.

Z drugimi besedami, prvi preliv v tem zaporedju ustvari bele vodoravne črte, drugi preliv pa bele navpične črte. V plasteh skupaj tvorita karo vzorec, tretji preliv pa zapolni preostali prostor.

Zdaj dodamo zvezdni glif, ki sem ga omenil prej, na vrh vzorca ozadja. To lahko storimo tako, da ga vključimo na isto background lastnosti kot prelivi, medtem ko za obliko uporabljate kodiran SVG:

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

Razčlenimo to. Prva ključna beseda, repeat, pomeni, da je to ponavljajoča se slika ozadja. Temu sledita položaj in velikost vsake ponavljajoče se enote (left -17px top -22px/55px 55px). Ta položaj zamika temelji na velikosti glifa in vzorca. Spodaj boste videli, kako je podana velikost glifa. Odmik je dodan, da ponovno postavi ponavljajoči se glif natančno nad vsako križišče v karirastem vzorcu.

SVG ima HTML <div> nosi glif. Upoštevajte, da sem prijavil a font-size na njem. To na koncu določa polmer obrobe kvadratov v vzorcu šahovnice – večji kot je glif, bolj zaobljeni so kvadrati. Odvit SVG iz podatkovnega URL-ja je videti takole:

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

Zdaj, ko je vzorec CSS vzpostavljen, dodamo a :hover učinek, kjer je glif odstranjen in bele črte postanejo rahlo prosojne z uporabo rgb() barvne vrednosti z alfa prosojnostjo.

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

No pa gremo! Zdaj nimamo samo zaobljenih vogalov, ampak imamo tudi večji nadzor nad vzorcem za učinke, kot je ta:

Ponovno je bila ta celotna vaja poskus dobiti mrežo kvadratov v vzorcu šahovnice, ki podpira zaobljene vogale, preliv ozadja, ki služi kot prekrivanje čez vzorec, in interaktivne sloge. Mislim, da je to nalogo precej dobro opravljeno, zanima pa me tudi, kako ste se tega morda lotili. Sporoči mi v komentarjih!