Share
Te-ai întrebat vreodată cum să folosești CSS Sprites în propriile proiecte web? Astăzi, Tom Green (rezidentul nostru expert Adobe) se va strădui cum să creeze sprite de CSS în Fireworks și apoi să le folosească în Dreamweaver. Dacă nu ați mai utilizat CSS Sprites înainte sau dacă sunteți în căutarea unei modalități mai ușoare de a le implementa, nu mai căutați!
Puneți pur și simplu, un sprite este o metodă de a folosi o singură imagine ca mijloc de stocare a mai multor imagini mai mici. De exemplu, aruncați o privire asupra sprite-ului folosit la Webdesigntuts:
Când începem codarea, putem folosi pur și simplu poziționarea CSS și decuparea imaginii pentru a arăta bucata de sprite pe care o dorim.
De ce să folosiți un CSS Sprite? Viteză! Utilizarea sprite pentru a stoca imaginile va reduce timpul necesar pentru a încărca o întreagă pagină web? atunci când imaginile sunt re-folosite din nou și din nou pe mai multe pagini, acest lucru poate însemna mult timp salvat.
Sprites sunt cel mai bine utilizate cu imagini mai mici, care se obisnuiesc de peste si peste din nou. De exemplu, cea mai mare parte a activelor discutate într-un întreg site poate fi efectiv redusă la un sprite cum ar fi:
Într-un singur sprite, am pregătit deja cea mai mare parte a graficii noastre de design pentru codificare? și totul este sub 19kb! Nu e rău corect?
Pentru a crea propriul dvs. sprite, trebuie doar să creați un document gol (începeți cu orice dimensiune, în cele din urmă veți decupa acest lucru pentru a se potrivi cu greu fiecărui element al spritei), apoi adăugați elemente de design cu o cantitate rezonabilă de umplutură între fiecare element. Iată câteva trucuri suplimentare:
În regulă, acum că elementele de bază sunt în cale, Tom ne va arăta cum să le creăm în câteva videoclipuri rapide!
Aceste videoclipuri sunt înregistrate în format HD, deci nu ezitați să atingeți butonul HD și să o scalați astfel încât să se potrivească întregului ecran astfel încât să puteți urmări îndeaproape.
Destul de ușor de făcut? Adăugarea de CSS Sprites la propriile proiecte este rapidă și ușoară? ceea ce face ca acesta să fie un instrument excelent pentru a adăuga la punga ta de trucuri. Ce este mai bine este că Fireworks și Dreamweaver (sau orice aplicație de codificare) vă permit să utilizați sprite "prin numere", ceea ce le simplifică și mai mult. Asta e pentru ziua de azi - adăugați mai jos întrebări, comentarii sau trucuri proprii!
Accentsconagua