Slik bruker du CSS Sprites i fyrverkeri og Dreamweaver

Noen gang lurt på hvordan bruk CSS Sprites i dine egne webprosjekter? I dag skal Tom Green (vår bosatt Adobe-ekspert) gå gjennom hvordan man lager CSS sprites i fyrverkeri, og legg dem til bruk i Dreamweaver. Hvis du ikke har brukt CSS Sprites før, eller hvis du bare leter etter en enklere måte å implementere dem på, ser du ikke lenger!

Hva er CSS Sprites?

Enkelt sagt, en sprite er en metode for å bruke et enkelt bilde som et middel til å lagre flere mindre bilder. For eksempel, ta en titt på sprite som blir brukt på Webdesigntuts:

Når vi starter kodingen, kan vi bare bruke CSS posisjonering og beskjæring av bildet for å vise stykket av sprite som vi vil ha.

Hvorfor bruke en CSS Sprite? Hastighet! Bruke sprites til å lagre bilder vil redusere tiden det tar å laste inn en hel nettside? når bilder blir gjenbrukes igjen og igjen på flere sider, kan dette bety mye lagret tid.

Sprites brukes best med mindre bilder som blir brukt igjen og igjen. For eksempel kan de fleste eiendelene som diskuteres på et helt nettsted, faktisk reduseres til en sprite som dette:

I en enkelt sprite har vi allerede prepped mesteparten av vår designgrafikk for koding? og det er alt under 19 KB! Ikke dårlig riktig?

For å lage din egen sprite, bare opprett et tomt dokument (starte med en hvilken som helst størrelse, vil du etter hvert beskjære dette til bare å passe nesten hvert element på sprite), og legg deretter til designelementene med en rimelig mengde polstring mellom hver element. Her er noen ekstra triks:

Elementer som er fordelt jevnt i designen, skal være fordelt jevnt i sprite (som de sosiale medier-ikonene)
Hvis et element er gjennomsiktig (som våre skyvefliker), må du kontrollere at det vises så godt gjennomsiktig i sprite
Lagre det siste spritbildet som en gjennomsiktig PNG-24? så er du klar til å rocke og rulle!

Ok, nå som det grunnleggende er ute av veien, kommer Tom å vise oss hvordan man lager disse i et par raske videoer!

Videoene

Disse videoene er innspilt i HD, så vær så snill å treffe HD-knappen og skala denne opp for å passe hele skjermen slik at du kan følge med tett.

Fyrverkeri-trinnet (Opprett sprite)

Dreamweaver-trinnet (koding av Sprite)

Det er det!

Ganske enkelt riktig? Å legge CSS Sprites til dine egne prosjekter er raskt og enkelt? som gjør det til et flott verktøy for å legge til din pose med triks. Hva er bedre er at fyrverkeri og Dreamweaver (eller en hvilken som helst kodende app) lar deg bruke sprites "by the numbers", noe som forenkler det enda lenger. Det er det for i dag - legg til noen spørsmål, kommentarer eller triks av dine egne nedenfor!

Webdesign