CSS sprites

| | , ,

Akik még csak most ismerkednek a webfejlesztéssel, ezen belül is a frontend készítéssel, azok jogosan rakhatják fel a kérdést, hogy mi is ez a CSS sprite?

Nos, röviden megfogalmazva ez nem több, mint egy hangzatos kifejezés egy kódolási módszerre. A lényege annyi, hogy a linkeknél elkészítjük az összes állapotnak megfelelő háttérképet, majd ezeket egy képként összefűzzük és csak pozícionáljuk a képet a link hátterében.

A módszer előnye a hagyományos 3 vagy több képes megoldással szemben, a következő:

  • ha az egeret a link fölé visszük, vagy kattintunk a linken, akkor nem kell az új képek betöltődésére várni
  • mivel már az oldal megnyitásakor megjelenik a kép, így nincs villogás a link használatakor (lásd: előző pont)
  • egy HTTP kérés lesz a három vagy több helyett (csökken az oldal betöltődési ideje)
  • nem igényel több munkát, mint a hagyományos megoldás

Az előnyök után jöjjenek a hátrányok:

  • a nem használt linkek esetében 2-3x akkora méretű kép töltődik be, mint amekkorát a felhasználók látnak
  • a kép elkészítésénél ügyelni kell, hogy minden pixel ott legyen, ahol mi szeretnénk

Az előnyök és hátrányok ismertetése után jöjjön egy egyszerű példa a használatra (a példakód az oldalon található Creative Commons link működését mutatja be, ezért mégegyszer nem raknám ki a linket):

cssa, a:link, a:visited{
    width: 140px;
    height: 35px;
    display: block;
    background: url('/style/image/cc_logo.png') 0px 0px;
}

a:hover{
    background: url('/style/image/cc_logo.png') 0px -35px;
}

A link ezt a képet tölti be:

Creative Commons logo

A kód működése nagyon egyszerű. A linkünknek először is megadjuk a méretét (width és height, illetve megadjuk, hogy blokkosan jelenjen meg), majd pozícionáljuk a háttérképet, hogy az első 140x35 pixeles része látszódjon a képnek.

Mikor a link fölé visszük az egeret, akkor a :hover esemény következik be, melyben megadtuk, hogy a kép -35 pixellel tolódjon el felfelé (vagyis egészen pontosan a kép 0,0 pixele a 0,-35 helyen legyen). Ekkor már a kép második 35 képpont magas sávját látjuk.

Természetesen beállítható lenne az is, hogy az :active eseményre egy harmadik sáv/kép töltődjön be -70 pixeles eltolással, valamint a már megtekintett linkeknek is lehetne külön képet adni, stb., de a fenti kód alapján már szerintem bárki boldogul vele.

0 hozzászólás

Még nem érkezett hozzászólás...

Hozzászólás küldéshez jelentkezz be!

Download Vivaldi Today!

Hasznos oldalak, linkek

tutorial.hu

Honlapkészítés, weboldal készítés kapcsán hasznos leírások


WebPillangó

Webprogramozás és grafika, photoshop leírások és kiegészítők


Blogom

blog.fefy.info bejegyzések

Apró szösszenetek egy informatikus életéből

Valid XHTML1.0 | valid CSS | 100% tableless
© 2011 - 2017 fefy.info | Az oldal betöltődési ideje: 301ms