Compass Sprites

705 views
631 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
705
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Compass Sprites

  1. 1. COMPASS SPRITING SPRITES ERSTELLEN MIT COMPASS ©2012 Michael van Engelshoven
  2. 2. WAS SIND SPRITES?
  3. 3. SPRITES MINIMIEREN DIE ANZAHL DER REQUESTSSo lässt sich eine Seite schneller ausliefern. Speziell wenn viele kleine Bilder benutzt werden
  4. 4. ALLE ICONS IN EINEM BILD ANORDNEN
  5. 5. SPRITE IM CSS DEFINIEREN.ete-la-a, wahrcerdy.ete-la-ih, wahrcerngt.ete-lul-a, wahrcodydy.ete-lul-ih { wahrcodyngt bcgon-mg:ul/mgseapesrt.n) akrudiae r(iae/xml-piepg; bcgon-eet n-eet akrudrpa: orpa;}.ete-la-a wahrcerdy {bcgon-oiin 00 } akrudpsto: ;.ete-la-ih wahrcerngt {bcgon-oiin 20x0 } akrudpsto: 0p ;.ete-lul-a wahrcodydy {bcgon-oiin 20x0 } akrudpsto: 5p ;.ete-lul-ih {bcgon-oiin 30x0 } wahrcodyngt akrudpsto: 0p ;
  6. 6. BEISPIEL FACEBOOK
  7. 7. BEISPIEL WUNDERLIST2
  8. 8. UND WIE HILFT UNS JETZT COMPASS?
  9. 9. EINZELNE BILDER IN EIN VERZEICHNIS KOPIEREN[mgsdr/ iae_i] srts pie/ wahr ete/ cerdypg la-a.n cerngtpg la-ih.n codydypg lul-a.n codyngtpg lul-ih.n
  10. 10. SPRITE IN EIN COMPASS-STYLESHEET EINBINEN@mot"pie/ete/.n" ipr srtswahr*pg;@nld alwahrsrts icue l-ete-pie;
  11. 11. UND WIR BEKOMMEN.ete-pie wahrsrt,.ete-la-ih, wahrcerngt.ete-lul-a, wahrcodydy.ete-lul-ih { wahrcodyngt bcgon:uliae/ete-3f00a.n n-eet akrud r(/mgswahrs4e64bpg) orpa;}.ete-la-a wahrcerdy {bcgon-oiin 00 } akrudpsto: ;.ete-la-ih wahrcerngt {bcgon-oiin 20x0 } akrudpsto: 0p ;.ete-lul-a wahrcodydy {bcgon-oiin 20x0 } akrudpsto: 5p ;.ete-lul-ih {bcgon-oiin 30x0 } wahrcodyngt akrudpsto: 0p ;
  12. 12. SPRITES EINZELN EINBINDEN@mot"pie/ete/.n" ipr srtswahr*pg;.ete-igtdy.lul { wahrwde.a cody @nld wahrsrt(codydy) icue ete-pie"lul-a";}
  13. 13. MAGIC SELECTORS
  14. 14. DATEIEN MIT SUFFIXEN VERSEHEN[mgsdr/ iae_i] btos utn/ gos.n lsypg gos_oe.n lsyhvrpg gos_ciepg lsyatv.n gos_agtpg lsytre.n
  15. 15. SPRITES WIE GEHABT EINBINDEN@mot"pie/utn/.n" ipr srtsbtos*pg;a { @nld btossrt(gos"; icue utn-pie"lsy)}
  16. 16. COMPASS MACHT DEN RESTbtossrt,a{ utn-pie bcgon:ulbtossde892pg)n-eet akrud r(/utn-eff0e.n orpa;}a{ bcgon-oiin 00 akrudpsto: ;}ahvr agos_oe,agos-oe { :oe, .lsyhvr .lsyhvr bcgon-oiin 0-0x akrudpsto: 4p;}atre,agos_agt agos-agt{ :agt .lsytre, .lsytre bcgon-oiin 0-0x akrudpsto: 6p;}aatv,agos_cie agos-cie{ :cie .lsyatv, .lsyatv bcgon-oiin 0-0 akrudpsto: 2;}
  17. 17. SPRITEMAPEine Spritemap wird automatisch durch das importieren der Bilder erzeugt. @mot"pie/ete/.n" ipr srtswahr*pg; $ete-pie / EtätdeSrtmp wahrsrts / nhl i piea
  18. 18. SPRITEMAPWir können aber auch eine eigene Spritemap über einen Glob definieren. $cn:srt-a(ios*pg) ios piemp"cn/.n"; .pie { srts bcgon-mg:srt-r(ios; akrudiae pieul$cn) }
  19. 19. GRÖSSE EINES ICONS VERWENDEN$eteSrt:srt-a(srtswahr*pg) wahrpie piemp"pie/ete/.n";.ete-igtdy.lul { wahrwde.a cody $ae "lul-a" nm: codydy; $egt iaehih(piefl(wahrpie $ae) hih: mg-egtsrt-ie$eteSrt, nm); @nld srt-iesos$eteSrt,$ae; icue piedmnin(wahrpie nm) bcgon:srt(wahrpie $ae; akrud pie$eteSrt, nm) mri-o:0-$egt2 agntp hih/; tp 5% o: 0;}
  20. 20. VIEL SPASS!
  21. 21. http://slidesha.re/W1R1Nh
  22. 22. REFERENZENCompass Dokumentation Image Dimension Helpers Sprite Helpers Spriting TutorialCompass Source auf Github

×