Pikkukuvat ovat yksi puhtaimmista käytettävyydestä, jonka digitaalinen ikä on luonut. Pohjimmiltaan pikkukuva on esikatselu, lupaus siitä, mitä näet klikkaamalla linkkiä. Pieni visiiri, jossa on vähemmän tietoja, nopeampi kuorma ja vähemmän ahneita näytön kiinteistöille kuin koko kokoinen omaisuus. Ne sopivat ihanteellisesti kuviin, mutta entä videoita?

No, laajentamalla tekniikkaa, jota käytämme jo näppäinvaltioissa, voimme luoda hämmästyttäviä animoituja pikkukuvia, joissa on perus CSS ja pieni jQuery.

Miten CSS-spritit toimivat

Nykyään latausnopeudet eivät ole tällainen ongelma web-kehittäjille. Tietenkin pienet tiedostokoot ovat silti toivottavia, mutta useimpien sivustojen todellinen suorituskyky on HTTP-pyyntöjen määrä. Aina kun sivustosi lataa sisällön, selain tekee HTTP-pyynnön, joka lähetetään, käsitellään ja palautetaan. Tarkista konsolisi, että sivustosi myöhästymisestä ei ole mitään tekemistä kuvakoon kanssa, se on käytetty odottamassa palvelimen vastausta.

Ratkaisu on CSS sprite -tekniikka; useiden kuvien ompeleminen yhdeksi kuvatiedostoksi ja selektiivisesti näyttämään kyseisen kuvan eri osat CSS: llä.

Perinteisesti mikä tahansa painike, jota emme voi luoda perus CSS-tyylillä, luomme kolme tilaa; off , over and a down :

.button{background:url('off-state.png');}.button:hover{background:url('over-state.png');}.button:active{background:url('down-state.png');}

Tämä johtaisi kolmeen kuvaan, jotka ladataan palvelimelta ja tuottavat kolme HTTP-pyyntöä.

Kun rakennamme tämän CSS-spriteinä, tallennamme kaikki kolme kuvaa vierekkäin yhdeksi tiedostoksi (niin, että sen sijaan, että käytämme kolmea 200-sivua suurta kuvaa, meillä on yksi 600px: n laaja kuva) ja muuttaa kuvan sijaintia CSS: n tausta-aseman omaisuudella :

.button{display:block;width:200px;height:83px;background:url('button-states.jpg');}.button:hover{background-position:-200px;}.button:active{background-position:-400px;}

Ajattele elementtiä ikkunana, jonka kautta näet kuvan. Voit siirtää kuvaa, mutta ikkuna pysyy samassa asennossa. Jos varmistat, että elementti on kooltaan sama kuin kuvan osa, jonka haluat näyttää vaikutuksen, on saumaton: