Jak snadno pracovat s CSS sprites

CSS spirty představují způsob, jak snížit počet HTTP požadavků, které klient vyšle k získání prvků obsažených na stránce. Obrázky se sloučí do jednoho většího a umístí se na určených X,Y souřadnicích. Pak pomocí CSS atributu background-position můžeme nastavit vzniklý obrázek na pozadí různým elementům stránky a pomocí dalších CSS vlastností umístíme pozadí tak, aby požadovaný jednotlivý obrázek padl do viditelné oblasti elementu na stránce.

Poslouchal jsem podcast s Vaškem Vančurou, kde popisuje svoji práci s LESS a sprites pomocí software TexturePacker.

Zkoušel jsem Vaška přemluvit, aby něco napsal:

@vancura Me se to libilo, taky jsem si zavzpominal. Ale o tom jak pouzivas LESS a sprites nechces o tom neco napsat s nejakym prikladem?
@abtris Kdyby byl cas…

Ale nemá čas, tak jsem se rozhodl to udělat sám.

Zvolil jsem jednoduchou ukázku, stáhnul jsem sadu icon a potom jsem zvolit v Texturepackeru data format css a přidal jsem adresář s iconami. Program automaticky vytvoří pomocí publish sprite.png a sprite.css.

Výsledek můžete vidět zde:

a css kód:

(sprite.css) download
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142

/* ----------------------------------------------------
   created with http://www.texturepacker.com 
   ----------------------------------------------------
   $TexturePacker:SmartUpdate:83a9321cb66d0d62791f1fdda5367522$
   ----------------------------------------------------

   usage: <span class="{-spritename-} sprite"></span>

   replace {-spritename-} with the sprite you like to use

*/

.sprite {display:inline-block; overflow:hidden; background-repeat: no-repeat;background-image:url(sprite.png);}

.accepted_48 {width:48px; height:48px; background-position: -52px -752px}
.add_16 {width:16px; height:16px; background-position: -38px -1002px}
.add_48 {width:48px; height:48px; background-position: -52px -702px}
.app_48 {width:48px; height:48px; background-position: -52px -652px}
.arrow_down_48 {width:48px; height:48px; background-position: -52px -602px}
.arrow_down_green_48 {width:48px; height:48px; background-position: -52px -552px}
.arrow_left_48 {width:48px; height:48px; background-position: -2px -952px}
.arrow_left_green_48 {width:48px; height:48px; background-position: -2px -902px}
.arrow_right_48 {width:48px; height:48px; background-position: -2px -852px}
.arrow_right_green_48 {width:48px; height:48px; background-position: -2px -802px}
.arrow_up_48 {width:48px; height:48px; background-position: -2px -752px}
.arrow_up_green_48 {width:48px; height:48px; background-position: -2px -702px}
.beer_48 {width:48px; height:48px; background-position: -2px -652px}
.blinklist_48 {width:48px; height:48px; background-position: -2px -602px}
.blue_speech_bubble_48 {width:48px; height:48px; background-position: -2px -552px}
.book_48 {width:48px; height:48px; background-position: -452px -502px}
.box_48 {width:48px; height:48px; background-position: -402px -502px}
.box_download_48 {width:48px; height:48px; background-position: -352px -502px}
.box_upload_48 {width:48px; height:48px; background-position: -302px -502px}
.camera_48 {width:48px; height:48px; background-position: -252px -502px}
.camera_add_48 {width:48px; height:48px; background-position: -202px -502px}
.camera_delete_48 {width:48px; height:48px; background-position: -152px -502px}
.camera_noflash_48 {width:48px; height:48px; background-position: -102px -502px}
.camera_noflash_add_48 {width:48px; height:48px; background-position: -52px -502px}
.camera_noflash_delete_48 {width:48px; height:48px; background-position: -2px -502px}
.camera_noflash_warning_48 {width:48px; height:48px; background-position: -452px -452px}
.camera_warning_48 {width:48px; height:48px; background-position: -402px -452px}
.cancel_16 {width:16px; height:16px; background-position: -20px -1002px}
.cancel_48 {width:48px; height:48px; background-position: -352px -452px}
.cd_48 {width:48px; height:48px; background-position: -302px -452px}
.circle_blue {width:48px; height:48px; background-position: -252px -452px}
.circle_green {width:48px; height:48px; background-position: -202px -452px}
.circle_orange {width:48px; height:48px; background-position: -152px -452px}
.circle_red {width:48px; height:48px; background-position: -102px -452px}
.clock_48 {width:48px; height:48px; background-position: -52px -452px}
.coffee_48 {width:48px; height:48px; background-position: -2px -452px}
.coffee_mug {width:48px; height:48px; background-position: -452px -402px}
.comment_48 {width:48px; height:48px; background-position: -402px -402px}
.comment_add_48 {width:48px; height:48px; background-position: -352px -402px}
.comment_remove_48 {width:48px; height:48px; background-position: -302px -402px}
.comment_warning_48 {width:48px; height:48px; background-position: -252px -402px}
.computer_48 {width:48px; height:48px; background-position: -202px -402px}
.creditcard_american_express {width:48px; height:48px; background-position: -152px -402px}
.creditcard_cirrus {width:48px; height:48px; background-position: -102px -402px}
.creditcard_mastercard {width:48px; height:48px; background-position: -52px -402px}
.creditcard_paypal {width:48px; height:48px; background-position: -2px -402px}
.creditcard_solo {width:48px; height:48px; background-position: -452px -352px}
.creditcard_switch {width:48px; height:48px; background-position: -402px -352px}
.creditcard_visa {width:48px; height:48px; background-position: -352px -352px}
.cross_48 {width:48px; height:48px; background-position: -302px -352px}
.database_48 {width:48px; height:48px; background-position: -252px -352px}
.database_add_48 {width:48px; height:48px; background-position: -202px -352px}
.database_remove_48 {width:48px; height:48px; background-position: -152px -352px}
.database_warning_48 {width:48px; height:48px; background-position: -102px -352px}
.delicious_48 {width:48px; height:48px; background-position: -52px -352px}
.designfloat_48 {width:48px; height:48px; background-position: -2px -352px}
.digg_48 {width:48px; height:48px; background-position: -452px -302px}
.feedburner_48 {width:48px; height:48px; background-position: -402px -302px}
.flickr_48 {width:48px; height:48px; background-position: -352px -302px}
.floppy_disk_48 {width:48px; height:48px; background-position: -302px -302px}
.folder_48 {width:48px; height:48px; background-position: -252px -302px}
.folder_add_48 {width:48px; height:48px; background-position: -202px -302px}
.folder_delete_48 {width:48px; height:48px; background-position: -152px -302px}
.folder_warning_48 {width:48px; height:48px; background-position: -102px -302px}
.furl_48 {width:48px; height:48px; background-position: -52px -302px}
.globe_48 {width:48px; height:48px; background-position: -2px -302px}
.google_48 {width:48px; height:48px; background-position: -452px -252px}
.heart_48 {width:48px; height:48px; background-position: -402px -252px}
.home_48 {width:48px; height:48px; background-position: -352px -252px}
.image_48 {width:48px; height:48px; background-position: -302px -252px}
.image_add_48 {width:48px; height:48px; background-position: -252px -252px}
.image_delete_48 {width:48px; height:48px; background-position: -202px -252px}
.image_warning_48 {width:48px; height:48px; background-position: -152px -252px}
.lightbulb_48 {width:48px; height:48px; background-position: -102px -252px}
.lock_48 {width:48px; height:48px; background-position: -52px -252px}
.lock_open_48 {width:48px; height:48px; background-position: -2px -252px}
.mail_48 {width:48px; height:48px; background-position: -452px -202px}
.mail_add_48 {width:48px; height:48px; background-position: -402px -202px}
.mail_delete_48 {width:48px; height:48px; background-position: -352px -202px}
.mail_forward_48 {width:48px; height:48px; background-position: -302px -202px}
.mail_reply_48 {width:48px; height:48px; background-position: -252px -202px}
.mail_spam_48 {width:48px; height:48px; background-position: -202px -202px}
.mail_write_48 {width:48px; height:48px; background-position: -152px -202px}
.mixx_48 {width:48px; height:48px; background-position: -102px -202px}
.mouse_48 {width:48px; height:48px; background-position: -52px -202px}
.navigate_48 {width:48px; height:48px; background-position: -2px -202px}
.newspaper_48 {width:48px; height:48px; background-position: -452px -152px}
.paper&pencil_48 {width:48px; height:48px; background-position: -402px -152px}
.paper_48 {width:48px; height:48px; background-position: -352px -152px}
.paper_content_48 {width:48px; height:48px; background-position: -302px -152px}
.paper_content_chart_48 {width:48px; height:48px; background-position: -252px -152px}
.paper_content_pencil_48 {width:48px; height:48px; background-position: -202px -152px}
.pencil_48 {width:48px; height:48px; background-position: -152px -152px}
.pie_chart_48 {width:48px; height:48px; background-position: -102px -152px}
.printer_48 {width:48px; height:48px; background-position: -52px -152px}
.questionmark_48 {width:48px; height:48px; background-position: -2px -152px}
.reddit_48 {width:48px; height:48px; background-position: -452px -102px}
.refresh_48 {width:48px; height:48px; background-position: -402px -102px}
.rss_48 {width:45px; height:45px; background-position: -52px -802px}
.search_48 {width:48px; height:48px; background-position: -352px -102px}
.smile_grin_48 {width:48px; height:48px; background-position: -302px -102px}
.smile_sad_48 {width:48px; height:48px; background-position: -252px -102px}
.spanner_48 {width:48px; height:48px; background-position: -202px -102px}
.speech_bubble_48 {width:48px; height:48px; background-position: -152px -102px}
.star_48 {width:48px; height:48px; background-position: -102px -102px}
.star_half_48 {width:48px; height:48px; background-position: -52px -102px}
.star_off_48 {width:48px; height:48px; background-position: -2px -102px}
.sumbleupon_48 {width:48px; height:48px; background-position: -452px -52px}
.table_48 {width:48px; height:48px; background-position: -402px -52px}
.table_green_48 {width:48px; height:48px; background-position: -352px -52px}
.tabs_48 {width:48px; height:48px; background-position: -302px -52px}
.technorati_48 {width:48px; height:48px; background-position: -252px -52px}
.thumbs_down_48 {width:48px; height:48px; background-position: -202px -52px}
.thumbs_up_48 {width:48px; height:48px; background-position: -152px -52px}
.twitter_48 {width:48px; height:48px; background-position: -102px -52px}
.twitter_boxed_48 {width:48px; height:48px; background-position: -52px -52px}
.usb_48 {width:48px; height:48px; background-position: -2px -52px}
.user_48 {width:48px; height:48px; background-position: -452px -2px}
.user_add_48 {width:48px; height:48px; background-position: -402px -2px}
.user_delete_48 {width:48px; height:48px; background-position: -352px -2px}
.user_two_delete_48 {width:48px; height:48px; background-position: -302px -2px}
.user_warning_48 {width:48px; height:48px; background-position: -252px -2px}
.users_two_48 {width:48px; height:48px; background-position: -202px -2px}
.users_two_add_48 {width:48px; height:48px; background-position: -152px -2px}
.users_two_warning_48 {width:48px; height:48px; background-position: -102px -2px}
.warning_16 {width:16px; height:16px; background-position: -2px -1002px}
.warning_48 {width:48px; height:48px; background-position: -52px -2px}
.yahoo_48 {width:48px; height:48px; background-position: -2px -2px}

Shrnutí

Je to jen ukázka jak může tento program usnadnit práci, kterou jsem viděl obvykle dělat kodéry ve Photoshopu a pracně ručně nastavovat v CSS.

Comments