CSS-ruudukko ja mukautetut muodot, osa 2

Selvä, joten viimeksi kun kirjauduimme sisään, käytimme CSS Gridiä ja yhdistämme ne CSS:ään clip-path ja mask tekniikoita hienomuotoisten verkkojen luomiseen.

Tässä on vain yksi upeista ruudukoista, jotka teimme yhdessä:

Valmiina toiselle kierrokselle? Työskentelemme edelleen CSS Gridin kanssa, clip-pathja mask, mutta tämän artikkelin loppuun mennessä päädymme erilaisiin tapoihin järjestää kuvia ruudukossa, mukaan lukien Rad hover -tehosteet, jotka tekevät kuvien katselusta aidon, interaktiivisen kokemuksen.

Ja arvaa mitä? Meillä on käytössä sama merkintä, jota käytimme viime kerralla. Tässä se taas:

<div class="gallery">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <!-- as many times as we want -->
</div>

Kuten edellisessä artikkelissa, tarvitsemme vain säiliön, jossa on kuvia. Ei mitään muuta!

Sisäkkäinen kuvaruudukko

Viime kerralla ruudukkomme olivat tyypillisiä kuvaruudukoita. Muut kuin siistit muodot, joilla naamioimme ne, ne olivat melko tavallisia symmetrisiä ruudukoita siltä osin kuin sijoitimme kuvat sisään.

Yritetään upottaa kuva ruudukon keskelle:

Aloitamme asettamalla 2✕2 ruudukon neljälle kuvalle:

.gallery {
  --s: 200px; /* controls the image size */
  --g: 10px; /* controls the gap between images */

  display: grid;
  gap: var(--g);
  grid-template-columns: repeat(2, auto);
}
.gallery > img {
  width: var(--s);
  aspect-ratio: 1;
  object-fit: cover;
}

Ei vielä mitään monimutkaista. Seuraava askel on leikata kuviemme kulmat luodaksesi tilan sisäkkäiselle kuvalle. Minulla on jo yksityiskohtainen artikkeli aiheesta kuinka leikata kulmia käyttämällä clip-path ja mask. Voit myös käyttää minun online-generaattori saadaksesi CSS:n kulmien peittämistä varten.

Tässä on leikattava kulmat yhtä suuressa kulmassa kuin 90deg. Voimme käyttää samaa kartiogradienttitekniikka artikkelista tehdä se:

.gallery > img {
   mask: conic-gradient(from var(--_a), #0000 90deg, #000 0);
}
.gallery > img:nth-child(1) { --_a: 90deg; }
.gallery > img:nth-child(2) { --_a: 180deg; }
.gallery > img:nth-child(3) { --_a: 0deg; }
.gallery > img:nth-child(4) { --_a:-90deg; }

Voisimme käyttää clip-path menetelmä kulmien leikkaamiseen samasta artikkelista, mutta liukuvärillä peittäminen sopii paremmin tähän, koska meillä on sama konfiguraatio kaikille kuville - tarvitsemme vain kierron (määritetty muuttujalla --_a) saa vaikutuksen, joten peitämme sisäpuolelta ulkoreunojen sijaan.

Nyt voimme sijoittaa sisäkkäisen kuvan peitetyn tilan sisään. Varmista ensin, että HTML-koodissa on viides kuvaelementti:

<div class="gallery">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <img src="..." alt="...">
</div>

Aiomme luottaa vanhaan hyvään absoluuttiseen sijoitukseen sijoittaaksemme sen sinne:

.gallery > img:nth-child(5) {
  position: absolute;
  inset: calc(50% - .5*var(--s));
  clip-path: inset(calc(var(--g) / 4));
}

- inset ominaisuuden avulla voimme sijoittaa kuvan keskelle yhdellä ilmoituksella. Tiedämme kuvan koon (määritetty muuttujalla --s), ja tiedämme, että säiliön koko on 100 %. Teemme laskelmia, ja etäisyyden jokaisesta reunasta tulee olla yhtä suuri (100% - var(--s))/2.

Saatat ihmetellä, miksi käytämme clip-path ollenkaan täällä. Käytämme sitä sisäkkäisen kuvan kanssa yhtenäisen aukon saamiseksi. Jos poistaisimme sen, huomaat, että kaikkien kuvien välillä ei ole samaa rakoa. Tällä tavalla leikkaamme hieman viidennestä kuvasta saadaksemme oikean välin sen ympärille.

Täydellinen koodi taas:

.gallery {
  --s: 200px; /* controls the image size */
  --g: 10px;  /* controls the gap between images */
  
  display: grid;
  gap: var(--g);
  grid-template-columns: repeat(2, auto);
  position: relative;
}

.gallery > img {
  width: var(--s);
  aspect-ratio: 1;
  object-fit: cover;
  mask: conic-gradient(from var(--_a), #0000 90deg, #000 0);
}

.gallery > img:nth-child(1) {--_a: 90deg}
.gallery > img:nth-child(2) {--_a:180deg}
.gallery > img:nth-child(3) {--_a:  0deg}
.gallery > img:nth-child(4) {--_a:-90deg}
.gallery > img:nth-child(5) {
  position: absolute;
  inset: calc(50% - .5*var(--s));
  clip-path: inset(calc(var(--g) / 4));
}

Nyt monet teistä saattavat myös ihmetellä: miksi kaikki monimutkainen tavara, kun voimme sijoittaa viimeisen kuvan päälle ja lisätä siihen reunan? Se piilottaisi kuvat sisäkkäisen kuvan alle ilman maskia, eikö niin?

Se on totta, ja saamme seuraavan:

Ei mask, ei clip-path. Kyllä, koodi on helppo ymmärtää, mutta siinä on pieni haittapuoli: reunuksen värin on oltava sama kuin päätaustan, jotta illuusio olisi täydellinen. Tämä pieni haittapuoli riittää minulle tekemään koodista monimutkaisemman vastineeksi todellisesta taustasta riippumattomasta läpinäkyvyydestä. En sano, että rajalähestymistapa olisi huono tai väärä. Suosittelen sitä useimmissa tapauksissa, joissa tausta on tiedossa. Mutta olemme täällä tutkimassa uusia asioita ja ennen kaikkea rakentamassa komponentteja, jotka eivät riipu ympäristöstään.

Kokeillaan tällä kertaa toista muotoa:

Tällä kertaa sisäkkäisestä kuvasta tehtiin ympyrä neliön sijaan. Sen kanssa on helppo tehtävä border-radius Mutta meidän on käytettävä a pyöreä leikkaus muille kuville. Tällä kertaa luotamme kuitenkin a radial-gradient() sijaan a conic-gradient() saadaksesi kauniin pyöreän ilmeen.

.gallery > img {
  mask: 
    radial-gradient(farthest-side at var(--_a),
      #0000 calc(50% + var(--g)/2), #000 calc(51% + var(--g)/2));
}
.gallery > img:nth-child(1) { --_a: calc(100% + var(--g)/2) calc(100% + var(--g)/2); }
.gallery > img:nth-child(2) { --_a: calc(0%   - var(--g)/2) calc(100% + var(--g)/2); }
.gallery > img:nth-child(3) { --_a: calc(100% + var(--g)/2) calc(0%   - var(--g)/2); }
.gallery > img:nth-child(4) { --_a: calc(0%   - var(--g)/2) calc(0%   - var(--g)/2); }

Kaikki kuvat käyttävät samaa kokoonpanoa kuin edellinen esimerkki, mutta päivitämme keskipisteen joka kerta.

Yllä oleva kuva havainnollistaa kunkin ympyrän keskipistettä. Kuitenkin varsinaisessa koodissa huomaat, että otan huomioon myös aukon varmistaakseni, että kaikki pisteet ovat samassa paikassa (ruudukon keskellä), jotta saadaan jatkuva ympyrä, jos yhdistämme ne.

Nyt kun meillä on asettelu, puhutaan hover-efektistä. Jos et huomannut, viileä hover-tehoste lisää sisäkkäisen kuvan kokoa ja säätää kaikkea muuta vastaavasti. Koon kasvattaminen on suhteellisen helppoa, mutta liukuvärin päivittäminen on monimutkaisempaa, koska oletusarvoisesti liukuvärejä ei voi animoida. Tämän voittamiseksi käytän a font-size hakkeroida säteittäisen gradientin animoimiseksi.

Jos tarkistat gradientin koodin, näet, että lisään 1em:

mask: 
    radial-gradient(farthest-side at var(--_a),
      #0000 calc(50% + var(--g)/2 + 1em), #000 calc(51% + var(--g)/2 + 1em));

Se tiedetään em yksiköt ovat suhteessa pääelementtiin font-size, joten muuttaminen font-size että .gallery muuttaa myös laskettua em arvo – tämä on temppu, jota käytämme. Animoimme font-size arvosta 0 annettuun arvoon ja sen seurauksena liukuväri animoituu, mikä tekee leikatusta osasta suuremmaksi seuraten kasvavan sisäkkäisen kuvan kokoa.

Tässä on koodi, joka korostaa hover-tehosteen osat:

.gallery {
  --s: 200px; /* controls the image size */
  --g: 10px; /* controls the gaps between images */

  font-size: 0; /* initially we have 1em = 0 */
  transition: .5s;
}
/* we increase the cut-out by 1em */
.gallery > img {
  mask: 
    radial-gradient(farthest-side at var(--_a),
      #0000 calc(50% + var(--g)/2 + 1em), #000 calc(51% + var(--g)/2 + 1em));
}
/* we increase the size by 2em */
.gallery > img:nth-child(5) {
  width: calc(var(--s) + 2em);
}
/* on hover 1em = S/5 */
.gallery:hover {
  font-size: calc(var(--s) / 5);
}

- font-size temppu on hyödyllinen, jos haluamme animoida gradientteja tai muita ominaisuuksia, joita ei voi animoida. @propertylla määritetyt mukautetut ominaisuudet voivat ratkaista tällaisen ongelman, mutta tukea sille puuttuu vielä tätä kirjoitettaessa.

Löysin sen font-size temppu alkaen @SelenIT2 yrittäessään ratkaista haaste Twitterissä.

Toinen muoto? Mennään!

Tällä kertaa leikkasimme sisäkkäisen kuvan rombin muotoon. Annan sinun purkaa koodia harjoituksena selvittääksesi, kuinka olemme päässeet tähän. Huomaat, että rakenne on sama kuin esimerkeissämme. Ainoat erot ovat siinä, kuinka käytämme gradienttia muodon luomiseen. Kaivaudu sisään ja opi!

Pyöreä kuvaruudukko

Voimme yhdistää täällä ja aiemmissa artikkeleissa oppimamme ja luoda entistä jännittävämmän kuvaruudukon. Tehdään tällä kertaa kaikista ruudukkomme kuvista pyöreitä ja laajenna hiiri päällä kuvaa paljastamaan koko asia, sillä se peittää muut valokuvat.

Ruudukon HTML- ja CSS-rakenne ei ole mitään uutta, joten ohitetaan se osa ja keskitytään sen sijaan haluamaasi pyöreään muotoon ja hover-efektiin.

Aiomme käyttää clip-path ja se on circle() toimii - arvasit sen! - leikkaa ympyrä kuvista.

Tuo kuva havainnollistaa clip-path käytetään ensimmäisessä kuvassa. Vasemmalla puolella näkyy kuvan alkutila, kun taas oikealla näkyy leijuva tila. Voit käyttää tämä online-työkalu pelata ja visualisoida clip-path arvot.

Muissa kuvissa voimme päivittää ympyrän keskikohdan (70% 70%) saadaksesi seuraavan koodin:

.gallery > img:hover {
  --_c: 50%; /* same as "50% at 50% 50%" */
}
.gallery > img:nth-child(1) {
  clip-path: circle(var(--_c, 55% at 70% 70%));
}
.gallery > img:nth-child(2) {
  clip-path: circle(var(--_c, 55% at 30% 70%));
}
.gallery > img:nth-child(3) {
  clip-path: circle(var(--_c, 55% at 70% 30%));
}
.gallery > img:nth-child(4) {
  clip-path: circle(var(--_c, 55% at 30% 30%));
}

Huomaa, kuinka määrittelemme clip-path arvot sisäisenä varaosana var(). Tällä tavalla voimme helpommin päivittää osoittimen arvon asettamalla arvon --_c muuttuja. Käytettäessä circle(), keskipisteen oletussijainti on 50% 50%, joten se jätetään pois tiiviimmän koodin saamiseksi. Siksi näet, että olemme vain asettamassa 50% sijasta 50% at 50% 50%.

Sitten suurennamme kuvamme kokoa hiirellä ruudukon kokonaiskokoon, jotta voimme peittää muut kuvat. Varmistamme myös z-index on korkeampi arvo leijutetussa kuvassa, joten se on suosituin arvomme pinoamalla kontekstin.

.gallery {
  --s: 200px; /* controls the image size */
  --g: 8px;   /* controls the gap between images */

  display: grid;
  grid: auto-flow var(--s) / repeat(2, var(--s));
  gap: var(--g);
}

.gallery > img {
  width: 100%; 
  aspect-ratio: 1;
  cursor: pointer;
  z-index: 0;
  transition: .25s, z-index 0s .25s;
}
.gallery > img:hover {
  --_c: 50%; /* change the center point on hover */
  width: calc(200% + var(--g));
  z-index: 1;
  transition: .4s, z-index 0s;
}

.gallery > img:nth-child(1){
  clip-path: circle(var(--_c, 55% at 70% 70%));
  place-self: start;
}
.gallery > img:nth-child(2){
  clip-path: circle(var(--_c, 55% at 30% 70%));
  place-self: start end;
}
.gallery > img:nth-child(3){
  clip-path: circle(var(--_c, 55% at 70% 30%));
  place-self: end start;
}
.gallery > img:nth-child(4){
  clip-path: circle(var(--_c, 55% at 30% 30%));
  place-self: end;
}

Mitä tapahtuu place-self omaisuutta? Miksi tarvitsemme sitä ja miksi jokaisella kuvalla on tietty arvo?

Muistatko ongelman, joka meillä oli edellisessä artikkelissa palapelin palasten ruudukon luominen? Suurestimme kuvien kokoa ylivuotojen luomiseksi, mutta joidenkin kuvien ylivuoto oli virheellinen. Korjasimme ne käyttämällä place-self omaisuutta.

Sama ongelma täällä. Suurennamme kuvien kokoa niin, että jokainen niistä ylittää ruudukkosolunsa. Mutta jos emme tee mitään, ne kaikki vuotavat yli ruudukon oikealla ja alapuolella. Tarvitsemme:

1. ensimmäinen kuva, joka ylittää oikean alareunan (oletustoiminto),
2. toinen kuva ylittää vasemman alareunan,
3. kolmas kuva, joka ylittää oikean yläreunan, ja
4. neljäs kuva ylittämään vasemman yläreunan.

Tämän saavuttamiseksi meidän on sijoitettava jokainen kuva oikein käyttämällä place-self omaisuutta.

Jos et ole perehtynyt place-self, se on lyhenne sanalle justify-self ja align-self sijoittaaksesi elementin vaakasuoraan ja pystysuoraan. Kun se ottaa yhden arvon, molemmat tasaukset käyttävät samaa arvoa.

Kuvapaneelien laajentaminen

Edellisessä artikkelissa, loin hienon zoomaustehosteen, joka koskee kuvien ruudukkoa, jossa voimme hallita kaikkea: rivien määrää, sarakkeiden määrää, kokoja, skaalaustekijää jne.

Erityinen tapaus oli klassiset laajenevat paneelit, joissa meillä on vain yksi rivi ja täysleveä kontti.

Otamme tämän esimerkin ja yhdistämme sen muotoihin!

Ennen kuin jatkamme, suosittelen lukemaan minun toinen artikkeli ymmärtääksemme, kuinka temput, joita aiomme kattaa, toimivat. Tarkista se, ja jatkamme täällä keskittyäksemme paneelimuotojen luomiseen.

Aloitetaan ensin yksinkertaistamalla koodia ja poistamalla joitain muuttujia

Tarvitsemme vain yhden rivin, ja sarakkeiden lukumäärää tulisi säätää kuvien määrän mukaan. Tämä tarkoittaa, että emme enää tarvitse muuttujia rivien lukumäärälle (--n) ja sarakkeet (--m ), mutta meidän on käytettävä grid-auto-flow: column, jolloin ruudukko voi luoda sarakkeita automaattisesti, kun lisäämme uusia kuvia. Harkitsemme konttimme kiinteää korkeutta; oletusarvoisesti se on täysleveä.

Leikataan kuvat vinoon muotoon:

Jälleen kerran jokainen kuva sisältyy sen ruudukkosoluun, joten kuvien välissä on enemmän tilaa kuin haluaisimme:

Meidän on lisättävä kuvien leveyttä päällekkäisyyden luomiseksi. Vaihdamme min-width: 100% with min-width: calc(100% + var(--s)), Jossa --s on uusi muuttuja, joka ohjaa muotoa.

Nyt meidän on korjattava ensimmäinen ja viimeinen kuva, jotta ne ikään kuin vuotavat sivulta ilman aukkoja. Toisin sanoen, voimme poistaa vinon ensimmäisen kuvan vasemmalta puolelta ja vinon viimeisen kuvan oikealta puolelta. Tarvitsemme uuden clip-path erityisesti näille kahdelle kuvalle.

Meidän on myös korjattava ylivuoto. Oletusarvoisesti kaikki kuvat ylivuoto molemmilta puolilta, mutta ensimmäisen kuvan kohdalla tarvitsemme ylivuotoa oikealle, kun taas viimeiselle kuvalle tarvitsemme ylivuotoa vasemmalle.

.gallery > img:first-child {
  min-width: calc(100% + var(--s)/2);
  place-self: start;
  clip-path: polygon(0 0,100% 0,calc(100% - var(--s)) 100%,0 100%);
}
.gallery > img:last-child {
  min-width: calc(100% + var(--s)/2);
  place-self: end;
  clip-path: polygon(var(--s) 0,100% 0,100% 100%,0 100%);
}

Lopputuloksena on mukava laajeneva vinokuvien paneeli!

Voimme lisätä niin monta kuvaa kuin haluat, ja ruudukko mukautuu automaattisesti. Lisäksi meidän tarvitsee hallita vain yhtä arvoa muodon hallitsemiseksi!

Olisimme voineet tehdä saman asettelun flexboxilla, koska kyseessä on yksi rivi elementtejä. Täällä on minun toteutus.

Toki, vinot kuvat ovat siistejä, mutta entä siksak-kuvio? Olen jo kiusannut tätä viimeisen artikkelin loppu.

Kaikki mitä teen täällä, on vaihtaminen clip-path with mask… ja arvaa mitä? Minulla on jo yksityiskohtainen artikkeli aiheesta luomalla tuon siksak-muodon – netistä puhumattakaan generaattori saadaksesi koodin. Näetkö kuinka kaikki yhdistyy?

Hankalin osa tässä on varmistaa, että siksakit ovat täydellisesti kohdakkain, ja tätä varten meidän on lisättävä poikkeama jokaiselle :nth-child(odd) kuva elementti.

.gallery > img {
  mask: 
    conic-gradient(from -135deg at right, #0000, #000 1deg 89deg, #0000 90deg) 
      100% calc(50% + var(--_p, 0%))/51% calc(2*var(--s)) repeat-y,
    conic-gradient(from   45deg at left,  #0000, #000 1deg 89deg, #0000 90deg) 
      0%   calc(50% + var(--_p, 0%))/51% calc(2*var(--s)) repeat-y;
}
/* we add an offset to the odd elements */
.gallery > img:nth-child(odd) {
  --_p: var(--s);
}
.gallery > img:first-child {
  mask: 
    conic-gradient(from -135deg at right, #0000, #000 1deg 89deg, #0000 90deg) 
      0 calc(50% + var(--_p, 0%))/100% calc(2*var(--s));
}
.gallery > img:last-child {
  mask: 
    conic-gradient(from 45deg at left, #0000, #000 1deg 89deg, #0000 90deg) 
      0 calc(50% + var(--_p, 0%)) /100% calc(2*var(--s));
}

Huomaa käyttö --_p muuttuja, joka palaa takaisin 0% mutta tulee olemaan yhtä suuri --_s outoille kuville.

Tässä on demo, joka havainnollistaa ongelmaa. Vie hiiren osoitin nähdäksesi, miten siirtymä — määritellään --_p - korjaa linjausta.

Huomaa myös, kuinka käytämme eri maskia ensimmäisessä ja viimeisessä kuvassa, kuten teimme edellisessä esimerkissä. Tarvitsemme vain siksakin ensimmäisen kuvan oikealle puolelle ja viimeisen kuvan vasemmalle puolelle.

Ja miksi ei pyöristetyt sivut? Tehdään se!

Tiedän, että koodi saattaa näyttää pelottavalta ja vaikeasti ymmärrettävältä, mutta kaikki, mitä tapahtuu, on yhdistelmä erilaisia ​​temppuja, joita olemme käsitelleet tässä ja muissa jo jakamissani artikkeleissa. Tässä tapauksessa käytän samaa koodirakennetta kuin siksak ja vinot muodot. Vertaa sitä näihin esimerkkeihin, niin et löydä eroa! Nämä ovat samoja temppuja edellinen artikkelini zoomaustehosteesta. Sitten käytän omaani muu kirjoitus ja minun online-generaattorini saadaksesi koodin maskille, joka luo nuo pyöristetyt muodot.

Jos muistat, mitä teimme siksakille, olimme käyttäneet samaa maskia kaikissa kuvissa, mutta sitten piti lisätä outset kuviin poikkeama luodaksemme täydellisen päällekkäisyyden. Tässä tapauksessa tarvitsemme eri maskin parittomille kuville.

Ensimmäinen naamio:

mask: 
  linear-gradient(-90deg,#0000 calc(2*var(--s)),#000 0) var(--s),
  radial-gradient(var(--s),#000 98%,#0000) 50% / calc(2*var(--s)) calc(1.8*var(--s)) space repeat;

Toinen:

mask:
  radial-gradient(calc(var(--s) + var(--g)) at calc(var(--s) + var(--g)) 50%,#0000 98% ,#000) 
  calc(50% - var(--s) - var(--g)) / 100% calc(1.8*var(--s))

Ainoa yritys, jonka tein tässä, on päivittää toinen maski sisältämään aukon muuttujan (--g) luodaksesi tilan kuvien väliin.

Viimeinen silaus on korjata ensimmäinen ja viimeinen kuva. Kuten kaikki edelliset esimerkit, ensimmäinen kuva tarvitsee suoran vasemman reunan, kun taas viimeinen tarvitsee suoran oikean reunan.

Ensimmäistä kuvaa varten tiedämme aina maskin, joka sillä on oltava, mikä on seuraava:

.gallery > img:first-child {
  mask: 
    radial-gradient(calc(var(--s) + var(--g)) at right, #0000 98%, #000) 50% / 100% calc(1.8 * var(--s));
}

Viimeisen kuvan kohdalla se riippuu elementtien lukumäärästä, joten sillä on merkitystä, onko kyseinen elementti :nth-child(odd) or :nth-child(even).

.gallery > img:last-child:nth-child(even) {
  mask: 
    linear-gradient(to right,#0000 var(--s),#000 0),
    radial-gradient(var(--s),#000 98%,#0000) left / calc(2*var(--s)) calc(1.8*var(--s)) repeat-y
}

.gallery > img:last-child:nth-child(odd) {
  mask: 
    radial-gradient(calc(var(--s) + var(--g)) at left,#0000 98%,#000) 50% / 100% calc(1.8*var(--s))
}

Siinä kaikki! Kolme erilaista ulkoasua, mutta samat CSS-temput joka kerta:

• koodirakenne zoomaustehosteen luomiseksi
• maski tai leikepolku muotojen luomiseksi
• joissakin tapauksissa erillinen konfiguraatio parittomille elementeille varmistaaksemme täydellisen päällekkäisyyden
• erityinen konfiguraatio ensimmäiselle ja viimeiselle kuvalle, jotta muoto pysyy vain toisella puolella.

Ja tässä on iso demo, jossa ne kaikki yhdessä. Sinun tarvitsee vain lisätä luokka aktivoidaksesi haluamasi asettelun.

Ja tässä on Flexbox-toteutus

Käärimistä

Oho, ollaan valmis! Tiedän, että tämän artikkelin ja edellisen välillä on monia CSS-temppuja ja esimerkkejä, puhumattakaan kaikista muista temppuista, joihin olen viitannut täällä muista kirjoittamistani artikkeleista. Minulta meni aikaa laittaa kaikki yhteen, eikä kaikkea tarvitse ymmärtää kerralla. Yksi lukeminen antaa hyvän yleiskatsauksen kaikista asetteluista, mutta saatat joutua lukemaan artikkelin useammin kuin kerran ja keskittymään jokaiseen esimerkkiin ymmärtääksesi kaikki temput.

Huomasitko, että emme koskettaneet HTML-koodia ollenkaan, paitsi kenties merkinnöissä olevien kuvien määrään? Kaikilla tekemillämme asetteluilla on sama HTML-koodi, joka on vain kuvien luettelo.

Ennen kuin lopetan, jätän teille viimeisen esimerkin. Se on kahden animehahmon välinen "versus" viileällä hover-efektillä.

Entä sinä? Voitko luoda jotain oppimasi perusteella? Sen ei tarvitse olla monimutkaista – kuvittele jotain siistiä tai hauskaa, kuten tein tuon anime-yhteen kanssa. Se voi olla hyvä harjoitus sinulle, ja saatamme lopettaa erinomaisen kokoelman kommenttiosiossa.