Π‘ΠΏΡΠ°ΠΉΡ ΠΎΠ½Π»Π°ΠΉΠ½ β CSS Sprite Generator, Editor, and Code
15.03.2020
Π‘ΠΎΠ²Π΅ΡΡ Ρ
ΡΠ΄ΠΎΠΆΠ½ΠΈΠΊΠ°
ΠΠ½Π»Π°ΠΉΠ½ ΡΠ΅ΡΠ²ΠΈΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ 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
Π Π½ΠΈΡ ΠΏΡΠΎΡΠ΅ΡΡ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
- Π·Π°Π³ΡΡΠ·ΠΊΠ° ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ,
- Π½Π°ΡΡΡΠΎΠΉΠΊΠ° ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠ²,
- Π³Π΅Π½Π΅ΡΠ°ΡΠΈΡ
ΠΠΎ Π²ΡΠ΅ ΡΠ°Π²Π½ΠΎ, ΠΌΠ½Π΅ ΠΎΠ½ΠΈ ΠΏΠΎΠΊΠ°Π·Π°Π»ΠΈΡΡ Π½Π΅ ΡΠ΄ΠΎΠ±Π½ΡΠΌΠΈ ΠΈ Π½Π΅ ΠΏΡΠ°ΠΊΡΠΈΡΠ½ΡΠΌΠΈ. ΠΠΎΠΎΠ±ΡΠ΅, ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΠΈΠ· ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½Π½ΡΡ Π²ΡΡΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Π²ΡΠ·ΡΠ²Π°Π»ΠΎ Ρ ΠΌΠ΅Π½Ρ ΡΡΠ²ΡΡΠ²ΠΎ Π΄ΠΈΡΠΊΠΎΠΌΡΠΎΡΡΠ° ΠΈΠ·-Π·Π° ΡΠΎΠ³ΠΎ, ΡΡΠΎ Π½Π΅ ΠΎΠΊΠ°Π·ΡΠ²Π°Π»ΠΎΡΡ Π½ΡΠΆΠ½ΠΎΠΉ ΠΎΠΏΡΠΈΠΈ ΠΈΠ»ΠΈ Π±ΡΠ» Π½Π΅ΡΠ΄ΠΎΠ±Π½ΡΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ.
ΠΠ΅ Π·Π°Ρ ΠΎΡΠ΅Π» Ρ ΠΌΠΈΡΠΈΡΡΡΡ Ρ ΡΠ°ΠΊΠΈΠΌ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π²Π΅ΡΠ΅ΠΉ ΠΈ ΡΠ²Π°ΡΠ» ΡΠ²ΠΎΠΉ Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡ.
Π Π°Π΄ ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΠΈΡΡ
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 ΡΡΡΠ°Π½ΠΈΡΡ Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ Π² ΠΎΠ΄Π½ΠΎΠΌ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΌ ΡΠ°ΠΉΠ»Π΅. Π’Π°ΠΊ ΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΏΡΠ°ΠΉΡΠΎΠ² ΠΏΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ Π²Π΅Π± ΡΠ°ΠΉΡΠΎΠ² ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ½ΠΈΠ·ΠΈΡΡ Π½Π°Π³ΡΡΠ·ΠΊΡ Π½Π° ΡΠ΅ΡΠ²Π΅Ρ, Π³Π΄Π΅ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ ΡΠ°ΠΉΡ. ο»Ώ
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
Leave a Comment