Ultimele tutoriale de dezvoltare web
 

CSS Image Sprites

❮ precedent Capitolul următor ❯

sprite-uri

O sprite imagine este o colecție de imagini puse în o singură imagine.

O pagină web cu multe imagini poate dura o lungă perioadă de timp pentru a încărca și generează mai multe cereri de server.

Folosind sprite-uri va reduce numărul de cereri de server și de a salva de lățime de bandă.

Sprite-uri - Exemplu simplu

În loc de a folosi trei imagini separate, vom folosi această singură imagine ("img_navsprites.gif") :

imagini de navigare

Cu CSS, putem arăta doar o parte a imaginii care avem nevoie.

În exemplul următor CSS specifică ce parte a "img_navsprites.gif" imagine pentru a arăta:

Exemplu

#home {
    width: 46px;
    height: 44px;
    background: url(img_navsprites.gif) 0 0;
}
Încearcă - l singur »

Example explained:

  • <img id="home" src="img_trans.gif"> - definește doar o imagine mică transparentă , deoarece src atribut nu poate fi gol. Imaginea afisata va fi imaginea de fundal vom specifica în CSS
  • width: 46px; height: 44px; - Definește porțiunea imaginii dorim să folosim
  • background: url(img_navsprites.gif) 0 0; - Definește imaginea de fundal și poziția sa (left 0px, top 0px) din (left 0px, top 0px)

Acesta este cel mai simplu mod de a utiliza sprite-uri, acum vrem să-l extindă prin link-uri și plasați cursorul efecte.

Sprite-uri - Crearea unei liste de navigare

Dorim să folosim imaginea sprite ("img_navsprites.gif") pentru a crea o listă de navigare.

Vom folosi o listă HTML, deoarece aceasta poate fi o legătură și sprijină, de asemenea, o imagine de fundal:

Exemplu

#navlist {
    position: relative;
}

#navlist li {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    top: 0;
}

#navlist li, #navlist a {
    height: 44px;
    display: block;
}

#home {
    left: 0px;
    width: 46px;
    background: url('img_navsprites.gif') 0 0;
}

#prev {
    left: 63px;
    width: 43px;
    background: url('img_navsprites.gif') -47px 0;
}

#next {
    left: 129px;
    width: 43px;
    background: url('img_navsprites.gif') -91px 0;
}
Încearcă - l singur »

Example explained:

  • #navlist {position:relative;} - poziția este aleasă în raport pentru a permite poziționarea absolută în interiorul acestuia
  • #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - marjă și padding este setat la 0, lista de stil este îndepărtat, iar toate elementele de listă sunt absolute poziționate
  • #navlist li, #navlist a {height:44px;display:block;} - înălțimea tuturor imaginilor sunt 44px

Acum începe în poziția și stil pentru fiecare parte specifică:

  • #home {left:0px;width:46px;} - Poziționată tot drumul spre stânga, iar lățimea imaginii este 46px
  • #home {background: url(img_navsprites.gif) 0 0;} - Definește imaginea de fundal și poziția (left 0px, top 0px)
  • #prev {left:63px;width:43px;} - 63px spre dreapta Poziționată (#home width 46px + some extra space between items) , iar lățimea este 43px.
  • #prev {background: url('img_navsprites.gif') -47px 0;} - Definește 47px imagine de fundal la dreapta (# pagină_de_pornire latime 46px + 1pixel linie compas)
  • #next {left:129px;width:43px;} - Poziționată 129px spre dreapta (începutul #prev este 63px + latime #prev 43px + spațiu suplimentar), iar lățimea este 43px.
  • #next {background: url('img_navsprites.gif') -91px 0;} - Definește 91px imagine de fundal la dreapta (# pagină_de_pornire latime 46px + 1pixel linie compas + latime #prev 43px + 1pixel linie compas)

Sprite-uri - Hover Efect

Acum vrem să adăugați un efect de planare la lista noastră de navigare.

Sfat: :hover selector poate fi folosit pe toate elementele, nu numai pe link - uri.

Noua noastră imagine ("img_navsprites_hover.gif") conține trei imagini de navigare și trei imagini pentru a le utiliza pentru efectele maus deasupra:

imagini de navigare

Deoarece aceasta este o imagine unică, și nu șase fișiere separate, nu va fi no loading delay o no loading delay de no loading delay atunci când un utilizator trece peste imaginea.

Noi adăugăm doar trei linii de cod pentru a adăuga efectul Hover:

Exemplu

#home a:hover {
    background: url('img_navsprites_hover.gif') 0 -45px;
}

#prev a:hover {
    background: url('img_navsprites_hover.gif') -47px -45px;
}

#next a:hover {
    background: url('img_navsprites_hover.gif') -91px -45px;
}
Încearcă - l singur »

Exemplu explicat:

  • #home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} - #home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} - Pentru toate cele trei imagini hover vom specifica aceeași poziție de fond, numai 45px mai jos

❮ precedent Capitolul următor ❯