CSS-shakkilaudan tausta… mutta pyöristetyillä kulmilla ja hover-tyyleillä

Aikaleima: 20. syyskuuta 2022 9
kuva

Toisaalta yksinkertaisten ruudullisten taustojen luominen CSS:llä on helppoa. Toisaalta, ellemme ole yksi CSS-gradient-ninjoista, olemme tavallaan jumissa peruskuvioissa.

Ainakin näin ajattelin, kun tuijotin ruudullani olevaa ruudullista taustaa ja yritin pyöristää ruutujen kulmia vain vähän… kunnes muistin suosikkini bullet point -merkkini – ✦ - ja ajattelin, että jos vain voisin sijoittaa sen kuvion jokaisen risteyksen päälle, saan varmasti haluamani kuvion.

Osoittautuu, että se on mahdollista! Tässä on todiste.

Aloitetaan perusmallista:

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

Se antaa meille toistuvan taustan neliöitä, jotka muuttuvat vaaleanpunaisesta siniseksi 5px valkoiset rakot niiden välillä. Jokainen neliö on viisikymmentä pikseliä leveä ja läpinäkyvä. Tämä luodaan käyttämällä repeating-linear-gradient, joka luo lineaarisen gradienttikuvan, jossa gradientti toistuu koko sisältävällä alueella.

Toisin sanoen sarjan ensimmäinen liukuväri luo valkoisia vaakasuuntaisia ​​raitoja ja toinen kaltevuus valkoisia pystysuoria raitoja. Kerrostettuina ne muodostavat ruudullisen kuvion, ja kolmas kaltevuus täyttää muun tilan.

Nyt lisäämme aiemmin mainitsemani tähtikuvion taustakuvion päälle. Voimme tehdä sen sisällyttämällä sen samaan background ominaisuus liukuvärinä, kun muotoa varten käytetään koodattua SVG:tä:

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

Puretaan se. Ensimmäinen avainsana, repeat, tarkoittaa, että tämä on toistuva taustakuva. Sitä seuraa kunkin toistuvan yksikön sijainti ja koko, vastaavasti (left -17px top -22px/55px 55px). Tämä siirtymäkohta perustuu kuvion ja kuvion kokoon. Näet alla, kuinka kuvion koko annetaan. Poikkeama lisätään sijoittamaan toistuva kuvio täsmälleen jokaisen ruudullisen kuvion risteyksen päälle.

SVG:ssä on HTML <div> kantaa glyfiä. Huomaa, että olen ilmoittanut a font-size sen päällä. Se määrittää viime kädessä shakkilautakuvion neliöiden reunasäteen – mitä suurempi kuvio, sitä pyöristetympiä neliöitä. Tietojen URL-osoitteesta rullattu SVG näyttää tältä:

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

Nyt kun CSS-malli on muodostettu, lisätään a :hover vaikutus, jossa kuvio poistetaan ja valkoiset viivat tehdään hieman läpikuultaviksi käyttämällä rgb() väriarvot alfaläpinäkyvyydellä.

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

Siinä mennään! Nyt meillä ei ole vain pyöristetyt kulmat, vaan meillä on myös enemmän hallintaa tämän kaltaisten tehosteiden malliin:

Jälleen tämä koko harjoitus oli yritys saada ruudukkoruudukko shakkilautakuvioon, joka tukee pyöristettyjä kulmia, taustagradientti, joka toimii peittokuvana kuvion yli, ja interaktiivisia tyylejä. Mielestäni tämä suoriutuu tehtävästä melko hyvin, mutta olen myös kiinnostunut siitä, kuinka olet voinut lähestyä sitä. Kerro minulle kommenteissa!

Aikaleima:

Lisää aiheesta CSS-temppuja