Π‘ΠΏΡ€Π°ΠΉΡ‚ ΠΎΠ½Π»Π°ΠΉΠ½ – CSS Sprite Generator, Editor, and Code


15.03.2020 Facebook Twitter LinkedIn Google+ Π‘ΠΎΠ²Π΅Ρ‚Ρ‹ Ρ…ΡƒΠ΄ΠΎΠΆΠ½ΠΈΠΊΠ°


Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

Онлайн сСрвис создания CSS спрайтов

13

23

Π’ Ρ‚Π΅ΠΌΠ΅ ИспользованиС CSS спрайтов ΠΌΡ‹ ΡƒΠΆΠ΅ рассмотрСли, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ CSS спрайты, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ Π΄Π°ΡŽΡ‚ ΠΈ ΠΊΠ°ΠΊ ΠΈΡ… Π½ΡƒΠΆΠ½ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ ΠΎΠ±Π»Π΅Π³Ρ‡ΠΈΡ‚ΡŒ Π’Π°ΠΌ Тизнь ΠΈ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅ΠΌ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΎΠ½Π»Π°ΠΉΠ½ сСрвисом Csssprites.com, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π’Π°ΠΌ Π² создании CSS спрайтов.


Π”Π°Π½Π½Ρ‹ΠΉ ΠΎΠ½Π»Π°ΠΉΠ½ сСрвис Ρ…ΠΎΡ€ΠΎΡˆ Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ Π’Ρ‹ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚Π΅ изобраТСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒ Π² ΠΎΠ΄Π½ΠΎ ΠΈ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚Π΅ ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»Ρ‹ ΠΌΠ΅ΠΆΠ΄Ρƒ изобраТСниями (Ссли ΠΎΠ½ΠΈ ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ Π½ΡƒΠΆΠ½Ρ‹). Π’Π°ΠΊ ΠΆΠ΅ Ρƒ Вас имССтся Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π²Ρ‹Π±ΠΎΡ€Π° — ΡΠΎΠ΅Π΄ΠΈΠ½ΡΡ‚ΡŒ изобраТСния ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ ΠΈΠ»ΠΈ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ.

Когда всС Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ изобраТСния для «ΡΠΊΠ»Π΅ΠΉΠΊΠΈ» Π² CSS спрайт ΡƒΠΊΠ°Π·Π°Π½Ρ‹ ΠΈ Π²Ρ‹Π±Ρ€Π°Π½Ρ‹ всС Π½ΡƒΠΆΠ½Ρ‹Π΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹, Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ «GENERATE«.

Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ Ρ€Π°Π±ΠΎΡ‚Ρ‹ сСрвиса Csssprites.com Π’Π°ΠΌ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΎ ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ²ΡˆΠ΅Π΅ΡΡ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ (спрайт). Π§ΡƒΡ‚ΡŒ Π½ΠΈΠΆΠ΅ Π’Π°ΠΌ ΡƒΠΊΠ°ΠΆΡƒΡ‚ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ Π½Π°Ρ‡Π°Π»Π° ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ изобраТСния, Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π½ΠΎΠ³ΠΎ Π² спрайт (ΠΎΠ½ΠΈ Π’Π°ΠΌ понадобятся для извлСчСния ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈΠ· спрайта).


Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π’Π°ΠΌ останСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Π±ΠΈΡ‚ΡŒ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² Π’Π°Ρˆ CSS Ρ„Π°ΠΉΠ».

Π’ дальнСйшСм, ΠΏΡ€ΠΈ нСобходимости, ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ Π΄Π°Π½Π½ΠΎΠ³ΠΎ сСрвиса ΠΌΠΎΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒ нСсколько ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½Π½Ρ‹Ρ… спрайтов Π² ΠΎΠ΄ΠΈΠ½ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, сначала склСиваСм изобраТСния ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ, Π° ΠΏΠΎΡ‚ΠΎΠΌ нСсколько спрайтов объСдиняСм ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ).


Π”Π°Ρ‚Π° создания: 22:43:56 29.08.2012 Π³.

Π”Π°Ρ‚Π° обновлСния: 20:29:45 30.08.2012 Π³.

ΠŸΠΎΡΠ΅Ρ‰Π΅Π½ΠΈΠΉ Ρ‚Π΅ΠΌΡ‹: 8180 Ρ€Π°Π·(Π°).


ΠŸΠ΅Ρ€Π΅Π΄ ΠΏΡƒΠ±Π»ΠΈΠΊΠ°Ρ†ΠΈΠ΅ΠΉ всС ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ проходят ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΡƒΡŽ ΠΌΠΎΠ΄Π΅Ρ€Π°Ρ†ΠΈΡŽ!

Если Π’Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π·Π°Π΄Π°Ρ‚ΡŒ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ вопрос, Ρ‚ΠΎ Π»ΡƒΡ‡ΡˆΠ΅ сдСлайтС это Π½Π° нашСм Ρ„ΠΎΡ€ΡƒΠΌΠ΅.
Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π’Ρ‹ смоТСтС быстрСС ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΎΡ‚Π²Π΅Ρ‚ Π½Π° ΠΈΠ½Ρ‚Π΅Ρ€Π΅ΡΡƒΡŽΡ‰ΠΈΠΉ Вас вопрос.

usefulscript.ru

Π£Π΄ΠΎΠ±Π½Ρ‹ΠΉ Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ CSS спрайтов

Каким Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ инструмСнт, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π² Π½Π΅ΠΌ Π±Ρ‹Π»ΠΎ ΡƒΠ΄ΠΎΠ±Π½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΈ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ CSS спрайты? Π£ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ свой ΠΎΡ‚Π²Π΅Ρ‚ Π½Π° этот вопрос, Π° я всСго лишь подСлюсь своими сообраТСниями ΠΈ ΠΏΡ€ΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΡƒΡŽ свой Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ спрайтов.

По большСй части моя Ρ€Π°Π±ΠΎΡ‚Π° со спрайтами сводилась ΠΊ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌΡƒ:

Π˜Ρ‚Π°ΠΊ, Π½Π°Ρ‡Π½Π΅ΠΌ с самого Π½Π°Ρ‡Π°Π»Π°

ΠšΡ€Π°Ρ‚ΠΊΠ°Ρ история
ΠŸΡ€ΠΎΡˆΠ»ΠΎΠ΅

Π”Π°Π²Π½Ρ‹ΠΌ-Π΄Π°Π²Π½ΠΎ я вСрстал сайты. ΠΠ°Ρ‡Π°Π»ΡŒΡΡ‚Π²ΠΎ Ρ‚Ρ€Π΅Π±ΠΎΠ²Π°Π»ΠΎ ΡƒΡΠΊΠΎΡ€ΠΈΡ‚ΡŒ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ страниц ΠΈ поэтому я Π½Π°Ρ‡Π°Π» ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΡΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π² спрайты.

Π’ Photoshop я Ρ€Π΅Π·Π°Π» ΠΌΠ°ΠΊΠ΅Ρ‚ Π½Π° части ΠΈ Π·Π°Ρ‚Π΅ΠΌ объСдинял ΠΈΡ… с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ PHP скрипта. ЧСстно, я Π±Ρ‹Π» ΡƒΠ΄ΠΈΠ²Π»Π΅Π½, Ρ‡Ρ‚ΠΎ Π² Photoshop нСльзя ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒ Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ области Π² ΠΎΠ΄ΠΈΠ½ Ρ„Π°ΠΉΠ», Π½ΠΎ Π² любом случаС ΠΎΠΆΠΈΠ΄Π°Ρ‚ΡŒ ΠΎΡ‚ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π΅Ρ‰Π΅ ΠΈ автоматичСской Π³Π΅Π½Π΅Ρ€Π°Ρ†ΠΈΠΈ стилСй β€” ΡƒΠΆΠ΅ явный ΠΏΠ΅Ρ€Π΅Π±ΠΎΡ€. Π― простил Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² Π·Π° Ρ‚Π°ΠΊΠΎΠΉ скудный Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π» ΠΈ написал php скрипт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Π» спрайты ΠΈ Ρ„Π°ΠΉΠ» со стилями.

Π‘Π°ΠΉΡ‚ΠΎΠ² Π±Ρ‹Π»ΠΎ ΠΌΠ½ΠΎΠ³ΠΎ, ΠΈ скрипт сущСствСнно ускорял мою Ρ€Π°Π±ΠΎΡ‚Ρƒ. ΠŸΡ€ΠΈΡ‡Π΅ΠΌ ΠΏΡ€Π°Π²ΠΈΠ»Π° Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²ΠΊΠΈ я писал ΠΎΠ΄ΠΈΠ½ Ρ€Π°Π· для ΠΎΠ΄Π½ΠΎΠ³ΠΎ сайта. Если мСнялся ΠΌΠ°ΠΊΠ΅Ρ‚, Π° области ΠΎΡΡ‚Π°Π²Π°Π»ΠΈΡΡŒ Π½Π° Ρ‚ΠΎΠΌ ΠΆΠ΅ мСстС, Ρ‚ΠΎ я просто подсовывал скрипту Π½ΠΎΠ²ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΈ ΠΎΠ½ Π·Π°Π½ΠΎΠ²ΠΎ всС Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Π».

ΠŸΡ€ΠΈΠ·Π½Π°ΡŽΡΡŒ, Π±Ρ‹Π» ΠΎΠ΄ΠΈΠ½ нСдостаток Π² Ρ‚Π°ΠΊΠΎΠΌ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π΅. ΠšΠ°Ρ‡Π΅ΡΡ‚Π²ΠΎ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹Π΄Π°Π΅Ρ‚ PHP мягко говоря Β«Π½Π΅ ΠΎΡ‡Π΅Π½ΡŒΒ». ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ я настраивал скрипт Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π² стилях Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ Ρ„Π°ΠΉΠ»ΠΎΠ² Π±Ρ‹Π»ΠΈ jpg, png, gif, Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Π»ΠΈΡΡŒ Π² BMP Ρ„ΠΎΡ€ΠΌΠ°Ρ‚. И ΠΏΠΎΡ‚ΠΎΠΌ я Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Π» Π² Π½ΡƒΠΆΠ½Ρ‹ΠΉ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Photoshop.

НастоящСС

Бпустя ΠΌΠ½ΠΎΠ³ΠΎ Π»Π΅Ρ‚ ΠΌΠ½Π΅ ΠΎΠΏΡΡ‚ΡŒ ΠΏΡ€ΠΈΡˆΠ»ΠΎΡΡŒ ΡΠ²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ спрайтов. И Ρ‚ΡƒΡ‚ ΠΌΠ½Π΅ стало интСрСсно. Π§Ρ‚ΠΎ появилось Π·Π° это врСмя для упрощСния процСсса?

Photoshop ΠΎΠΏΡΡ‚ΡŒ мСня Π½Π΅ ΠΏΠΎΡ€Π°Π΄ΠΎΠ²Π°Π». Π—Π°Ρ‚ΠΎ Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ спрайтов появился Π² Fireworks CS6. Но просмотрСв нСсколько Π²ΠΈΠ΄Π΅ΠΎ ΠΈ статСй, я понял, Ρ‡Ρ‚ΠΎ ΠΎΠ½ ΠΌΠ½Π΅ Π½Π΅ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Π½Π΅ выполняСт всСх ΠΌΠΎΠΈΡ… Ρ‚Ρ€Π΅Π±ΠΎΠ²Π°Π½ΠΈΠΉ.

Π’Π°ΠΊ ΠΆΠ΅ появилось ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ΠΎΠ². НСбольшой ΠΎΠ±Π·ΠΎΡ€ ΡƒΠΆΠ΅ Π±Ρ‹Π» Π½Π° Ρ…Π°Π±Ρ€Π΅, Ρ‚Π°ΠΌ ΠΆΠ΅ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Ρ‹ ссылки Π½Π° Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€Ρ‹. Но Π½Π΅ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ΠΎΠ² Π½Π΅ выполнял всСх Π·Π°Π΄Π°Ρ‡, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ я Π²Ρ‹Π΄Π²ΠΈΠ³Π°ΡŽ ΠΊ Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€Ρƒ спрайтов.

Каким я Π²ΠΈΠΆΡƒ Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ спрайтов

Если ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΎ, Ρ‚ΠΎ Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ спрайтов Π΄ΠΎΠ»ΠΆΠ΅Π½:

  • Π£ΠΌΠ΅Ρ‚ΡŒ Ρ€Π°Π·Ρ€Π΅Π·Π°Ρ‚ΡŒ исходныС ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π½Π° части
  • Π£ΠΌΠ΅Ρ‚ΡŒ ΡΠΎΠ΅Π΄ΠΈΠ½ΡΡ‚ΡŒ ΠΏΠΎΡ€Π΅Π·Π°Π½Π½Ρ‹Π΅ части Π² спрайты
  • ΠžΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ стили
  • Π“Π»Π°Π²Π½ΠΎΠ΅ β€” ΠΈΠΌΠ΅Ρ‚ΡŒ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ графичСский интСрфСйс

Π Π°Π½Π΅Π΅ соСдинял ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΈ Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Π» стили ΠΌΠΎΠΉ PHP скрипт, я лишь прописывал для этого ΠΏΡ€Π°Π²ΠΈΠ»Π°. Но сСйчас ΠΌΠ½Π΅ показалось этого ΠΌΠ°Π»ΠΎ. Как ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌ настройка ΠΏΡ€Π°Π²ΠΈΠ» Π² тСкстовом Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅ ΡƒΠΆΠ΅ устарСло. БСйчас всС Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒΡΡ ΠΊΠ½ΠΎΠΏΠΎΡ‡ΠΊΠ°ΠΌΠΈ ΠΈ Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒΡΡ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ графичСского интСрфСйса.

Но Ρ€Π°Π· ΡƒΠΆ Π΄Π΅Π»Π°Ρ‚ΡŒ графичСский интСрфСйс, Ρ‚ΠΎ ΠΈ Photoshop особо Π½Π΅ Π½ΡƒΠΆΠ΅Π½. Π’Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅ областСй ΠΈ Ρ€Π°Π·Ρ€Π΅Π·Π°Π½ΠΈΠ΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ β€” Π·Π°Π΄Π°Ρ‡Π° Ρ‚Ρ€ΠΈΠ²ΠΈΠ°Π»ΡŒΠ½Π°Ρ для javascript ΠΈ HTML5.

ВсС эти Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ ΠΏΡƒΠ½ΠΊΡ‚Π° явно хотят ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒΡΡ Π² ΠΎΠ΄ΠΈΠ½ СдинствСнный Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€.

А для Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π° ΠΎΡ‡Π΅Π½ΡŒ Π²Π°ΠΆΠ½ΠΎ ΡΠΎΡ…Ρ€Π°Π½ΡΡ‚ΡŒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ Π½Π° случай Ссли ΠΏΠΎΡ‚ΠΎΠΌ Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ ΠΏΠΎΠ΄ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ.

Как Π²ΠΈΠ΄Π½ΠΎ, Π² Ρ„Π°ΠΉΠ» ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡΠΎΡ…Ρ€Π°Π½ΡΡ‚ΡŒΡΡ всС исходныС ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΈ всС ΠΏΡ€Π°Π²ΠΈΠ»Π° Ρ€Π°Π·Π±ΠΈΠ²ΠΊΠΈ, объСдинСния ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ ΠΈ Π³Π΅Π½Π΅Ρ€Π°Ρ†ΠΈΠΈ стилСй.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ остановимся Π½Π° графичСском интСрфСйсС. Π’ Π½Π΅ΠΌ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅:

  • ΠšΠ½ΠΎΠΏΠΎΡ‡ΠΊΠΈ для открывания ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ, ΠΏΡ€Π°Π²ΠΈΠ» ΠΈΠ»ΠΈ всСго ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.
  • ΠšΠ½ΠΎΠΏΠΎΡ‡ΠΊΠΈ для сохранСния Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π° ΠΈ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.
  • Настройка ΠΏΡ€Π°Π²ΠΈΠ» разбиСния ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π½Π° области. Π’ΠΎ Π΅ΡΡ‚ΡŒ: ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ выдСляСт области, Π²ΠΈΠ΄ΠΈΡ‚ список областСй, ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡ… Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ.
  • Настройка ΠΏΡ€Π°Π²ΠΈΠ» Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²ΠΊΠΈ областСй Π² спрайт. Π’ΡƒΡ‚ Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π² ΠΊΠ°ΠΊΠΎΠΌ мСстС спрайта Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°
  • Настройка ΠΏΡ€Π°Π²ΠΈΠ» Π³Π΅Π½Π΅Ρ€Π°Ρ†ΠΈΠΈ стилСй. Для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π² спрайтС Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒΡΡ способ гСнСрирования стилСй: Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ»ΠΈ Π½Π΅Ρ‚ ΡˆΠΈΡ€ΠΈΠ½Ρƒ, высоту, repeate-x, repeate-y, no-repeate, имя класса

Π“Π»Π°Π²Π½ΠΎΠ΅ β€” ΠΏΡ€ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ Π² ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π½Π΅ΠΊΠΈΠ΅ стандартныС ΠΏΡ€Π°Π²ΠΈΠ»Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·Π±Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΎΡ‚ Π»ΠΈΡˆΠ½ΠΈΡ… дСйствий ΠΏΠΎ настройкС. НапримСр, Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ ΠΌΡ‹ ΠΈΠΊΠΎΠ½ΠΊΡƒ Β«firefox.pngΒ». ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° Π΄ΠΎΠ»ΠΆΠ½Π° автоматичСски ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ Β«firefoxΒ» (Π½Π° всю ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΈ высоту) ΠΈ ΡΡ‚ΠΈΠ»ΡŒ:

.firefox{ width:16px; height:16px; background: url('data:image/png;base64,.....==') 0px 0px no-repeat; }

И ΠΏΠΎΡ‚ΠΎΠΌ ΡƒΠΆΠ΅ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ Π² Π΄Ρ€ΡƒΠ³ΠΎΠΉ спрайт ΠΈΠ»ΠΈ ΠΎΡ‚Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π³Π΅Π½Π΅Ρ€Π°Ρ†ΠΈΡŽ стилСй.

ΠžΠ±Π·ΠΎΡ€ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΊΡ€Π°Ρ‚ΠΊΠΎ, ΠΏΠΎΡ‡Π΅ΠΌΡƒ ΠΌΠ½Π΅ Π½Π΅ подошли ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ.

Compass β€” написан Π½Π° Ruby. ΠŸΠΈΡˆΡƒΡ‚ΡΡ стили с особым синтаксисом ΠΈ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° ΠΏΠΎΡ‚ΠΎΠΌ Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΠ΅Ρ‚ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Π΅ стили со спрайтами.
Lemonade β€” ΡΡƒΡ‚ΡŒ такая ΠΆΠ΅ ΠΈ Π½Π° сайтС написано Ρ‡Ρ‚ΠΎ ΠΎΠ½ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ встроСн Π² Ρ‚ΠΎΡ‚ ΠΆΠ΅ Compass.
Glue β€” командная строка для Π³Π΅Π½Π΅Ρ€Π°Ρ†ΠΈΠΈ спрайтов.

Π­Ρ‚ΠΈ инструмСнты я сравнил с Ρ‚Π΅ΠΌ Ρ‡Ρ‚ΠΎ Ρƒ мСня Π±Ρ‹Π»ΠΎ Π±ΠΎΠ»Π΅Π΅ пяти Π»Π΅Ρ‚ Π½Π°Π·Π°Π΄, ΠΊΠΎΠ³Π΄Π° я прописывал ΠΏΡ€Π°Π²ΠΈΠ»Π° Π² php скриптС ΠΈ ΠΎΠ½ Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Π» спрайты. Но сСйчас ΠΌΠ½Π΅ ΡƒΠΆΠ΅ Ρ…ΠΎΡ‚Π΅Π»ΠΎΡΡŒ ΠΈΠΌΠ΅Π½Π½ΠΎ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€.

SpriteMe β€” пСрСтаскиваСм ссылку Π² Π±ΡƒΠΊΠΌΠ°Ρ€ΠΊΠ»Π΅Ρ‚ ΠΈ ΠΏΠΎΡ‚ΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ спрайты Π½Π° просматриваСмом сайтС. Но ΠΌΠ½Π΅ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ спрайты Π½Π° ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰Π΅ΠΌ сайтС. МнС Π½ΡƒΠΆΠ΅Π½ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ Π½Π° этапС, ΠΊΠΎΠ³Π΄Π° сайт Π΅Ρ‰Π΅ вСрстаСтся.

Spritepad β€” ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠΌ drag-and-drop пСрСтаскиваСм ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π½Π° спрайт ΠΈ справа выводятся всС стили. Π£ΠΆΠ΅ Π±Π»ΠΈΠΆΠ΅ ΠΊ Ρ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ я Ρ…ΠΎΡ‚Π΅Π». Но ΠΏΠΎΡ‡Π΅ΠΌΡƒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ drag-and-drop? НСуТСли сайт лишь дСмонстрируСт Π½ΠΎΠ²ΡƒΡŽ Ρ„ΠΈΡ‡Ρƒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ²? МнС Π½Π΅ всСгда ΡƒΠ΄ΠΎΠ±Π½ΠΎ ΠΏΠ΅Ρ€Π΅Ρ‚Π°ΡΠΊΠΈΠ²Π°Ρ‚ΡŒ, я Ρ…ΠΎΡ‡Ρƒ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Ρ‡Π΅Ρ€Π΅Π· ΠΎΠ±Ρ‹Ρ‡Π½ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒΒ». ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΡΠΎΡ…Ρ€Π°Π½ΡΡŽΡ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² PNG? НСльзя ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ нСсколько спрайтов? ВсС-Ρ‚Π°ΠΊΠΈ этот Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ сильно прост.

Sprite Cow β€” интСрСсная ΡˆΡ‚ΡƒΠΊΠ°. Если Ρƒ вас ΡƒΠΆΠ΅ Π΅ΡΡ‚ΡŒ Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΉ спрайт, Ρ‚ΠΎ Sprite Cow ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°ΠΌ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ области ΠΈ ΡΠ³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ для Π½ΠΈΡ… css ΠΏΡ€Π°Π²ΠΈΠ»Π°. Но css гСнСрируСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для ΠΎΠ΄Π½ΠΎΠΉ Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ области. Π’ΠΎ Π΅ΡΡ‚ΡŒ Ссли Ρƒ вас ΠΊΡƒΡ‡Π° ΠΈΠΊΠΎΠ½ΠΎΠΊ, Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ ΠΊΠ°ΠΆΠ΄ΡƒΡŽ Π²Ρ‹Π΄Π΅Π»ΡΡ‚ΡŒ ΠΈ ΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ css Π² ваш Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ стилСй. Π’ ΠΎΠ±Ρ‰Π΅ΠΌ, идСя Ρ…ΠΎΡ€ΠΎΡˆΠ°Ρ, ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΠΊΡ€Π°Ρ‚ΠΈΡ‚ΡŒ врСмя ΠΏΡ€ΠΈ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΈ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚ ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² Π² спрайтС, Π½ΠΎ сильно ΡƒΠΆ узконаправлСнная ΠΈ ΠΎΠΏΡΡ‚ΡŒ ΠΆΠ΅ Π½Π΅ Ρ€Π΅ΡˆΠ°Π΅Ρ‚ ΠΌΠΎΠΈΡ… Π·Π°Π΄Π°Ρ‡.

Π•Ρ‰Π΅ ΠΎΠ½Π»Π°ΠΉΠ½ сСрвисы:

  • css-sprit.es,
  • csssprites.com,
  • spritegen.website-performance.org,
  • css.spritegen.com

Π’ Π½ΠΈΡ… процСсс выглядит ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

  1. Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ,
  2. настройка ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ²,
  3. гСнСрация

Но всС Ρ€Π°Π²Π½ΠΎ, ΠΌΠ½Π΅ ΠΎΠ½ΠΈ показались Π½Π΅ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΌΠΈ ΠΈ Π½Π΅ ΠΏΡ€Π°ΠΊΡ‚ΠΈΡ‡Π½Ρ‹ΠΌΠΈ. Π’ΠΎΠΎΠ±Ρ‰Π΅, ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΠΈΠ· рассмотрСнных Π²Ρ‹ΡˆΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Π²Ρ‹Π·Ρ‹Π²Π°Π»ΠΎ Ρƒ мСня чувство дискомфорта ΠΈΠ·-Π·Π° Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Π½Π΅ ΠΎΠΊΠ°Π·Ρ‹Π²Π°Π»ΠΎΡΡŒ Π½ΡƒΠΆΠ½ΠΎΠΉ ΠΎΠΏΡ†ΠΈΠΈ ΠΈΠ»ΠΈ Π±Ρ‹Π» Π½Π΅ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ интСрфСйс.

НС Π·Π°Ρ…ΠΎΡ‚Π΅Π» я ΠΌΠΈΡ€ΠΈΡ‚ΡŒΡΡ с Ρ‚Π°ΠΊΠΈΠΌ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π²Π΅Ρ‰Π΅ΠΉ ΠΈ сваял свой Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€.

Π Π°Π΄ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ

CSS Sprite Generator by Simpreal

ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° являСтся Π²ΠΎΠΏΠ»ΠΎΡ‰Π΅Π½ΠΈΠ΅ΠΌ всСх Π²Ρ‹ΡˆΠ΅ΠΎΠΏΠΈΡΠ°Π½Π½Ρ‹Ρ… Ρ‚Ρ€Π΅Π±ΠΎΠ²Π°Π½ΠΈΠΉ. И ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ΄Π΅ΠΉ Π΅Ρ‰Π΅ Π² процСссС Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ.

На Π³Π»Π°Π²Π½ΠΎΠΉ страницС Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ Β«ExamplesΒ» Π΅ΡΡ‚ΡŒ нСсколько ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ²-ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ². НадСюсь ΠΎΠ½ΠΈ ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ Π² возмоТностях ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹.

Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ спрайтов Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΎΠ½Π»Π°ΠΉΠ½. Π‘ΠΎΠ±Ρ€Π°Π½ ΠΈΠ· Bootstrap, Knockoutjs ΠΈ само собой Jquery.

Π“Π»Π°Π²Π½ΠΎΠ΅, Π² Ρ…ΠΎΠ΄Π΅ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° Π±Ρ‹Π»ΠΎ ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½ΠΎ ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΠΏΡ‹Ρ‚Π° особСнно ΠΏΠΎ Knockoutjs. Π­Ρ‚ΠΎΡ‚ ΠΎΠΏΡ‹Ρ‚ вылился Π² Π΄Π²Π΅ ΡΡ‚Π°Ρ‚ΡŒΠΈ Π½Π° Ρ…Π°Π±Ρ€Π΅:

Canvas Π² GIF Π½Π° Javascript
ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡ knockoutjs ΠΏΡ€ΠΈ динамичСском Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ ΠΈ ΡƒΠ΄Π°Π»Π΅Π½ΠΈΠΈ Ρ‚Π΅ΠΌΠΏΠ»Π΅ΠΉΡ‚ΠΎΠ²

Если Ρƒ ΠΊΠΎΠ³ΠΎ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡƒΡ‚ Π΅Ρ‰Π΅ вопросы связанныС с Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠ΅ΠΉ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ ΡƒΠΌΠ΅Π΅Ρ‚ Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ спрайтов, Ρ‚ΠΎ я с Ρ€Π°Π΄ΠΎΡΡ‚ΡŒΡŽ ΠΎΡ‚Π²Π΅Ρ‡Ρƒ.

Π’Π°ΠΊ ΠΆΠ΅ сущСствуСт ΠΎΡ„Π»Π°ΠΉΠ½ вСрсия ΠΏΠΎΠ΄ Windows. Она прСдставляСт собой ΠΎΠ±ΠΎΠ»ΠΎΡ‡ΠΊΡƒ Π½Π° Awesomium Π² ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ просто Π²ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ΡΡ web-Ρ„Π°ΠΉΠ»Ρ‹. Но Π½Π° самом Π΄Π΅Π»Π΅ ΠΌΠ½Π΅ ΠΏΡ€ΠΈΡˆΠ»ΠΎΡΡŒ ΠΏΠΎΡ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎΠ±Ρ‹ всС Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Π·Π°Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΈ Π² этой ΠΎΠ±ΠΎΠ»ΠΎΡ‡ΠΊΠ΅. Π’Π°ΠΊ Ρ‡Ρ‚ΠΎ ΠΌΠΎΠ³Ρƒ подСлится ΠΈ этим ΠΎΠΏΡ‹Ρ‚ΠΎΠΌ.

Π—Π° процСссом Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ»Π΅Π΄ΠΈΡ‚ΡŒ Π½Π° smartprogress

Π§Ρ‚ΠΎ дальшС

К соТалСнию, Π·Π° ΠΏΠΎΠ» Π³ΠΎΠ΄Π° практичСски Π½ΠΈΠΊΡ‚ΠΎ Π½Π΅ стал Π΅ΠΉ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΡƒΡŽ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ хабросообщСству, Ρ‡Ρ‚ΠΎΠ± ΡƒΠ·Π½Π°Ρ‚ΡŒ вашС ΠΌΠ½Π΅Π½ΠΈΠ΅ ΠΎ полСзности Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π°.

Π― лишь ΠΏΠΎΠΊΠ° ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»Π°Π³Π°ΡŽ, Ρ‡Ρ‚ΠΎ ΠΎΡ‡Π΅Π½ΡŒ ΠΌΠ°Π»ΠΎ людСй Π² ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ спрайтами. НапримСр, Π·Π° послСдниС 5 Π»Π΅Ρ‚ я лишь ΠΎΠ΄ΠΈΠ½ сайт Ρ‚Π°ΠΊ Π΄Π΅Π»Π°Π» Π·Π½Π°ΠΊΠΎΠΌΡ‹ΠΌ. Π Π΅Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΆΠ΅ Π·Π°ΠΊΠ°Π·Ρ‡ΠΈΠΊΠΈ сСйчас Π½Π΅ ΠΎΠ±Ρ€Π°Ρ‰Π°ΡŽΡ‚ Π½Π° это внимания.

ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ слоТно ΡΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ дальшС. Если людям понравится идСя ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹, Ρ‚ΠΎ ΠΎΠ½Π° Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π·Π²ΠΈΠ²Π°Ρ‚ΡŒΡΡ. Если ΠΆΠ΅ Π½Π΅Ρ‚, Ρ‚ΠΎ ΠΎΠ½Π° Π»ΠΈΠ±ΠΎ останСтся ΠΊΠ°ΠΊ Π΅ΡΡ‚ΡŒ, Π»ΠΈΠ±ΠΎ прСвратится Π² Π½Π΅Ρ‡Ρ‚ΠΎ Π΄Ρ€ΡƒΠ³ΠΎΠ΅.

Π’ любом случаС ΠΎΠΏΡ‹Ρ‚ бСсцСнСн!
И Ссли ΠΌΠ½Π΅ понадобится ΡΠ²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ сайт спрайтами, Ρ‚ΠΎ Ρƒ мСня ΡƒΠΆΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ для этого ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ инструмСнт!

Автор: humblegenius

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

www.pvsm.ru

Онлайн сСрвис для создания CSS спрайтов.

Для Ρ‡Π΅Π³ΠΎ Π½ΡƒΠΆΠ½Ρ‹ CSS спрайты? НС сСкрСт, Ρ‡Ρ‚ΠΎ Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΎΠΌ Π½Π° ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ сайта влияСт количСство ΠΎΠ±Ρ€Π°Ρ‰Π΅Π½ΠΈΠΉ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΊ сСрвСру, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ располагаСтся сайт. Π’Π΅Π΄ΡŒ сайт это Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ HTML Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚. Для Π΅Π³ΠΎ ΠΏΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½ΠΎΠΉ Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ CSS Ρ„Π°ΠΉΠ»Ρ‹ (Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй), JS Ρ„Π°ΠΉΠ»Ρ‹ (JavaScript Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ) ΠΈ ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ ΠΆΠ΅ графичСскиС элСмСнты (Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ, графичСскиС элСмСнты вСрстки сайта ΠΈ Ρ‚.Π΄.). Как извСстно ΠΈΠΌΠ΅Π½Π½ΠΎ графичСскиС элСмСнты сайта ΡΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ Π΄ΠΎ 90% ΠΈ Π±ΠΎΠ»Π΅Π΅ ΠΎΡ‚ ΠΎΠ±Ρ‰Π΅Π³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° страницы, Π° ΠΈΡ… ΠΎΠ±Ρ‰Π΅Π΅ количСство Π½Π° страницС ΠΌΠΎΠΆΠ΅Ρ‚ Π΄ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ΡŒ Π΄ΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… дСсятков ΠΈ Π±ΠΎΠ»Π΅Π΅. Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅, Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π½ΡƒΠΆΠ½ΠΎ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π· ΠΏΠΎΡΡ‹Π»Π°Ρ‚ΡŒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ запрос, Ρ‡Ρ‚ΠΎ Π±Ρ‹ ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ графичСский элСмСнт WEB страницы, Ρ‡Ρ‚ΠΎ Π² свою ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ ΠΎΡ‡Π΅Π½ΡŒ Π½Π΅Π³Π°Ρ‚ΠΈΠ²Π½ΠΎ сказываСтся Π½Π° ΠΎΠ±Ρ‰Π΅ΠΉ скорости Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ сайта, Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ. ИспользованиС спрайтов ΠΏΡ€ΠΈ создании сайтов позволяСт ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ этой ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΏΠΎΡ‡Ρ‚ΠΈ всС графичСскиС элСмСнты WEB страницы находятся Π² ΠΎΠ΄Π½ΠΎΠΌ графичСском Ρ„Π°ΠΉΠ»Π΅. Π’Π°ΠΊ ΠΆΠ΅ использованиС спрайтов ΠΏΡ€ΠΈ создании Π²Π΅Π± сайтов позволяСт Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡΠ½ΠΈΠ·ΠΈΡ‚ΡŒ Π½Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ Π½Π° сСрвСр, Π³Π΄Π΅ находится сайт. ο»Ώ
Как это Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚?
C ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΎΠ½Π»Π°ΠΉΠ½ сСрвиса Instantsprite.com ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π·Π°Π³Ρ€ΡƒΠΆΠ°Π΅Ρ‚ всС стандартныС графичСскиС элСмСнты, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ Π½Π° сайтС (ΠΈΠΊΠΎΠ½ΠΊΠΈ, графичСскиС ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΡ‹, элСмСнты вСрстки ΠΈ Ρ‚.Π΄.). Π’ настройках сСрвиса ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ отступ ΠΌΠ΅ΠΆΠ΄Ρƒ элСмСнтами ( Π² пиксСлях), Ρ‚ΠΈΠΏ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌΠΎΠ³ΠΎ Ρ„Π°ΠΉΠ»Π° (png, gif), ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ элСмСнтов Π² Ρ„Π°ΠΉΠ»Π΅ (Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅, Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅, диагональноС). ΠžΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ с этим сСрвис ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ внСшний Π²ΠΈΠ΄ Π±ΡƒΠ΄ΡƒΡ‰Π΅Π³ΠΎ спрайта (ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ), Ρ‡Ρ‚ΠΎ нСсомнСнно ΠΎΡ‡Π΅Π½ΡŒ ΡƒΠ΄ΠΎΠ±Π½ΠΎ. Настройка ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ² создаваСмого спрайта Π’ самом Π½ΠΈΠ·Ρƒ ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΠ΅ΠΌΡ‹ΠΉ ΠΊΠΎΠ΄ для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΌ спрайтом. Он состоит ΠΈΡ… Π΄Π²ΡƒΡ… частСй. CSS ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π² Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ стилСй Π²Π°Ρ‰Π΅Π³ΠΎ сайта, ΠΈ HTML ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½ΡƒΠΆΠ½ΠΎ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π² Ρ‚ΠΎ мСсто WEB страницы, Π³Π΄Π΅ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Π½ΡƒΠΆΠ½Ρ‹ΠΉ графичСский элСмСнт. CSS ΠΈ HTML ΠΊΠΎΠ΄ для Ρ€Π°Π±ΠΎΡ‚Ρ‹ со спрайтом ΠžΡ‡Π΅Π²ΠΈΠ΄Π½ΠΎ, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ CSS спрайтов Π½Π° сайтах с большим количСством графичСских элСмСнтов вСрстки ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, позволяСт Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ²Ρ‹ΡΠΈΡ‚ΡŒ ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ ΠΈΡ… Ρ€Π°Π±ΠΎΡ‚Ρ‹, ΠΈ ΡΠ½ΠΈΠ·ΠΈΡ‚ΡŒ Π½Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ Π½Π° сСрвСр. НСсомнСнно, это ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ скаТСтся Π½Π° посСтитСлях ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΊΠ°ΠΊ извСстно Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‚ страницу, Ссли ΠΎΠ½Π° Π½Π΅ открываСтся Π² Ρ‚Π΅Ρ‡Π΅Π½ΠΈΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… сСкунд. Π’Π°ΠΊ ΠΆΠ΅ «Π±Ρ‹ΡΡ‚Ρ€Ρ‹Π΅» сайты Π½Π΅ обходят своим Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ΠΌ ΠΈ поисковыС Ρ€ΠΎΠ±ΠΎΡ‚Ρ‹, давая ΠΈΠΌ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ бонусы Π² Π²Ρ‹Π΄Π°Ρ‡Π΅, ΠΏΠΎ ΡΡ€Π°Π²Π½Π΅Π½ΠΈΡŽ с ΠΈΡ… Π±ΠΎΠ»Π΅Π΅ ΠΌΠ΅Π΄Π»ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ сосСдями. ΠžΠ±Π·ΠΎΡ€ ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²Π»Π΅Π½ для сайта Soft-Arhiv.com с использованиСм русификатора Instant Sprite, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с сСрвисом instantsprite.com Π² ΡƒΠ΄ΠΎΠ±Π½ΠΎΠΌ русскоязычном интСрфСйсС, Π° Ρ‚Π°ΠΊ ΠΆΠ΅ ΠΏΡ€ΠΈ Π²Ρ‹ΠΊΠ»ΡŽΡ‡Π΅Π½Π½ΠΎΠΌ доступС Π² ΡΠ΅Ρ‚ΡŒ Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚.

soft-arhiv.com

CSS спрайты, созданиС ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ css спрайтов, Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€Ρ‹ css спрайтов, ускорСниС Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ сайта

CSS спрайты ΠΈ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ (Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€Ρ‹) для создания css-спрайтов

Π’ Ρ€Π°Π·Π΄Π΅Π»Π΅ новостСй ΠΌΠ½ΠΎΠΉ Π±Ρ‹Π» анонсирован ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄ интСрфСйса Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€Π° спрайтов Instant Sprite – бСсплатной Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π½ΠΎΠΉ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹, которая ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π° для создания CSS спрайтов, Ρ€Π΅Π°Π»ΠΈΠ·ΡƒΡŽΡ‰ΠΈΡ… Π½ΠΎΠ²ΡƒΡŽ ΠΏΡ€ΠΎΠ³Ρ€Π΅ΡΡΠΈΠ²Π½ΡƒΡŽ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΡŽ увСличСния скорости Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Π²Π΅Π±-страниц. Π’ этом ΠΎΠ±Π·ΠΎΡ€Π΅ Π±ΡƒΠ΄ΡƒΡ‚ рассмотрСны Π΅Ρ‰Ρ‘ Π΄Π²Π΅ Ρ‚Ρ€ΠΈ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ для автоматичСского создания (Π³Π΅Π½Π΅Ρ€Π°Ρ†ΠΈΠΈ) спрайтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ эффСктивно ΠΈ эффСктно ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΡΡŽΡ‚ изобраТСния Π² спрайты CSS. ΠžΠΏΠΈΡΡ‹Π²Π°Π΅ΠΌΡ‹Π΅ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π»Π΅Π³ΠΊΠΎ ΠΈ просто ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ css спрайты, Π½ΠΎ ΠΈ ΡΠΎΠ·Π΄Π°ΡŽΡ‚ сниппСты стилСй с ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Π°ΠΌΠΈ спрайтов, Ρ‡Ρ‚ΠΎ Π΄Π°Ρ‘Ρ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Ρ‚Π°ΠΊΠΆΠ΅ Π»Π΅Π³ΠΊΠΎ ΠΈ просто Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ css-спрайты Π½Π° Π²Π΅Π±-страницС.

Но сначала Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΎ CSS спрайтах. Π˜Ρ… часто Ρ‚Π°ΠΊΠΆΠ΅ Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ Π²Π΅Π±-спрайтами (web-sprites), html-спрайтами (html-sprites). ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ Ρ€Π°Π· с этой Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠ΅ΠΉ я столкнулся, ΠΊΠΎΠ³Π΄Π° Ρ€Π΅ΡˆΠΈΠ» ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ своих страниц. Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Ρ‹ Ρƒ мСня нСбольшиС, особСнно Π½ΠΈΡ‡Π΅ΠΌ Π½Π΅ ΠΏΠ΅Ρ€Π΅Π³Ρ€ΡƒΠΆΠ΅Π½Ρ‹ ΠΈ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‚ΡΡ достаточно быстро. И всё ΠΆΠ΅ Ρ…ΠΎΡ‚Π΅Π»ΠΎΡΡŒ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ. Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚ Page Speed ΠΎΡ‚ Google ΠΈ Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½Ρ‹ΠΉ YSlow ΠΎΡ‚ Yahoo Π²Ρ‹Π΄Π°Π»ΠΈ ΠΌΠ½Π΅ список Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΉ ΠΏΠΎ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΡŽ скорости Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ страниц. Π’ числС этих Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΉ Π±Ρ‹Π»ΠΎ ΠΏΠΎΠΆΠ΅Π»Π°Π½ΠΈΠ΅ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒ изобраТСния, Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½Π½Ρ‹Π΅ Π½Π° сайтС, Π² спрайты. Π’Π°ΠΊ Π½Π°Ρ‡Π°Π»ΠΎΡΡŒ ΠΌΠΎΡ‘ знакомство с CSS-спрайтами.

Π§Ρ‚ΠΎ ΠΆΠ΅ это Ρ‚Π°ΠΊΠΎΠ΅ – css спрайты, ΠΈ ΠΊΠ°ΠΊ ΠΈΡ… ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ? Основой ΠΌΠ΅Ρ‚ΠΎΠ΄Π° являСтся объСдинСниС мноТСства ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ, Ρ€Π°Π·ΠΌΠ΅Ρ‰Ρ‘Π½Π½Ρ‹Ρ… Π½Π° Π²Π΅Π±-страницС Π² ΠΎΠ΄Π½Ρƒ ΡΠΎΡΡ‚Π°Π²Π½ΡƒΡŽ ΠΌΠΎΠ·Π°ΠΈΡ‡Π½ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ. Π“Π»Π°Π²Π½Ρ‹ΠΌ условиСм создания ΠΈ использования css-спрайтов являСтся Π½Π°Π»ΠΈΡ‡ΠΈΠ΅ возмоТности использования этого мноТСства ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ ΠΊΠ°ΠΊ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… вставок Π½Π° страницС. Как ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, эти ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ собой Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΡ‹, ΠΈΠΊΠΎΠ½ΠΊΠΈ, ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ графичСскиС элСмСнты Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΈ управлСния. Если эти ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊΠ°ΠΊ Π³Ρ€Π°Ρ„ΠΈΠΊΡƒ с Ρ‚Π΅Π³ΠΎΠΌ <img>, Π½ΠΎ ΠΈ ΠΊΠ°ΠΊ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Π΅ изобраТСния со стилСвым ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ΠΌ background-image: url (xxxxxxxx…), Ρ‚ΠΎ созданиС ΠΈ использованиС css-спрайтов Π½Π°ΠΏΡ€Π°ΡˆΠΈΠ²Π°Π΅Ρ‚ΡΡ само собой (Π·Π°ΠΌΠ΅Ρ‡Ρƒ, Ρ‡Ρ‚ΠΎ упомянутая Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ имССтся ΠΏΠΎΡ‡Ρ‚ΠΈ всСгда). НСкоторыС источники (ΠΊΠ°ΠΊ Π·Π°Π±ΡƒΠ³ΠΎΡ€Π½Ρ‹Π΅, Ρ‚Π°ΠΊ ΠΈ отСчСствСнныС) Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ Ρ†Π΅Π»Π΅Π²ΡƒΡŽ ΡΠΎΡΡ‚Π°Π²Π½ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ мастСр-спрайтом, ΠΈΠ½ΠΎΠ³Π΄Π° спрайт-листом. Π­Ρ‚ΠΎΠΉ Ρ‚Π΅Ρ€ΠΌΠΈΠ½ΠΎΠ»ΠΎΠ³ΠΈΠΈ Π±ΡƒΠ΄Ρƒ ΠΏΡ€ΠΈΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒΡΡ ΠΈ я. Π”Π°Π»ΡŒΠ½Π΅ΠΉΡˆΠ΅Π΅ использованиСм ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠΉ Π½ΡƒΠΆΠ½ΠΎΠΉ Π½Π°ΠΌ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΈΠ· мастСр-спрайта Π½Π° Π²Π΅Π±-страницС осущСствляСтся ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ позиционирования срСдствами CSS. Вся Ρ„ΠΈΡˆΠΊΠ° этой Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ состоит Π² Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΌ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΠΈ HTTP-запросов Π½Π° Π·Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. ВмСсто Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… (ΠΏΠΎΡ€ΠΎΠΉ дСсятков ΠΈ Π±ΠΎΠ»Π΅Π΅) запросов Π½Π° Π·Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ Ρ‚ΡƒΠ΅Π²ΠΎΠΉ Ρ…ΡƒΡ‡ΠΈ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ остаётся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ запрос Π½Π° Π·Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ этой составной ΠΌΠΎΠ·Π°ΠΈΡ‡Π½ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ. НСсмотря Π½Π° больший Ρ€Π°Π·ΠΌΠ΅Ρ€ этой ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ, врСмя Π΅Ρ‘ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ нСсравнСнно мСньшС Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ, ΠΏΠΎΡ‚Ρ€Π΅Π±Π½ΠΎΠ³ΠΎ Π½Π° мноТСство HTTP-запросов для ΠΎΠ΄ΠΈΠ½ΠΎΡ‡Π½Ρ‹Ρ… ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ ΠΈ ΠΈΡ… Π·Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ. ИспользованиС css-спрайтов позволяСт ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒ ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ Π² Ρ€Π°Π·Ρ‹, соотвСтствСнно сама страница, Π³Π΄Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ спрайты CSS, открываСтся Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ быстрСС. Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ изюминкой этого ΠΌΠ΅Ρ‚ΠΎΠ΄Π° являСтся ΠΎΡ‡Π΅Π½ΡŒ простая рСализация rollover-эффСкта ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π±Π΅Π· примСнСния скриптов (Ρ‚ΠΎΠ»ΡŒΠΊΠΎ срСдствами CSS), Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΈΠ³ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ для создания эффСктных ΠΈ ΡΡ‚ΠΈΠ»ΡŒΠ½Ρ‹Ρ… мСню, ΠΊΠ½ΠΎΠΏΠΎΠΊ управлСния ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… графичСских элСмСнтов, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Ρ… Π½Π° Π²Π΅Π±-сайтах.

ΠšΡΡ‚Π°Ρ‚ΠΈ, ΠΎ CSS. ИспользованиС Π½Π° страницС ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹Ρ… ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ, ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… состоит ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½Ρ‘Π½Π½ΠΎΠ΅ составноС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, осущСствляСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойства background-position. Π­Ρ‚ΠΎ свойство опрСдСляСт ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π² элСмСнтС, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΠΎΠΌ для Π΅Π΅ размСщСния, ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ. ЗначСниями свойства ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ слова ΠΈΠ»ΠΈ значСния, ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹Π΅ Π² пиксСлях ΠΈΠ»ΠΈ ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π°Ρ…. ΠŸΡ€ΠΈ использовании css спрайтов ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ Ρ‚ΠΎΡ‡Π½Ρ‹Π΅ значСния Π² пиксСлях. ΠŸΠ΅Ρ€Π²ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ – ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Π° ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ (Ρ…), Π²Ρ‚ΠΎΡ€ΠΎΠ΅ – ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ (Ρƒ). Богласно спСцификации CSS это свойство примСняСтся для Π±Π»ΠΎΡ‡Π½Ρ‹Ρ… ΠΈ замСняСмых элСмСнтов. На ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅ спрайты часто ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ Π² строчных элСмСнтах <span>, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π΄Π΅Π»Π°ΡŽΡ‚ Π±Π»ΠΎΡ‡Π½Ρ‹ΠΌ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ свойства display:block, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°Π΄Π°Ρ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΈ высоту. Для этих элСмСнтов ΠΈ задаётся свойство background c Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹ΠΌΠΈ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Π°ΠΌΠΈ (background-position). Если ΡΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΎ ΠΈ Π³Ρ€ΡƒΠ±ΠΎ, Ρ‚ΠΎ это ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ (мСсторасполоТСниС) Π½ΡƒΠΆΠ½ΠΎΠΉ Π½Π°ΠΌ малСнькой ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π½Π° большом холстС ΠΎΠ±Ρ‰Π΅ΠΉ составной ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ-спрайта. Благодаря этому свойству ΠΈ Тёстко Π·Π°Π΄Π°Π½Π½Ρ‹ΠΌ высотС ΠΈ ΡˆΠΈΡ€ΠΈΠ½Π΅ элСмСнта, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ примСняСтся спрайт, обСспСчиваСтся визуализация Π½ΡƒΠΆΠ½ΠΎΠΉ Π½Π°ΠΌ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π² этом элСмСнтС. ΠΠΊΡ†Π΅Π½Ρ‚ΠΈΡ€ΡƒΡŽ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ свойство background-position обСспСчиваСт доставку Π½ΡƒΠΆΠ½ΠΎΠΉ Π½Π°ΠΌ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ (Π² Π²ΠΈΠ΄Π΅ Π±Π»ΠΎΡ‡Π½ΠΎΠ³ΠΎ элСмСнта), ΠΊΠ°ΠΊ-Π±Ρ‹ Π²Ρ‹Ρ€Π΅Π·Π°Π½Π½ΠΎΠΉ ΠΈΠ· мастСр-спрайта, Π½Π° Π²Π΅Π±-страницу. Π—Π° Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ ΠΆΠ΅ этой самой ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π² Π½ΡƒΠΆΠ½ΠΎΠΌ мСстС страницы ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ Π»ΠΈΠ±ΠΎ традиционная HTML-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ°, Π»ΠΈΠ±ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° с использованиСм ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠ², классов ΠΈΠ»ΠΈ простых сСлСкторов с Π½ΡƒΠΆΠ½Ρ‹ΠΌΠΈ свойствами CSS (position, float, margin ΠΈ ΠΏΡ€ΠΎΡ‡ΠΈΠΌΠΈ) – здСсь ΠΌΠ½ΠΎΠ³ΠΎΠ΅ зависит ΠΎΡ‚ ΠΈΠΌΠ΅ΡŽΡ‰ΠΈΡ…ΡΡ Ρƒ вас Π½Π°Ρ€Π°Π±ΠΎΡ‚ΠΎΠΊ ΠΈ собствСнных ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡Ρ‚Π΅Π½ΠΈΠΉ. Если Ρƒ вас Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ‚ вопрос ΠΏΠΎΡ‡Π΅ΠΌΡƒ ΠΏΡ€ΠΈ использовании спрайтов CSS примСняСтся свойство background, Ρ‚ΠΎ напоминаю, Ρ‡Ρ‚ΠΎ тСхнология css-спрайтов ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅Ρ‚ ΠΈΡ… Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ Π½Π° страницах сайта ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΊΠ°ΠΊ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… вставок. ΠŸΡ€ΠΈΡ‡Ρ‘ΠΌ Π½ΡƒΠΆΠ½Ρ‹ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ свойство background-position, Π½ΠΎ ΠΈ background-image с ΡƒΠΊΠ°Π·Π°Π½ΠΈΠ΅ΠΌ ΠΏΡƒΡ‚ΠΈ Π΄ΠΎ мастСр-спрайта ΠΈ ΠΏΡ€ΠΈ нСобходимости Π΄Ρ€ΡƒΠ³ΠΈΠ΅ свойства Ρ„ΠΎΠ½Π°. НСкоторыС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Π² Ρ‚ΠΎΠΌ числС с использованиСм сокращённого написания свойства background ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Π² Π½ΠΈΠΆΠ΅ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹Ρ… листингах стилСй.

ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ, Ρ…ΠΎΡ€ΠΎΡˆΠΎ Π·Π½Π°ΠΊΠΎΠΌΡ‹Π΅ с CSS, ΠΌΠΎΠ³ΡƒΡ‚ Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ CSS спрайтов Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ Ρ‚ΠΎΠ½ΡŒΡˆΠ΅ ΠΈ слоТнСС. Π”Π°, это Ρ‚Π°ΠΊ. Если располоТСниС спрайта Π·Π°Π΄Π°Π½ΠΎ Π² Ρ‚ΠΎΡ‡Π½Ρ‹Ρ… Π΅Π΄ΠΈΠ½ΠΈΡ†Π°Ρ… (Ρ€Ρ…), Ρ‚ΠΎ ΠΎΠ½ΠΈ ΠΈΠ½Ρ‚Π΅Ρ€ΠΏΡ€Π΅Ρ‚ΠΈΡ€ΡƒΡŽΡ‚ΡΡ ΠΊΠ°ΠΊ смСщСния ΠΎΡ‚ Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ ΡƒΠ³Π»Π° области отступа элСмСнта. Π’ΠΎΡ‡ΠΊΠ°, ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΎΡ‚ΡΡ‡ΠΈΡ‚Ρ‹Π²Π°ΡŽΡ‚ΡΡ смСщСния, – Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ Π»Π΅Π²Ρ‹ΠΉ ΡƒΠ³ΠΎΠ» исходного изобраТСния.

Π‘Π°ΠΌΠΎΠ΅ Π΄ΠΎΡ…ΠΎΠ΄Ρ‡ΠΈΠ²ΠΎΠ΅ объяснСниС позиционирования Ρ„ΠΎΠ½Π° Π² случаС задания Ρ‚ΠΎΡ‡Π½Ρ‹Ρ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ свойства background-position я Π½Π°ΡˆΡ‘Π» Π² Π±Π»ΠΎΠ³Π΅ KtoNaNovenkogo.ru, ΠΎΡ‚ΠΊΡƒΠ΄Π° взята Π½ΠΈΠΆΠ΅ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π°Ρ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΈ описаниС ΠΊ Π½Π΅ΠΉ:

Β«ΠŸΡ€ΠΈ Π·Π°Π΄Π°Π½ΠΈΠΈ позиционирования изобраТСния Ρ„ΠΎΠ½Π° с использованиСм Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹Ρ… Π΅Π΄ΠΈΠ½ΠΈΡ† Π² background-position ΠΈΠΌΠ΅Π΅Ρ‚ мСсто Π±Ρ‹Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏ опрСдСлСния Π΅Π³ΠΎ ΠΈΡ‚ΠΎΠ³ΠΎΠ²ΠΎΠ³ΠΎ полоТСния. Π’.Π΅. Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°ΡΡΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ Π·Π°Π΄Π°Π½Π½Ρ‹Π΅ отступы ΠΏΠΎ осям X ΠΈ Y ΠΎΡ‚ Π½Π°Ρ‡Π°Π»Π° ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚ области, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ позиционируСтся ΠΎΠ±ΡŠΠ΅ΠΊΡ‚, Π΄ΠΎ Π½Π°Ρ‡Π°Π»Π° ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚ этого самого изобраТСния.Β»

Если Π²Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Π΅Ρ‚Π΅ ΠΏΠΎ ссылкС, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ я ΡƒΠΊΠ°Π·Π°Π» Π²Ρ‹ΡˆΠ΅, Ρ‚ΠΎ Π½Π°ΠΉΠ΄Ρ‘Ρ‚Π΅ особСнности позиционирования Ρ„ΠΎΠ½Π° ΠΏΡ€ΠΈ использовании ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… слов ΠΈ ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚ΠΎΠ². Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ страницы этого Π±Π»ΠΎΠ³Π°, Π½Π°ΠΉΠ΄Ρ‘Ρ‚Π΅ ΠΌΠ½ΠΎΠ³ΠΎ интСрСсного.

ЦСль этого ΠΎΠ±Π·ΠΎΡ€Π° – ΠΎΡ‚Π²Π΅Ρ‚ Π½Π° вопросы: ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ css-спрайт, ΠΊΠ°ΠΊ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒ изобраТСния Π² css спрайт ΠΈ знакомство с трСмя ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°ΠΌΠΈ, ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΠ²Π°ΡŽΡ‰ΠΈΠΌΠΈ простоС ΠΈ Π»Ρ‘Π³ΠΊΠΎΠ΅ созданиС спрайтов CSS (CSS Sprites), поэтому ΠΎ самой Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ я большС Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ Π½Π΅ Π±ΡƒΠ΄Ρƒ. Π’ ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅ сСйчас ΠΌΠ½ΠΎΠ³ΠΎ Ρ‚ΠΎΠ»ΠΊΠΎΠ²Ρ‹Ρ… ΠΈ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Ρ‹Ρ… ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΠΎΠ² Π½Π° эту Ρ‚Π΅ΠΌΡƒ (ΠΎΠ΄Π½Ρƒ ссылку я ΡƒΠΊΠ°Π·Π°Π» Π²Ρ‹ΡˆΠ΅). ΠžΠ±Π·ΠΎΡ€ посвящён Ρ€Π°Π±ΠΎΡ‚Π΅ с ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°ΠΌΠΈ ΠΏΠΎ созданию CSS спрайтов (Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€Π°ΠΌΠΈ спрайтов), Π³Π΄Π΅ я лишь ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΎ ΠΊΠΎΡΠ½ΡƒΡΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π²Π°ΠΆΠ½Ρ‹Ρ… (Π½Π° ΠΌΠΎΠΉ взгляд) ΠΌΠΎΠΌΠ΅Π½Ρ‚ΠΎΠ² ΠΏΡ€ΠΈ использовании спрайтов. Π‘Ρ€Π°Π·Ρƒ ΠΎΠ³ΠΎΠ²ΠΎΡ€ΡŽΡΡŒ – ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ CSS-спрайтов Π½Π΅ панацСя ΠΈ ΠΏΡ‹Ρ‚Π°Ρ‚ΡŒΡΡ Π·Π°ΠΏΠΈΡ…Π½ΡƒΡ‚ΡŒ Π² спрайты большиС ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ шапок, заставок ΠΈ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ, которая ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΊΠ°ΠΊ Π³Ρ€Π°Ρ„ΠΈΠΊΠ°, Π° Π½Π΅ ΠΊΠ°ΠΊ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Π΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ, Π½Π΅ слСдуСт. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ спрайты рСкомСндуСтся для ΠΏΠ΅Ρ€ΠΌΠ°Π½Π΅Π½Ρ‚Π½Ρ‹Ρ…, часто ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡŽΡ‰ΠΈΡ…ΡΡ Π½Π° страницах ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. Если эти изобраТСния Π±ΡƒΠ΄ΡƒΡ‚ часто Π·Π°ΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ Π½Π° Π΄Ρ€ΡƒΠ³ΠΈΠ΅, Π²ΠΎΠ·Π½ΠΈΠΊΠ½Π΅Ρ‚ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ Π² создании Π½ΠΎΠ²Ρ‹Ρ… спрайтов ΠΈ, СстСствСнно, ΠΏΡ€Π°Π²ΠΊΠ΅ CSS ΠΈ HTML.

ΠŸΠΎΠ΄ΠΎΠΏΡ‹Ρ‚Π½Ρ‹Π΅ Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€Ρ‹ css спрайтов (css sprite generators) это бСсплатныС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ CssSpriter-1.2, DoHTMLSprite ΠΈ SpriteGenerator 0.2. Если пСрвая ΠΈΠ· Π½ΠΈΡ… ΠΊΠΎΠ΅-Π³Π΄Π΅ упоминаСтся Π½Π° русскоязычных рСсурсах, Ρ‚ΠΎ ΡƒΠΏΠΎΠΌΠΈΠ½Π°Π½ΠΈΠΉ ΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠΉ ΠΈ Ρ‚Ρ€Π΅Ρ‚ΡŒΠ΅ΠΉ я Π² Π ΡƒΠ½Π΅Ρ‚Π΅ Π½Π΅ Π²ΠΈΠ΄Π΅Π». ΠŸΠΎΡ‡Ρ‚ΠΈ всС Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€Ρ‹ CSS спрайтов, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, ΡΠ²Π»ΡΡŽΡ‚ΡΡ ΠΎΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹ΠΌΠΈ рСсурсами (слСдуя ΠΌΠΎΠ΄Π½ΠΎΠΉ Π½Ρ‹Π½Π΅ Ρ‚Π΅Π½Π΄Π΅Π½Ρ†ΠΈΠΈ). ΠŸΡ€ΠΈΡ‡Π΅ΠΌ русскоязычных ΠΈΠ· Π½ΠΈΡ… Π½Π΅ Π±ΠΎΠ»Π΅Π΅ Π΄Π²ΡƒΡ…-Ρ‚Ρ€Π΅Ρ…. МнС нравятся ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ ΠΈ ΠΎΠ½Π»Π°ΠΉΠ½-сСрвисы, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… я ΠΌΠΎΠ³Ρƒ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ, Ссли Π½Π΅ с Ρ…ΠΎΠ΄Ρƒ, Ρ‚ΠΎ с Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… ΠΏΠΎΠΏΡ‹Ρ‚ΠΎΠΊ. Из Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ΠΎΠ² спрайтов, ΠΏΠ΅Ρ€Π΅Π»ΠΎΠΏΠ°Ρ‡Π΅Π½Π½Ρ‹Ρ… ΠΌΠ½ΠΎΠΉ, большС всСх понравился упомянутый ΡƒΠΆΠ΅ Instant Sprite. Π—Π° простоту, удобство, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ настроСк, ΡΡ„Ρ„Π΅ΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ ΠΈ ΠΏΡ€Π΅Π΄ΡΠΊΠ°Π·ΡƒΠ΅ΠΌΠΎΡΡ‚ΡŒ. ΠžΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€Ρ‹ (Π² основном ΠΎΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹Π΅) Π½Π΅ соотвСтствовали этим критСриям (ΠΌΠΎΠΆΠ΅Ρ‚ Ρ€ΡƒΠΊΠΈ Π½Π΅ совсСм прямыС ΠΈΠ»ΠΈ Π½Π΅ ΠΎΡ‚Ρ‚ΡƒΠ΄Π° растут, ΠΈΠ»ΠΈ Π³ΠΎΠ»ΠΎΠ²Π° Π½Π΅ Ρ‚Π°ΠΊ ΠΏΠΎΠ²Π΅Ρ€Π½ΡƒΡ‚Π°). ΠžΠΏΡ‹Ρ‚Π½Ρ‹ΠΉ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ (Ссли Π²Π΄Ρ€ΡƒΠ³ Π·Π°Π±Ρ€Π΅Π΄Π΅Ρ‚ сюда) ΠΌΠΎΠΆΠ΅Ρ‚ ΡƒΡΠΌΠ΅Ρ…Π½ΡƒΡ‚ΡŒΡΡ – Ρ‡Π΅Π³ΠΎ ΠΎΠ³ΠΎΡ€ΠΎΠ΄ Π³ΠΎΡ€ΠΎΠ΄ΠΈΡ‚ΡŒ, Ссли спрайты ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π² графичСском Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅, Π° ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ ΠΏΠΎΡΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ (Π½Ρƒ-Π½Ρƒ). ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ ΠΌΠΎΠΆΠ½ΠΎ, Π½ΠΎ я ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°ΡŽ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ спСциализированными инструмСнтами, ΠΏΡ€ΠΈΡ‡Ρ‘ΠΌ ΠΌΠ½Π΅ большС ΠΏΠΎ Π΄ΡƒΡˆΠ΅ всС ΠΆΠ΅ дСсктопныС прилоТСния*. ВсС Ρ‚Ρ€ΠΈ описываСмыС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ Ρ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Π»ΠΈΡΡŒ ΠΏΠΎΠ΄ Windows XP SP3. ВозмоТности ΠΈΡ… Π½Π΅ Ρ‚Π°ΠΊ ΠΎΠ±ΡˆΠΈΡ€Π½Ρ‹, ΠΊΠ°ΠΊ Ρƒ Instant Sprite, Π½ΠΎ вСсьма достойны внимания.
ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅ ΠΎΡ‚ 22.02.14. ВсС ссылки Π² этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ с ΡƒΠΏΠΎΠΌΠΈΠ½Π°Π½ΠΈΠ΅ΠΌ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ Instant Sprite Π²Π΅Π΄ΡƒΡ‚ ΠΊ достаточно ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎΠΌΡƒ анонсу ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄Π° этой ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹. ПослС написания ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΉ ΡΡ‚Π°Ρ‚ΡŒΠΈ ΠΎΠ± Instant Sprite я Ρ€Π΅ΡˆΠΈΠ» Π΄Π°Ρ‚ΡŒ здСсь ссылку ΠΈ Π½Π° Π½Π΅Ρ‘. Π’ΠΎΡ‚ ΠΎΠ½Π° – ΡΡ‚Π°Ρ‚ΡŒΡ ΠΎ Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€Π΅ css спрайтов Instant Sprite.
Π•Ρ‰Ρ‘ ΠΎΠ΄Π½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅. Π₯ΠΎΡ‡Ρƒ Π°Π½ΠΎΠ½ΡΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½Π΅Π΄Π°Π²Π½ΠΎ Π½Π°ΠΏΠΈΡΠ°Π½Π½ΡƒΡŽ ΡΡ‚Π°Ρ‚ΡŒΡŽ, которая освСщаСт нСсколько ΠΈΠ½ΠΎΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ ΠΊ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΡŽ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚ ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² css спрайтов для ΠΈΡ… размСщСния Π½Π° Π²Π΅Π±-страницах. Π’ΠΎΡ‚ ссылка Π½Π° эту ΡΡ‚Π°Ρ‚ΡŒΡŽ: ΠšΠ°Π»ΡŒΠΊΡƒΠ»ΡΡ‚ΠΎΡ€ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚ CSS спрайтов Sprite Cow.
Однако, приступим ΠΊ Π½Π°ΡˆΠ΅ΠΌΡƒ обзору…

Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ спрайтов CssSpriter-1.2

(http://codebrewery.blogspot.ru/p/cssspriter.html)

НСбольшая бСсплатная ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° (zip-Π°Ρ€Ρ…ΠΈΠ² 150 ΠΊΠ±), Π½Π΅ Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‰Π°Ρ инсталляции. Π Π°Π±ΠΎΡ‚Π° с ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΎΠΉ ΠΏΠΎ созданию CSS спрайтов Π½Π΅ Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚ Π·Π°Ρ‚Ρ€ΡƒΠ΄Π½Π΅Π½ΠΈΠΉ, интСрфСйс прост ΠΈ понятСн. Кнопки ΠΏΠ°Π½Π΅Π»ΠΈ инструмСнтов Π΄ΡƒΠ±Π»ΠΈΡ€ΡƒΡŽΡ‚ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ мСню ΠΈ ΠΈΠΌΠ΅ΡŽΡ‚ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки. На Π»Π΅Π²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ исходныС изобраТСния с ΠΈΡ… Ρ€Π°Π·ΠΌΠ΅Ρ€Π°ΠΌΠΈ ΠΈ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Π°ΠΌΠΈ Π² Π±ΡƒΠ΄ΡƒΡ‰Π΅ΠΌ спрайтС, правая панСль ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρ‹ Ρ€Π°Π±ΠΎΡ‚Ρ‹ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ (ΠΎΠ΄Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΠ° это Π²Ρ‹Ρ…ΠΎΠ΄Π½ΠΎΠΉ css спрайт, вторая – Π΄Π΅ΠΌΠΎ-html).

Π”ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ изобраТСния для объСдинСния Π² спрайт ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ· систСмного Π΄ΠΈΠ°Π»ΠΎΠ³Π° ΠΏΠΎ ΠΎΠ΄Π½ΠΎΠΌΡƒ ΠΈΠ»ΠΈ сразу мноТСствСнным Π²Ρ‹Π±ΠΎΡ€ΠΎΠΌ ΠΈΠ· ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²Π»Π΅Π½Π½ΠΎΠΉ ΠΏΠ°ΠΏΠΊΠΈ с изобраТСниями. Π’ΠΎΡ‡Π½ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ изобраТСния ΠΈ ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠΌ пСрСтаскивания. ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Π²Ρ…ΠΎΠ΄Π½Ρ‹Π΅ изобраТСния ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠ²: ico, gif, png, bmp, jpg. Π€Π°ΠΉΠ»Ρ‹ Π€ΠΎΡ‚ΠΎΡˆΠΎΠΏΠ° psd Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ, Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Π½Π΅ ΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Π» – этих Ρ…Π²Π°Ρ‚Π°Π΅Ρ‚ с ΠΈΠ·Π±Ρ‹Ρ‚ΠΊΠΎΠΌ. НС Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ послСдниС Π΄Π²Π° Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° bmp ΠΈ jpg. Они Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Ρ…ΠΎΡ€ΠΎΡˆΠΎ Π²ΠΈΠ΄Π½ΠΎ Π² спискС ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€ Π½Π° Π»Π΅Π²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ ΠΈ Π² Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚ΠΈΡ€ΡƒΡŽΡ‰Π΅ΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ Π½Π° ΠΏΡ€Π°Π²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ (ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ этих Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠ² Π±ΡƒΠ΄ΡƒΡ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ Π² спрайтС Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ Ρ„ΠΎΠ½ ΠΈΠ»ΠΈ поля, ΠΊΠ°ΠΊ говорят Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ). Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ‚Π°ΠΊΠΈΠ΅ спрайты Π½Π° Π²Π΅Π±-страницах, Π½Π°Π΄ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡŒ Π³Π»ΡƒΠ±ΠΈΠ½Ρƒ Ρ†Π²Π΅Ρ‚Π° ΠΈ вновь ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π½Π΅ всСгда получаСтся ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ. Π’Ρ‹Ρ…ΠΎΠ΄Π½ΠΎΠΉ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ ΠΎΠ΄ΠΈΠ½ – png 32Π±ΠΈΡ‚. Для Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ отобраТСния ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π² старых вСрсиях Internet Explorer, ΠΆΠ΅Π»Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ пСрСвСсти ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² 8-Π±ΠΈΡ‚ΠΎΠ²Ρ‹ΠΉ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ png ΠΈ снова ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ. На Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ ΠΏΡ€Π°Π²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ HTML-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ с Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΌΠΈ стилями CSS для примСнСния спрайтов.

НаТатиСм Π½Π° Π»Π΅Π²ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΏΠ°Π½Π΅Π»ΠΈ инструмСнтов наш ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ экспортируСтся Π² HTML. Π’ ΠΏΠ°ΠΏΠΊΠ΅, ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠΉ для сохранСния Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π° появятся Ρ‚Ρ€ΠΈ Ρ„Π°ΠΉΠ»Π°:

  • Π€Π°ΠΉΠ» css-sprite-coordinates.jpg – это ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ схСматичСски ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ Π½Π°ΡˆΠΈΡ… ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ Π² мастСр-спрайтС. ΠšΠ°Ρ‡Π΅ΡΡ‚Π²ΠΎ этого изобраТСния оставляСт ΠΆΠ΅Π»Π°Ρ‚ΡŒ Π»ΡƒΡ‡ΡˆΠ΅Π³ΠΎ, Π½ΠΎ ΠΈ Π½ΡƒΠΆΠ½ΠΎ Ρ‚ΠΎ ΠΎΠ½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² справочных цСлях.
  • Π€Π°ΠΉΠ» index.html – это тСстовая страница для просмотра нашСго спрайта с Ρ‚Π°ΠΊΠΎΠΉ Π²ΠΎΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΎΠΉ:

    ЗабСгая Π²ΠΏΠ΅Ρ€Π΅Π΄ скаТу, Ρ‡Ρ‚ΠΎ Π·Π½Π°ΠΊ минус ΠΏΠ΅Ρ€Π΅Π΄ Π½ΡƒΠ»Π΅Π²Ρ‹ΠΌΠΈ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Π°ΠΌΠΈ лишний: ноль Ρ…ΠΎΡ‚ΡŒ с плюсом, Ρ…ΠΎΡ‚ΡŒ с минусом – всС Ρ€Π°Π²Π½ΠΎ ноль (это ΡƒΡ‚Π²Π΅Ρ€ΠΆΠ΄Π΅Π½ΠΈΠ΅ Π½Π΅ всСгда ΠΈ Π²Π΅Π·Π΄Π΅ Π²Π΅Ρ€Π½ΠΎ, Π½ΠΎ Π² случаС с CSS – справСдливо). Π’ΠΎ ΠΆΠ΅ самоС касаСтся примСнСния Π΅Π΄ΠΈΠ½ΠΈΡ†Ρ‹ измСрСния (px) послС нуля. Π­Ρ‚ΠΎ ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ возмоТности для ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΈ ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ стиля. НынС всС Ρ‡Π°Ρ‰Π΅ Π² этом Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΈ ΡƒΠΏΠΎΡ‚Ρ€Π΅Π±Π»ΡΡŽΡ‚ Ρ‚Π΅Ρ€ΠΌΠΈΠ½ – минификация. Π£ мСня ΠΏΡ€ΠΈ этом Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ‚ навязчивая ассоциация с Ρ‚Π΅Ρ€ΠΌΠΈΠ½ΠΎΠΌ дСфСкация.

    На ΡΠΊΡ€ΠΈΠ½ΡˆΠΎΡ‚Π΅, располоТСнном Π½ΠΈΠΆΠ΅, ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ кусочка тСстовой страницы Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅. Π― Π½Π΅ Π΄Π΅Π»Π°Π» ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡŽ изобраТСния для обСспСчСния прозрачности, поэтому исходныС ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°Ρ… bmp ΠΈ jpg Π² Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚ΠΈΡ€ΡƒΡŽΡ‰Π΅ΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ ΠΈΠΌΠ΅ΡŽΡ‚ Ρ‡Ρ‘Ρ€Π½Ρ‹ΠΉ Ρ„ΠΎΠ½. На этом Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Π΅ Π²Π΅Π±-страницы наглядно ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ (ΡΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ) ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ спрайта, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ свойства position, float ΠΈ margin (см. ΡΠΊΡ€ΠΈΠ½ΡˆΠΎΡ‚ стиля Π²Ρ‹ΡˆΠ΅). НиТС Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½ Π΅Ρ‰Ρ‘ ΠΎΠ΄ΠΈΠ½ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ располоТСния ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ.

  • И, Π½Π°ΠΊΠΎΠ½Π΅Ρ†, Ρ„Π°ΠΉΠ» sprites.png – это наш спрайт (мастСр-спрайт, спрайт-лист – Π½Π°Π·Ρ‹Π²Π°ΠΉΡ‚Π΅ ΠΊΠ°ΠΊ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅).

    Если Π²Ρ‹ просматриваСтС эту страницу Π² IE6, Ρ‚ΠΎ Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ ΠΏΠΎΠΌΠΈΠΌΠΎ Ρ‡Ρ‘Ρ€Π½ΠΎΠ³ΠΎ Ρ„ΠΎΠ½Π° Ρƒ Π΄Π²ΡƒΡ… ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ Ρ‚Π°ΠΊΠΆΠ΅ сСроватый Ρ„ΠΎΠ½ Ρƒ Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ вмСсто Π±Π΅Π»ΠΎΠ³ΠΎ (Ρ‚ΠΎΡ‡Π½Π΅Π΅ – ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΠ³ΠΎ), ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π½Π΅Ρ‚ Π² Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½Ρ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…. Π­Ρ‚ΠΎ Π½Π°ΠΏΠΎΠΌΠΈΠ½Π°Π½ΠΈΠ΅ ΠΎ ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄Π΅ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚ΠΈΡ€ΡƒΡŽΡ‰Π΅Π³ΠΎ Ρ„Π°ΠΉΠ»Π° png Π² 8-Π±ΠΈΡ‚ΠΎΠ²Ρ‹ΠΉ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ с Π·Π°Π½ΠΎΠ²ΠΎ устанавливаСмой ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒΡŽ. Для наглядности ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° здСсь ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π° Ρ€Π°ΠΌΠΊΠΎΠΉ Π² 1px.

ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° позволяСт Ρ‚Π°ΠΊΠΆΠ΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ спрайт с Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΌ располоТСниСм Π²Ρ…ΠΎΠ΄Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. Кнопка, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ красная стрСлка, Ρ€Π΅Π°Π»ΠΈΠ·ΡƒΠ΅Ρ‚ эту Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, входящих Π² спрайт измСнились (Π² сравнСнии с Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌ располоТСниСм).

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π°ΠΌ Π²Ρ‹Π΄Π°Π»Π° ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°, ΡΠ²Π»ΡΡŽΡ‚ΡΡ основой для примСнСния спрайтов Π½Π° своСй страницС. ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, Π½Π°Π΄ΠΎ ΡƒΠ²ΡΠ·Π°Ρ‚ΡŒ ΡƒΠΆΠ΅ ΠΈΠΌΠ΅ΡŽΡ‰ΠΈΠ΅ΡΡ стили со стилями спрайтов, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρ‹ вмСсто классов, ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ сами стили спрайтов, ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π½ΡƒΠΆΠ½ΡƒΡŽ Π²Π°ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ, вынСсти стили Π²ΠΎ внСшний Ρ„Π°ΠΉΠ» ΠΈ Ρ‚.Π΄. – всС Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π²ΠΈΡΠ΅Ρ‚ΡŒ ΠΎΡ‚ страницы, Π³Π΄Π΅ Π²Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ спрайты, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΡ‚ Π²Π°ΡˆΠΈΡ… ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡Ρ‚Π΅Π½ΠΈΠΉ ΠΈ Π½Π°Π²Ρ‹ΠΊΠΎΠ².
Однако, Π½Π΅ всС Ρ‚Π°ΠΊ Ρ…ΠΎΡ€ΠΎΡˆΠΎ. ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°, Π½Π° ΠΌΠΎΠΉ взгляд, ΠΈΠΌΠ΅Π΅Ρ‚ ΠΎΠ΄ΠΈΠ½ ΡΠ΅Ρ€ΡŒΡ‘Π·Π½Ρ‹ΠΉ нСдостаток. Π’ Π½Π΅ΠΉ Π½Π΅Ρ‚ возмоТности Π·Π°Π΄Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΊΠΈ (смСщСния, отступы) ΠΌΠ΅ΠΆΠ΄Ρƒ изобраТСниями Π² спрайтС, поэтому ΠΏΡ€ΠΈ просмотрС страницы с ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½Π½Ρ‹ΠΌ ΠΈΠ»ΠΈ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½Π½Ρ‹ΠΌ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΈΠ½ΠΎΠ³Π΄Π° случаСтся, ΠΌΠΎΠ³ΡƒΡ‚ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡƒΡ‚ΡŒ всякиС Π½Π°ΠΊΠ»Π°Π΄ΠΊΠΈ. Π’Ρ‚ΠΎΡ€ΠΎΠΉ, Π½ΠΎ мСньший нСдостаток состоит Π² нСвозмоТности сортировки ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ΅, поэтому Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ изобраТСния Π² ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ Π½ΡƒΠΆΠ½ΠΎ Π² Ρ‚ΠΎΠΌ порядкС, ΠΊΠ°ΠΊΠΎΠΉ Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌ (Π½Π° самом Π΄Π΅Π»Π΅ это вопрос Ρ‚ΠΎΠ»ΡŒΠΊΠΎ собствСнных ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡Ρ‚Π΅Π½ΠΈΠΉ, Π² ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΌ счСтС, использованиС Π½ΡƒΠΆΠ½ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ опрСдСляСтся Π·Π°Π΄Π°Π½ΠΈΠ΅ΠΌ Π΅Π΅ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚).

Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ спрайтов DoHTMLSprite

Π’Ρ€ΡƒΠ΄Π½ΠΎ ΠΏΠΎΠ½ΡΡ‚ΡŒ, ΠΊΡ‚ΠΎ Π°Π²Ρ‚ΠΎΡ€ этой ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹, Π½ΠΎ практичСски всС Π·Π°Π±ΡƒΠ³ΠΎΡ€Π½Ρ‹Π΅ софт-Π°Ρ€Ρ…ΠΈΠ²Ρ‹ Π² качСствС пСрвоисточника приводят ссылку Π½Π° http://www.downloadinn.com/dohtmlsprite.html. Π­Ρ‚ΠΎ Ρ‚ΠΎΠΆΠ΅ Ρ„Π°ΠΉΠ»ΠΎΠ²Ρ‹ΠΉ Π°Ρ€Ρ…ΠΈΠ², Π³Π΄Π΅ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ Π°Π²Ρ‚ΠΎΡ€Π° ΠΏΡƒΠ±Π»ΠΈΠΊΠ°Ρ†ΠΈΠΈ – Stefan Grasutu. Π©Π΅Π»Ρ‡ΠΎΠΊ ΠΏΠΎ этой ссылкС ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ Π½Π° сайт Π½Π΅ΠΊΠΎΠ΅Π³ΠΎ Alexandru Tertisco – http://www.teral-soft.com. Π‘Π»Π΅Π΄ΠΎΠ² этой ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ Π½Π° сайтС я Π½Π΅ нашСл, поэтому ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎ ΠΏΠ΅Ρ€Π²ΠΎΠΉ упомянутой ссылкС.
ΠšΡ€ΠΎΡˆΠ΅Ρ‡Π½Π°Ρ бСсплатная ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° (zip-Π°Ρ€Ρ…ΠΈΠ² 13 ΠΊΠ±) ΠΈΠΌΠ΅Π΅Ρ‚ свСрхаскСтичный интСрфСйс, Π½ΠΎ Π΄Π΅Π»ΠΎ своС Ρ‚ΡƒΠ³ΠΎ Π·Π½Π°Π΅Ρ‚. Π’Π°ΠΊ ΠΆΠ΅ Π½Π΅ Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ инсталляции.

Алгоритм Ρ€Π°Π±ΠΎΡ‚Ρ‹ Ρ‚Π°ΠΊΠΎΠ²:

  • Π£ΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ ΠΏΠ°ΠΏΠΊΡƒ с исходным Ρ„Π°ΠΉΠ»Π°ΠΌΠΈ (ΠΏΠ°ΠΏΠΊΡƒ Π½Π°Π΄ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π·Π°Ρ€Π°Π½Π΅Π΅ ΠΈ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π² Π½Π΅ΠΉ Π½ΡƒΠΆΠ½Ρ‹Π΅ Ρ„Π°ΠΉΠ»Ρ‹)
  • Π—Π°Π΄Π°Π΅ΠΌ ΠΏΠ°ΠΏΠΊΡƒ назначСния для сохранСния Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ΠΎΠ²
  • Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ спрайт

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠ΅ΠΌ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ css спрайт ΠΈΠ· Ρ‚Π΅Ρ… ΠΆΠ΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ использовались Π² ΠΎΠ±Π·ΠΎΡ€Π΅ ΠΏΠ΅Ρ€Π²ΠΎΠΉ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹: 2 Ρ„Π°ΠΉΠ»Π° gif ΠΈ ΠΏΠΎ ΠΎΠ΄Π½ΠΎΠΌΡƒ ico, bmp, jpg, png ΠΈ psd. ΠŸΠ΅Ρ€Π²Π°Ρ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΠ»Π° Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ всС Ρ„Π°ΠΉΠ»Ρ‹, ΠΊΡ€ΠΎΠΌΠ΅ psd, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΠ»Π° 6 Ρ„Π°ΠΉΠ»ΠΎΠ² ΠΈΠ· 7. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΠΌ, ΠΊΠ°ΠΊ ΠΏΠΎΠ²Π΅Π΄Ρ‘Ρ‚ сСбя DoHTMLSprite.

ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΠ»Π° 5 Ρ„Π°ΠΉΠ»ΠΎΠ² ΠΈΠ· 7 ΠΏΡ€ΠΎΡ‚ΠΈΠ² 6, ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠ΅Π½Π½Ρ‹Ρ… CssSpriter-1.2. КакиС ΠΏΠΎΠΊΠ° нСизвСстно.
Π—Π°Π΄Π°Ρ‘ΠΌ ΠΏΠ°ΠΏΠΊΡƒ Π²Ρ‹Π²ΠΎΠ΄Π° ΠΈ Π½Π°ΠΆΠΈΠΌΠ°Π΅ΠΌ ΠΊΠ½ΠΎΠΏΠΊΡƒ Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ спрайт. ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° Π±ΠΎΠ΄Ρ€ΠΎ Ρ€Π°ΠΏΠΎΡ€Ρ‚ΡƒΠ΅Ρ‚ ΠΎ создании спрайта, css-Ρ„Π°ΠΉΠ»Π° ΠΈ дСмонстрационного Ρ„Π°ΠΉΠ»Π° HTML.

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΠΌ Π½Π° содСрТимоС ΠΏΠ°ΠΏΠΊΠΈ Π²Ρ‹Π²ΠΎΠ΄Π°. Π’ самом Π΄Π΅Π»Π΅, Ρ‚Π°ΠΌ находятся всС упомянутыС Ρ„Π°ΠΉΠ»Ρ‹ с ΠΊΠ°ΠΊΠΈΠΌΠΈ-Ρ‚ΠΎ нСудобопроизносимыми ΠΈΠΌΠ΅Π½Π°ΠΌΠΈ.

Рассмотрим ΠΈΡ…, начиная со спрайта. Как Π²ΠΈΠ΄ΠΈΠΌ Ρ„Π°ΠΉΠ» спрайта создан Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ png, Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ скаТу ΠΎ Π³Π»ΡƒΠ±ΠΈΠ½Π΅ Ρ†Π²Π΅Ρ‚Π° – Ρ‚Π΅ ΠΆΠ΅ самыС 32 Π±ΠΈΡ‚, ΠΊΠ°ΠΊ ΠΈ Π² ΠΏΠ΅Ρ€Π²ΠΎΠΉ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ΅. Π—Π½Π°Ρ‡ΠΈΡ‚, всС замСчания ΠΎ прозрачности для старых Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² Ρ‚ΠΎΠΆΠ΅ Π°ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½Ρ‹.
Глядя Π½Π° Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ (Π° ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π΅Ρ‘ ΠΎΡ€ΠΈΠ΅Π½Ρ‚Π°Ρ†ΠΈΡŽ нСльзя, Ρ‡Ρ‚ΠΎ, ΠΎΠ΄Π½Π°ΠΊΠΎ, Π½Π΅ являСтся сущСствСнным нСдостатком ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹), ΠΎΡ‚ΠΌΠ΅Ρ‡Π°Π΅ΠΌ, Ρ‡Ρ‚ΠΎ эта ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ ico ΠΈ psd Π² качСствС Π²Ρ…ΠΎΠ΄Π½Ρ‹Ρ…. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΡƒΡΡ‚Π°Ρ€Π΅Π²ΡˆΠΈΡ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² Ρ‚Π°ΠΊΠΆΠ΅ увидят сСроватый Ρ„ΠΎΠ½ Π½Π° спрайтС, ΠΏΠΎΠΌΠΈΠΌΠΎ Ρ‡Ρ‘Ρ€Π½ΠΎΠ³ΠΎ Ρ„ΠΎΠ½Π° Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°Ρ…, для ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… использовались Π²Ρ…ΠΎΠ΄Π½Ρ‹Π΅ Ρ„Π°ΠΉΠ»Ρ‹ bmp ΠΈ jpg, ΠΈΠ·Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‰ΠΈΠ΅ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ. ΠŸΡ€ΠΈ Π²Π½ΠΈΠΌΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠΌ рассмотрСнии ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π² спрайтС Π΅ΡΡ‚ΡŒ ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΊΠΈ (отступы, смСщСния) ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°ΠΌΠΈ, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ основного нСдостатка ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΉ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ здСсь Π½Π΅Ρ‚. Если ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π½Π° ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ Ρ‡ΡƒΡ‚ΡŒ Π½ΠΈΠΆΠ΅ (Π² стилСвом Ρ„Π°ΠΉΠ»Π΅), ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ этот ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΎΠΊ составляСт 5px.

ПойдСм дальшС. На ниТСрасполоТСнном ΡΠΊΡ€ΠΈΠ½ΡˆΠΎΡ‚Π΅ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½ HTML-ΠΊΠΎΠ΄ Π΄Π΅ΠΌΠΎ-страницы

Как Π²ΠΈΠ΄Π½ΠΎ здСсь ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π½Π΅ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ стили, Π° созданный внСшний стилСвой Ρ„Π°ΠΉΠ», ссылка Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈ присутствуСт Π² ΠΊΠΎΠ΄Π΅.

А Π²ΠΎΡ‚ Ρ‚Π°ΠΊ выглядит Π΄Π΅ΠΌΠΎ-страница (Π΅Π΅ кусочСк) ΠΏΡ€ΠΈ просмотрС Π² соврСмСнном Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅. На этом ΡΠΊΡ€ΠΈΠ½ΡˆΠΎΡ‚Π΅ Ρ‚ΠΎΠΆΠ΅ Π²ΠΈΠ΄Π½Ρ‹ ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΊΠΈ ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°ΠΌΠΈ, Π½ΠΎ Π·Π°Π΄Π°Π½Ρ‹ ΠΎΠ½ΠΈ ΡƒΠΆΠ΅ Π² стилСвом Ρ„Π°ΠΉΠ»Π΅ (подробности Π½ΠΈΠΆΠ΅).

ПослСдний Ρ„Π°ΠΉΠ», созданный ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΎΠΉ, это внСшний стилСвой Ρ„Π°ΠΉΠ».

Π—Π΄Π΅ΡΡŒ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ всСх Π½Π°ΡˆΠΈΡ… ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ Π² спрайтС. ΠŸΡ€ΠΈ Π²Π½ΠΈΠΌΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠΌ просмотрС ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚ Π²ΠΈΠ΄Π½ΠΎ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°ΡŽΡ‚ Тёстко Π·Π°Π΄Π°Π½Π½Ρ‹Π΅ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΎΠΉ ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΊΠΈ ΠΌΠ΅ΠΆΠ΄Ρƒ изобраТСниями Π² спрайтС Π² 5px (Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ 32Ρ…32px, Π° Ρ€Π°Π·Π½ΠΈΡ†Π° ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚ 37px, 37-32=5). Для дСмонстрационной страницы Π°Π²Ρ‚ΠΎΡ€ Π·Π°Π΄Π°Π» Π² стилях внСшниС поля свСрху ΠΈ снизу Ρ‚ΠΎΠΆΠ΅ 5px (ΠΌΠΎΠ³Π»ΠΎ Π±Ρ‹Ρ‚ΡŒ Π·Π°Π΄Π°Π½ΠΎ ΠΈ Π΄Ρ€ΡƒΠ³ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅), ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ сокращённоС свойство margin. ΠŸΡ€ΠΈ сравнСнии дСмонстрационных HTML-страниц, созданных ΠΏΠ΅Ρ€Π²ΠΎΠΉ ΠΈ Π²Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΎΠΉ, Π²ΠΈΠ΄Π½ΠΎ, ΠΊΠ°ΠΊ Π²Π»ΠΈΡΡŽΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ стили Π½Π° располоТСниС ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ Π½Π° страницС. НСкоторыС ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ margin‘Ρ‹ ΠΊΠ°ΠΊ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ срСдство Π²ΠΎ ΠΈΠ·Π±Π΅ΠΆΠ°Π½ΠΈΠ΅ Π½Π΅ΠΎΠΆΠΈΠ΄Π°Π½Π½Ρ‹Ρ… Π½Π°ΠΊΠ»Π°Π΄ΠΎΠΊ ΠΏΡ€ΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ страницы ΠΏΡ€ΠΈ просмотрС. НавСрноС, это Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΌ ΠΏΡ€ΠΈ создании ΠΈ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ стилСй для спрайта, созданного ΠΏΠ΅Ρ€Π²ΠΎΠΉ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΎΠΉ, Π³Π΄Π΅ ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΊΠΎΠ² ΠΌΠ΅ΠΆΠ΄Ρƒ изобраТСниями Π² спрайтС Π²ΠΎΠΎΠ±Ρ‰Π΅ Π½Π΅ прСдусмотрСно. Боздавая ΠΈ оптимизируя стили для своих спрайтов, Π²Ρ‹ сами Ρ€Π΅ΡˆΠΈΡ‚Π΅ ΠΊΠ°ΠΊΠΈΠ΅ свойства Π½ΡƒΠΆΠ½Ρ‹ Π²Π°ΠΌ ΠΈ ΠΊΠ°ΠΊ ΠΈΡ… ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ.

Π₯очСтся ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° ΠΈΠ·Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΠ΅Ρ‚ ΠΊΠΎΠΌΠΏΠ°ΠΊΡ‚Π½Ρ‹ΠΉ однострочный ΡΡ‚ΠΈΠ»ΡŒ ΠΈ послС Π½ΡƒΠ»Π΅Π²ΠΎΠΉ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ Π½Π΅ ставит Π΅Π΄ΠΈΠ½ΠΈΡ†Ρƒ измСрСния (px), ноль ΠΎΠ½ ΠΈ АфрикС ноль, Ρ…ΠΎΡ‚ΡŒ Π² пиксСлях, Ρ…ΠΎΡ‚ΡŒ Π² ΠΊΠΈΠ»ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°Ρ…. Π’Π°ΠΊΠΎΠΉ ΠΏΡ€Π΅Π΄ΡƒΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π½Π΅Ρ‚ Ρƒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΎΠ½Π»Π°ΠΉΠ½-сСрвисов ΠΏΠΎ созданию CSS-спрайтов.

Π’Ρ‹Π²ΠΎΠ΄Ρ‹

Никаких Π²Ρ‹Π²ΠΎΠ΄ΠΎΠ² ΠΏΠΎ использованию рассмотрСнных ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚. Π’Ρ‹ сдСлаСтС ΠΈΡ… сами. Π― достаточно ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ ΠΈΠ·Π»ΠΎΠΆΠΈΠ» всС Ρ‡Π΅Ρ€Π΅Π· Ρ‡Π΅Π³ΠΎ ΠΏΡ€ΠΎΡˆΠ΅Π» сам, ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠ΅ Π·Π° Π²Π°ΠΌΠΈ. Π—Π°Π²Π΅Ρ€ΡˆΠ°Ρ этот Π·Π°Ρ‚ΡΠ½ΡƒΠ²ΡˆΠΈΠΉΡΡ ΠΎΠ±Π·ΠΎΡ€, выскаТу нСсколько Ρ…Π°ΠΎΡ‚ΠΈΡ‡Π½Ρ‹Ρ… ΠΏΠΎΠΆΠ΅Π»Π°Π½ΠΈΠΉ ΠΈ Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… совСтов ΠΏΠΎ использованию CSS-спрайтов.

  • НС ΠΏΡ‹Ρ‚Π°ΠΉΡ‚Π΅ΡΡŒ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ спрайт Π½Π° всС случаи ΠΈ Π·Π°ΠΏΠΈΡ…Π½ΡƒΡ‚ΡŒ Π² Π½Π΅Π³ΠΎ всС ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ Π½Π° Π²Π°ΡˆΠΈΡ… страницах, это Π² Π±ΡƒΠ΄ΡƒΡ‰Π΅ΠΌ услоТнит ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²ΠΊΡƒ HTML ΠΈ CSS ΠΏΡ€ΠΈ нСобходимости
  • Π‘ΠΎΠ·Π΄Π°Π²Π°ΠΉΡ‚Π΅ спрайты для часто ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡŽΡ‰ΠΈΡ…ΡΡ графичСских элСмСнтов Ρ‚ΠΈΠΏΠ° Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠΎΠ², Π·Π½Π°Ρ‡ΠΊΠΎΠ², ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… элСмСнтов Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΈ управлСния
  • Π‘Ρ‚Π°Ρ€Π°ΠΉΡ‚Π΅ΡΡŒ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ спрайты ΠΈΠ· ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° (Π»ΡƒΡ‡ΡˆΠ΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π½Π΅ ΠΎΠ΄ΠΈΠ½ спрайт ΠΈΠ· Ρ€Π°Π·Π½ΠΎΠΊΠ°Π»ΠΈΠ±Π΅Ρ€Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Π° нСсколько спрайтов, Π½ΠΎ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°), это ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ стили (ΠΎΠ΄ΠΈΠ½ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ я ΠΏΠΎΠΊΠ°ΠΆΡƒ Π½ΠΈΠΆΠ΅)
  • НС ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ для создания спрайтов ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°Ρ… ΠΈΠ·Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‰ΠΈΡ… ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ (ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Π΅Π΅ ΠΈ Π»ΡƒΡ‡ΡˆΠ΅ всСго ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π²Ρ…ΠΎΠ΄Π½Ρ‹Π΅ изобраТСния Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°Ρ… gif ΠΈ png, Π° для ΠΏΠ΅Ρ€Π²ΠΎΠΉ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ ΠΈ ΡƒΠΏΠΎΠΌΠΈΠ½Π°Π²ΡˆΠ΅Π³ΠΎΡΡ Instant Sprite ΠΌΠΎΠΆΠ½ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ico)
  • Для ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ прозрачности Π²Ρ‹Ρ…ΠΎΠ΄Π½Ρ‹Ρ… Ρ„Π°ΠΉΠ»ΠΎΠ² PNG Π² старых Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ… ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚ΠΈΡ€ΡƒΠΉΡ‚Π΅ ΠΈΡ… Π² 8-Π±ΠΈΡ‚ΠΎΠ²Ρ‹ΠΉ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ ΠΈΠ»ΠΈ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ GIF (ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ ΠΈ css-Ρ…Π°ΠΊΠΈ, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠ΅ Ρ€Π°Π·Ρ€Π΅ΡˆΠΈΡ‚ΡŒ эту ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ для png, Π½ΠΎ это Π½Π΅ Ρ‚Π΅ΠΌΠ° сСгодняшнСго ΠΎΠ±Π·ΠΎΡ€Π°)
  • ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΡƒΠΉΡ‚Π΅ стили (ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ½Π»Π°ΠΉΠ½-сСрвисы, ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ Free CSS Toolbox, TopStyle, Rapid CSS ΠΈ Ρ‚.ΠΏ. ΠΈΠ»ΠΈ ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ)
  • ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΡƒΠΉΡ‚Π΅ спрайты – ΠΎΡ‡Π΅Π½ΡŒ ΡƒΠ΄ΠΎΠ±Π½ΠΎ ΠΈ эффСктивно для этого ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹ΠΉ сСрвис TinyPNG (http://tinypng.org) ΠΈΠ»ΠΈ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ Riot, Ρ€Π°ΡΡΠΌΠΎΡ‚Ρ€Π΅Π½Π½ΡƒΡŽ Π² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΎΠ±Π·ΠΎΡ€Π΅ (ΠΎΡ‡Π΅Π½ΡŒ Π΅Ρ‘ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ)
  • Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ спрайты для простого ΠΈ элСгантного способа Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ rollover-эффСкта ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° Π²Π°ΡˆΠΈΡ… страницах Π±Π΅Π· использования скриптов
  • И Π² дальний ΠΏΡƒΡ‚ΡŒβ€¦, Ρ„Π»Π°Π³ Π²Π°ΠΌ Π² руки…, Π²ΠΏΠ΅Ρ€Ρ‘Π΄ ΠΈ с пСснСй…

P.S. Об упомянутой ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ стилСй

Π Π°ΡΡΠΌΠΎΡ‚Ρ€ΡŽ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΠΉ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΏΡ€ΠΈ использовании ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈ Ρ‚ΠΎΠ³ΠΎ ΠΆΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°. Π‘ΠΎΠ·Π΄Π°Π΄ΠΈΠΌ ΡΠΊΡΠΏΠ΅Ρ€ΠΈΠΌΠ΅Π½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ спрайт ΠΈΠ· ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ DoHTMLSprite ΠΈ посмотрим созданныС стили.

Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, ΠΌΠ½Π΅ Π½Π΅ Π½ΡƒΠΆΠ½Ρ‹ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ отступы, ΠΏΠΎΡ‚ΠΎΠΌΡƒ я ΡƒΠ±Π΅Ρ€Ρƒ ΠΈΡ… ΠΈΠ· стилСвого Ρ„Π°ΠΉΠ»Π°. Π’ΠΎ-Π²Ρ‚ΠΎΡ€Ρ‹Ρ…, всС ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Ρƒ мСня ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, поэтому Π½ΠΈΡ‡Ρ‚ΠΎ Π½Π΅ ΠΌΠ΅ΡˆΠ°Π΅Ρ‚ ΠΌΠ½Π΅ Π·Π°Ρ„ΠΈΠΊΡΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ Ρ€Π°Π· Π² стилС для самого мастСр-спрайта. Π’ΠΎΡ‚ Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΎΡΡŒ.

Π Π°Π·ΠΌΠ΅Ρ€ Ρ„Π°ΠΉΠ»Π° ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΠ»ΡΡ с 1403 Π±Π°ΠΉΡ‚ Π΄ΠΎ 749 Π±Π°ΠΉΡ‚ (ΠΏΠΎΡ‡Ρ‚ΠΈ Π² 2 Ρ€Π°Π·Π°), ΠΈ всС прСкрасно Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚. Если Π²Ρ‹ Π²Π½ΠΈΠΌΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎ посмотрСли Π½Π° эти Π΄Π²Π° ΡΠΊΡ€ΠΈΠ½ΡˆΠΎΡ‚Π°, Ρ‚ΠΎ, Π½Π°Π²Π΅Ρ€Π½ΠΎΠ΅, ΡƒΠ²ΠΈΠ΄Π΅Π»ΠΈ, Ρ‡Ρ‚ΠΎ я Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΠ±Ρ€Π°Π» лишниС ΠΏΡ€ΠΎΠ±Π΅Π»Ρ‹ ΠΈ Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Ρ‚ΠΎΡ‡ΠΊΠΈ с запятой ΠΏΠ΅Ρ€Π΅Π΄ Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ Ρ„ΠΈΠ³ΡƒΡ€Π½ΠΎΠΉ скобкой. Для Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ сравнСния я Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π» ΡΡ‚ΠΈΠ»ΡŒ для ΡƒΠΆΠ΅ рассмотрСнного ΠΏΠ΅Ρ€Π²ΠΎΠ½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ спрайта. Π’ΠΎΡ‚, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΎΡΡŒ ΠΏΡ€ΠΈ просмотрС Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅.

Если Π²Ρ‹ сравнитС ΡΠΊΡ€ΠΈΠ½ΡˆΠΎΡ‚Ρ‹, Ρ‚ΠΎ Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚Π΅ Ρ€Π°Π·Π½ΠΈΡ†Ρƒ. Π˜ΡΡ‡Π΅Π·Π»ΠΈ ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΊΠΈ ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°ΠΌΠΈ Π½Π° страницС, опрСдСляСмыС свойством {margin: 5px 0}. Π― посчитал, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ ΠΌΠ½Π΅ Π½Π΅ Π½ΡƒΠΆΠ½Ρ‹ (спрайты Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ Π² Ρ€Π°Π·Π½Ρ‹Ρ… мСстах страницы, Π° Π½Π΅ подряд, ΠΊΠ°ΠΊ Π² Π΄Π΅ΠΌΠΎ-ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅). ΠŸΡ€ΠΈ этом ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΊΠΈ Π½Π° самом спрайтС-ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ, созданныС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΎΠΉ Π½ΠΈΠΊΡƒΠ΄Π° Π½Π΅ исчСзли, ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ ΡΠ»ΡƒΠΆΠΈΡ‚ΡŒ Π½Π°ΠΌ подстраховкой ΠΏΡ€ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΠΌ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠΌ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ страницы ΠΏΡ€ΠΈ просмотрС Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅.

НаконСц, послСднСС

Π‘Ρ€Π΅Π΄ΠΈ ΡˆΠΈΡ€ΠΎΠΊΠΎ Ρ€Π°Π·Ρ€Π΅ΠΊΠ»Π°ΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… сСрвисов для создания CSS-спрайтов особСнно выдСляСтся Sprite Me. Он Π°Π²Ρ‚ΠΎΠΌΠ°Ρ‚ΠΎΠΌ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒ Π² спрайты, ΠΈ Π²Ρ‹Π΄Π°Π΅Ρ‚ Π½Π°-Π³ΠΎΡ€Π° Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΈ ΠΏΠΎ Ρ€Π΅ΠΎΡ€Π³Π°Π½ΠΈΠ·Π°Ρ†ΠΈΠΈ стилСвых Ρ„Π°ΠΉΠ»ΠΎΠ² ΠΈ HTML-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ. ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅. Когда-Ρ‚ΠΎ я Π½Π°Ρ‡ΠΈΠ½Π°Π» с Π½Π΅Π³ΠΎ, ΠΈ сСрвис ΠΏΠΎΠΌΠΎΠ³ ΠΌΠ½Π΅ Π²Π½ΠΈΠΊΠ½ΡƒΡ‚ΡŒ Π² ΡΡƒΡ‚ΡŒ примСнСния спрайтов. Но, ΠΊ соТалСнию, ΠΎΠ½ ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΠ» Π½Π° ΠΌΠΎΠΈΡ… страницах лишь 20% ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ, ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ спрайты. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ я ΠΈ ΠΏΠ΅Ρ€Π΅ΡˆΡ‘Π» ΠΊ Π½Π΅ΠΎΠ΄Π½ΠΎΠΊΡ€Π°Ρ‚Π½ΠΎ ΡƒΠΏΠΎΠΌΠΈΠ½Π°Π²ΡˆΠ΅ΠΌΡƒΡΡ Instant Sprite, Ρ‡Π΅Π³ΠΎ ΠΈ Π²Π°ΠΌ ТСлаю. Из мноТСства ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Ρ€Π°Π·ΠΌΠ΅Ρ‰Ρ‘Π½Π½Ρ‹Ρ… Π½Π° ΠΌΠΎΠΈΡ… страницах, всС Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Π΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ это спрайты. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠΈ управлСния (Ρ‚ΠΈΠΏΠ°, Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Ρ„Π°ΠΉΠ», ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΈΡ‚ΡŒ страницу Π²Π²Π΅Ρ€Ρ…, ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΡΠΊΡ€ΠΈΠ½ΡˆΠΎΡ‚ ΠΈΠ»ΠΈ Π²ΠΈΠ΄Π΅ΠΎΡ€ΠΎΠ»ΠΈΠΊ) сдСланы ΠΈΠ· спрайтов с ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ rollover-эффСкта Π½Π° CSS.
Всё!

Как-Ρ‚ΠΎ Π½Π΅ получаСтся Π·Π°ΠΊΠΎΠ½Ρ‡ΠΈΡ‚ΡŒ ΠΎΠ±Π·ΠΎΡ€. Волько ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π» Π΅Π³ΠΎ ΠΈ Ρ‡Π΅Ρ€Π΅Π· дСнь Π½Π°ΡˆΡ‘Π» Π΅Ρ‰Ρ‘ ΠΎΠ΄ΠΈΠ½ Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ css спрайтов.

Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ спрайтов SpriteGenerator 0.2.

(http://spritegenerator.codeplex.com/releases/view/52139)

Π’ΠΎΠΆΠ΅ Π½Π΅ ΠΎΠ½Π»Π°ΠΉΠ½ΠΎΠ²Ρ‹ΠΉ, Π° Win-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅. НСбольшая ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°, Π²Ρ€ΠΎΠ΄Π΅ с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ исходным ΠΊΠΎΠ΄ΠΎΠΌ, распространяСтся ΠΏΠΎ Π½Π΅ΠΊΠΎΠ΅ΠΉ Microsoft Public License. ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° ΠΈΠΌΠ΅Π΅Ρ‚ достаточно простой ΠΈ внятный интСрфСйс.

Π£ΠΊΠ°ΠΆΠ΅ΠΌ ΠΏΡƒΡ‚ΡŒ ΠΊ Ρ‚ΠΎΠΉ ΠΆΠ΅ ΠΏΠ°ΠΏΠΊΠ΅ с ΠΏΠΎΠ΄ΠΎΠΏΡ‹Ρ‚Π½Ρ‹ΠΌΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°ΠΌΠΈ, Ρ‡Ρ‚ΠΎ ΠΈ для ΡƒΠΆΠ΅ рассмотрСнных ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌ. Π—Π°Π΄Π°Π΄ΠΈΠΌ ΠΏΠ°ΠΏΠΊΡƒ для Π²Ρ‹Π²ΠΎΠ΄Π° спрайта, Π·Π°Ρ‚Π΅ΠΌ ΡƒΠΊΠ°ΠΆΠ΅ΠΌ Ρ‚Ρƒ ΠΆΠ΅ ΠΏΠ°ΠΏΠΊΡƒ для Π²Ρ‹Π²ΠΎΠ΄Π° CSS-Ρ„Π°ΠΉΠ»Π°.
ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° позволяСт Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΡƒ для Π±ΡƒΠ΄ΡƒΡ‰Π΅Π³ΠΎ спрайта: Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΡƒΡŽ, Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΡƒΡŽ, ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΡƒΡŽ ΠΈ Π½Π° усмотрСниС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ (автоматичСский Π²Ρ‹Π±ΠΎΡ€). ЗабСгая Π²ΠΏΠ΅Ρ€Π΅Π΄ скаТу, Ρ‡Ρ‚ΠΎ ΠΊΠΎΠ³Π΄Π° Π²Ρ…ΠΎΠ΄Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ достаточно ΠΌΠ½ΠΎΠ³ΠΎ, ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° сама устанавливаСт Π°Π²Ρ‚ΠΎΠΌΠ°Ρ‚ΠΈΡ‡Π΅ΡΠΊΡƒΡŽ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΡƒ – ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΏΡ†ΠΈΠΈ Π΄Π΅Π°ΠΊΡ‚ΠΈΠ²ΠΈΡ€ΡƒΡŽΡ‚ΡΡ, Π° Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚ΠΈΡ€ΡƒΡŽΡ‰ΠΈΠΉ спрайт получаСтся ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½Ρ‹ΠΌ. ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° позволяСт Π·Π°Π΄Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΎΠΊ ΠΌΠ΅ΠΆΠ΄Ρƒ изобраТСниями ΠΈ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ отступы. Π’Ρ‹Π±Π΅Ρ€Π΅ΠΌ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹, ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹Π΅ Π½Π° ΡΠΊΡ€ΠΈΠ½ΡˆΠΎΡ‚Π΅, ΠΈ Π½Π°ΠΆΠΌΠ΅ΠΌ ΠΊΠ½ΠΎΠΏΠΊΡƒ Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ. ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° ΠΊΡƒΠ΄Π°-Ρ‚ΠΎ ΡƒΠ»Π΅Ρ‚Π°Π΅Ρ‚ Π±Π΅Π· Π΄ΠΎΠΊΠ»Π°Π΄Π°. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΠΌ ΠΏΠ°ΠΏΠΊΡƒ Π²Ρ‹Π²ΠΎΠ΄Π°.

ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° создала Π΄Π²Π° Ρ„Π°ΠΉΠ»Π°: стилСвой Ρ„Π°ΠΉΠ» ΠΈ спрайт Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ PNG 32Π±ΠΈΡ‚ (ΠΈΡ… ΠΈΠΌΠ΅Π½Π° я ΡƒΠΊΠ°Π·Π°Π» ΠΏΡ€ΠΈ Π·Π°Π΄Π°Π½ΠΈΠΈ ΠΏΠ°ΠΏΠΊΠΈ Π²Ρ‹Π²ΠΎΠ΄Π°). Π”Π΅ΠΌΠΎ-страницу эта ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° Π½Π΅ создала. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΠΌ Π½Π° спрайт.

Π§Ρ‚ΠΎ сразу бросаСтся Π² Π³Π»Π°Π·Π°: ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ ΠΎΡΡ‚Π°Π»ΠΎΡΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ 4 ΠΈΠ· 7. ΠžΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ΡΡ, ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° Π½Π΅ воспринимаСт Ρ„Π°ΠΉΠ»Ρ‹ bmp, Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅ с Π²Ρ…ΠΎΠ΄Π½Ρ‹ΠΌ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠΌ jpg Ρ‚Π°ΠΊΠΆΠ΅ Π²ΠΈΠ΄Π΅Π½ кусочСк Ρ‡Ρ‘Ρ€Π½ΠΎΠ³ΠΎ Ρ„ΠΎΠ½Π°, ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ старых Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² Ρ‚Π°ΠΊΠΆΠ΅ увидят сСроватый Ρ„ΠΎΠ½ Ρƒ Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ. Π― снова Π½Π΅ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π» спрайт ΠΈ Π½Π΅ устанавливал ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ. Π’Ρ‚ΠΎΡ€ΠΎΠ΅, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ: ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΊΠΈ ΠΈΠΌΠ΅ΡŽΡ‚ΡΡ Π²ΠΎΠΊΡ€ΡƒΠ³ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ – этого ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ ΠΎΠΆΠΈΠ΄Π°Ρ‚ΡŒ, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΡƒΡŽ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΡƒ. Но ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΊΠΈ ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°ΠΌΠΈ ΠΈ внСшнСй Π³Ρ€Π°Π½ΠΈΡ†Π΅ΠΉ явно большС ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΊΠΎΠ² ΠΌΠ΅ΠΆΠ΄Ρƒ самими ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°ΠΌΠΈ. ВсС становится ясно, ΠΊΠΎΠ³Π΄Π° ΠΌΡ‹ взглянСм Π½Π° стилСвой Ρ„Π°ΠΉΠ».

ΠŸΠ΅Ρ€Π²ΠΎΠ΅, Ρ‡Ρ‚ΠΎ здСсь ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ: ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° сохранила ΠΈΠΌΠ΅Π½Π° Π²Ρ…ΠΎΠ΄Π½Ρ‹Ρ… ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ, вмСсто задания Π±Π΅Π·Π»ΠΈΠΊΠΈΡ… ΠΈΠΌΡ‘Π½ Π² Π²Ρ‹ΡˆΠ΅ рассмотрСнных ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°Ρ…. Π’Ρ‚ΠΎΡ€ΠΎΠ΅, отступов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΡ‹ Π·Π°Π΄Π°Π²Π°Π»ΠΈ, ΠΊΠ°ΠΊ я считал свойством margin, Π² стилСвом Ρ„Π°ΠΉΠ»Π΅ Π½Π΅Ρ‚. ΠžΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ΡΡ, Ρ‡Ρ‚ΠΎ ΠΎΠ±Π΅ ΠΎΠΏΡ†ΠΈΠΈ задания ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΊΠΎΠ² Π² ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ΅ связаны с самой ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΎΠΉ: ΠΎΠ΄Π½Π° (distance between images) Π·Π°Π΄Π°Ρ‘Ρ‚ ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΊΠΈ ΠΌΠ΅ΠΆΠ΄Ρƒ самими ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°ΠΌΠΈ, вторая (margin width) – ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°ΠΌΠΈ, ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… состоит спрайт ΠΈ Π΅Π³ΠΎ внСшнСй Π³Ρ€Π°Π½ΠΈΡ†Π΅ΠΉ. Если Π²Π·Π³Π»ΡΠ½ΡƒΡ‚ΡŒ Π½Π° свойства background-position Π² стилСвом Ρ„Π°ΠΉΠ»Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΎ ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Π΅Ρ‚ ΠΎΠ±Π° упомянутых Π²ΠΈΠ΄Π° ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΊΠΎΠ². Π‘ΠΎΠ·Π΄Π°Π΄ΠΈΠΌ сами Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΠΎΠ½Π½ΡƒΡŽ Π²Π΅Π±-страницу, Π²ΠΊΠ»ΡŽΡ‡ΠΈΠ² для наглядности Ρ€Π°Π·Π½Ρ‹Π΅ отступы Π² стилСвой Ρ„Π°ΠΉΠ» (Ρ€Π΅Ρ‡ΡŒ ΠΈΠ΄Π΅Ρ‚ ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΎΠ± отступах Π² стилСвом Ρ„Π°ΠΉΠ»Π΅ для наглядности позиционирования ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ Π½Π° страницС).

Π― Π½Π°ΠΌΠ΅Ρ€Π΅Π½Π½ΠΎ сдСлал ΡΠΊΡ€ΠΈΠ½ΡˆΠΎΡ‚ ΠΏΡ€ΠΈ просмотрС Π² IE6, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Π»ΠΈ Π½Π΅ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ Ρ„ΠΎΠ½ Ρƒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ. Как Π΅Π³ΠΎ ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ для старых Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ², я ΡƒΠΆΠ΅ Π³ΠΎΠ²ΠΎΡ€ΠΈΠ». Π’ соврСмСнных Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ… всС выглядит Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎ, ΠΊΡ€ΠΎΠΌΠ΅ Π²Ρ…ΠΎΠ΄Π½ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° jpg, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΠ·Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ, здСсь Ρ„ΠΎΠ½ Ρ‡Ρ‘Ρ€Π½ΠΎΠ³ΠΎ Ρ†Π²Π΅Ρ‚Π°.
ЗаинтСрСсованным ΠΏΡ€ΠΈΠ²ΠΎΠΆΡƒ ΡΠΊΡ€ΠΈΠ½ΡˆΠΎΡ‚Ρ‹ HTML- ΠΈ CSS-Ρ„Π°ΠΉΠ»ΠΎΠ² для послСднСго ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°.

Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅

Мой ΠΎΠ±Π·ΠΎΡ€ Π½Π΅ ΠΏΡ€Π΅Ρ‚Π΅Π½Π΄ΡƒΠ΅Ρ‚ Π½Π° ΠΏΠΎΠ»Π½ΠΎΡ‚Ρƒ ΠΈ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎΠ΅ освСщСниС ΠΌΠ½ΠΎΠ³ΠΈΡ… вопросов, Π½ΠΎ ΠΊΠ°ΠΊ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ использования css спрайтов Π½Π° Π²Π΅Π±-страницС ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΈΡ… создания Π² Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€Π°Ρ… спрайтов Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ.

Π ΡƒΡΠΈΡ„ΠΈΡ†ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ пСрСчислСнныС Π² ΠΎΠ±Π·ΠΎΡ€Π΅ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ я Π½Π΅ стал, ΠΎΠ½ΠΈ достаточно просты ΠΈ понятны Π±Π΅Π· ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄Π°. Π‘ΡƒΠ΄Ρƒ Ρ€Π°Π΄, Ссли этот ΠΎΠ±Π·ΠΎΡ€ ΠΊΠΎΠΌΡƒ-Ρ‚ΠΎ пригодится. (UPD – Π― всС Ρ‚Π°ΠΊΠΈ ΠΏΠ΅Ρ€Π΅Π²Ρ‘Π» ΠΏΠΎΠΏΠΎΠ·ΠΆΠ΅ ΡΠ°ΠΌΡƒΡŽ ΠΌΠ°Π»Π΅Π½ΡŒΠΊΡƒΡŽ ΠΈ ΠΏΡ€ΠΎΡΡ‚ΡƒΡŽ, Π½ΠΎ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΡƒΡŽ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ – DoHTMLSprite. Анонс Π΅Ρ‘ русификатора ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ Π½Π° страницС новостСй.)

ПослС опубликования этого ΠΎΠ±Π·ΠΎΡ€Π° я нашСл Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅ Π΅Ρ‰Ρ‘ нСсколько ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌ (Π½Π΅ сСрвисов) для создания css спрайтов. Но всС эти ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ ΡƒΡΡ‚ΡƒΠΏΠ°ΡŽΡ‚ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°ΠΌ, описанным здСсь. Π›ΠΈΠ±ΠΎ ΠΏΠΎ Ρ„ΡƒΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ, Π»ΠΈΠ±ΠΎ ΠΏΠΎ ΡΡ‚Π°Π±ΠΈΠ»ΡŒΠ½ΠΎΡΡ‚ΠΈ Ρ€Π°Π±ΠΎΡ‚Ρ‹ ΠΈΠ»ΠΈ ΠΏΠΎ Π΄Ρ€ΡƒΠ³ΠΈΠΌ свойствам. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ Π΄ΠΎΠΏΠΎΠ»Π½ΡΡ‚ΡŒ этот ΠΎΠ±Π·ΠΎΡ€ я Π½Π΅ Π±ΡƒΠ΄Ρƒ. РассмотрСнныС Π² ΠΎΠ±Π·ΠΎΡ€Π΅ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ прСкрасно ΡΠΏΡ€Π°Π²Π»ΡΡŽΡ‚ΡΡ со своими обязанностями. МоТно Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Ρ‚ΡŒ Π»ΡŽΠ±ΡƒΡŽ ΠΈΠ· Π½ΠΈΡ… для создания css-спрайтов.

БСйчас, Π½Π°Π²Π΅Ρ€Π½ΠΎΠ΅, всё!

Бпасибо Π·Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ это всё ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Π»ΠΈ.

Если ΠΏΠΎΠ½Ρ€Π°Π²ΠΈΠ»ΠΎΡΡŒ, ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚Π΅ΡΡŒ с Π΄Ρ€ΡƒΠ·ΡŒΡΠΌΠΈ.

*) Π Π°Π½Π΅Π΅ я нСсколько скСптичСски относился ΠΊ созданию CSS-спрайтов ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ графичСских Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ΠΎΠ². Но связка бСсплатного Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π° Gimp с ΠΏΠ»Π°Π³ΠΈΠ½Π°ΠΌΠΈ CSS WebSprites ΠΈ Save for Web заставила ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΌΠΎΠ΅ ΠΌΠ½Π΅Π½ΠΈΠ΅. ΠŸΡ€ΠΎΡΡ‚ΠΎΡ‚Π°, интуитивная ΠΏΠΎΠ½ΡΡ‚Π½ΠΎΡΡ‚ΡŒ ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ возмоТности ΠΏΠΎ созданию CSS спрайтов ΠΈ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΊΠ°ΠΊ стилСй, Ρ‚Π°ΠΊ ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΏΠΎΠ΄Π²ΠΈΠ³Π»ΠΈ мСня Π½Π° написаниС Π΅Ρ‰Ρ‘ ΠΎΠ΄Π½ΠΎΠΉ ΡΡ‚Π°Ρ‚ΡŒΠΈ ΠΏΠΎ этой Ρ‚Π΅ΠΌΠ°Ρ‚ΠΈΠΊΠ΅. Если Π΅ΡΡ‚ΡŒ ΠΆΠ΅Π»Π°Π½ΠΈΠ΅, ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ΡŒΡΡ с Π½Π΅ΠΉ Π½Π° страницС CSS спрайты Π² Gimp.
Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ΡŒΡΡ с нСсколько Π΄Ρ€ΡƒΠ³ΠΈΠΌ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΎΠΌ ΠΊ css спрайтам ΠΈ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΡŽ ΠΈΡ… ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚ ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² Π² ΡΡ‚Π°Ρ‚ΡŒΠ΅ Β«ΠšΠ°Π»ΡŒΠΊΡƒΠ»ΡΡ‚ΠΎΡ€ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚ css спрайтов Sprite CowΒ».

a-v-i.ru

Comments