CSS ΡΠΏΡΠ°ΠΉΡΡ (sprites) — ΡΡΠΎ ΡΡΠΎ ΠΈ ΠΊΠ°ΠΊ ΠΈΡ ΡΠ΄Π΅Π»Π°ΡΡ?
CSS ΡΠΏΡΠ°ΠΉΡΡ β ΡΡΠΎ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π° ΠΌΠ΅Π»ΠΊΠΈΡ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ, ΠΏΡΡΠ΅ΠΌ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΎΠ΄Π½ΠΎΠΉ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ. Π’ΠΎ Π΅ΡΡΡ Π²ΠΌΠ΅ΡΡΠΎ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ± ΡΠ°ΠΉΡ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΌΠ΅Π»ΠΊΠΎΠΉ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π·Π°ΠΏΡΠ°ΡΠΈΠ²Π°Π» Ρ ΡΠ΅ΡΠ²Π΅ΡΠ° ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΉ ΡΠ°ΠΉΠ», ΠΎΠ½ Π·Π°ΠΏΡΠ°ΡΠΈΠ²Π°Π΅Ρ ΠΎΠ΄ΠΈΠ½ ΡΠ°ΠΉΠ», Π° Π² ΡΠ°ΠΌΡΡ ΡΡΠΈΠ»ΡΡ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ ΡΡΠΎ ΡΠ°ΠΊ ΠΈΠ»ΠΈ ΠΈΠ½Π°Ρ ΠΈΠΊΠΎΠ½Π° Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² ΡΠΎΠΉ ΠΈΠ»ΠΈ ΠΈΠ½ΠΎΠΉ ΡΠ°ΡΡΠΈ ΡΡΠΎΠ³ΠΎ ΡΠ°ΠΉΠ»Π°. ΠΡΠΎ ΡΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎ ΡΠΊΠΎΠ½ΠΎΠΌΠΈΡ Π²ΡΠ΅ΠΌΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈ ΡΠ΅ΡΡΡΡΡ Ρ ΠΎΡΡΠΈΠ½Π³Π° (Π·Π°ΠΏΡΠΎΡ ΠΈΠ΄Π΅Ρ Π²ΡΠ΅Π³ΠΎ-Π»ΠΈΡΡ Π½Π° ΠΎΠ΄Π½Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ, Π²ΠΌΠ΅ΡΡΠΎ Π²ΡΠ΅Ρ ).
ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ CSS ΡΠΏΡΠ°ΠΉΡΡ
ΠΡΡΡΠ½ΡΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ CSS ΡΠΏΡΠ°ΠΉΡΡ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΡΡΠ΄ΠΎΠ΅ΠΌΠΊΠΎ. ΠΠΎ Π΅ΡΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠ΅ΡΠ²ΠΈΡΡ, Π°Π²ΡΠΎΠΌΠ°ΡΠΈΠ·ΠΈΡΡΡΡ ΡΡΡ ΡΠ°Π±ΠΎΡΡ. ΠΠΈΠΆΠ΅ ΠΎΠΏΠΈΡΡΠ²Π°Π΅ΡΡΡ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΡΠ°ΠΊΠΈΡ ΡΠ΅ΡΠ²ΠΈΡΠΎΠ² —Β www.spriteme.org.
ΠΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ Π½Π° ΡΠ°ΠΉΡ ΠΈΒ ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΈΡΠ΅ Ρ Π΅Π³ΠΎ ΡΡΡΠ°Π½ΠΈΡΡ ΡΡΡΠ»ΠΊΡ Ρ Π½Π°Π΄ΠΏΠΈΡΡΡΒ Β«Sprites meΒ» Π² Π·Π°ΠΊΠ»Π°Π΄ΠΊΠΈ ΡΠ²ΠΎΠ΅Π³ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ° — ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ ΡΠΎΡ ΡΠ°Π½ΡΠ΅ΡΡΡ javascript ΠΊΠΎΠ΄, ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ΄Π΅Ρ Π°Π½Π°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ Π²Π°Ρ ΡΠ°ΠΉΡ. ΠΡΠΎΡΡΠΎ Ρ Π²Π°ΡΠ°Π΅ΡΠ΅ Π»Π΅Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡΡΠΈ Π½Π°Π΄ΠΏΠΈΡΡ Β«Sprites meΒ» ΠΈ ΡΠ°ΡΠΈΡΠ΅ Π΅Π΅ Π² ΠΏΠ°Π½Π΅Π»Ρ Π·Π°ΠΊΠ»Π°Π΄ΠΎΠΊ Π±ΡΠ°ΡΠ·Π΅ΡΠ°:
ΠΠ°Π»Π΅Π΅ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄ΠΈΠΌΒ Π½Π° ΡΠ°ΠΉΡ, Π΄Π»Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π½ΡΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ CSS ΡΠΏΡΠ°ΠΉΡΒ ΠΈ ΠΊΠ»ΠΈΠΊΠ°Π΅ΠΌΒ Π² ΠΏΠ°Π½Π΅Π»ΠΈ Π·Π°ΠΊΠ»Π°Π΄ΠΎΠΊ ΠΏΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΠΎ ΡΠΎΠ·Π΄Π°Π½Π½ΠΎΠΉ Π·Π°ΠΊΠ»Π°Π΄ΠΊΠ΅ ΡΠ΅ΡΠ²ΠΈΡΠ° Β«Sprites meΒ». Π ΠΏΡΠ°Π²ΠΎΠΌ Π²Π΅ΡΡ
Π½Π΅ΠΌ ΡΠ³Π»Ρ ΠΎΡΠΊΡΠΎΠ΅ΡΡΡ ΠΎΠΊΠ½ΠΎ Β«Sprites meΒ», Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎΒ ΡΠΎΠ·Π΄Π°ΡΡ CSS ΡΠΏΡΠ°ΠΉΡΒ Π΄Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°, Π° Π·Π°ΡΠ΅ΠΌ ΡΠΊΠ°ΡΠ°ΡΡ .
ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°ΡΠ΅Π»ΡΠ½ΠΎ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²ΡΡΠ΅: Π² ΠΎΠ±Π»Π°ΡΡΠΈ Β«Suggested SpritesΒ» (ΠΡΠ΅Π΄Π»Π°Π³Π°Π΅ΠΌΡΠ΅ ΡΠΏΡΠ°ΠΉΡΡ) ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅ΡΡΡ ΡΠΎΠ·Π΄Π°ΡΡ ΡΡΠΈ ΡΠΏΡΠ°ΠΉΡΠ° ΠΈΠ· ΡΠΎΠ½ΠΎΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΡΠ΅ΠΌΡ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ WordPress. Π ΠΏΠ΅ΡΠ²ΡΠΉ ΡΠΏΡΠ°ΠΉΡ Π±ΡΠ΄Π΅Ρ Π²ΠΊΠ»ΡΡΠ΅Π½ΠΎ Π΄Π΅Π²ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, Π° Π² ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ ΠΏΠΎ Π΄Π²Π°. Π ΡΠ°ΠΌΠΎΠΌ Π½ΠΈΠ·Ρ ΠΎΠΊΠ½Π° Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡΠ° css ΡΠΏΡΠ°ΠΉΡΠ°Β Π² ΠΎΠ±Π»Π°ΡΡΠΈ Β«Non-Sprited ImagesΒ» ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Ρ ΡΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΠΈΡΡ Π² ΡΠΏΡΠ°ΠΉΡΡ.
ΠΡΠ»ΠΈ Π²Ρ Π½Π΅ ΡΠΎΠ³Π»Π°ΡΠ½Ρ Ρ Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡΠΎΠΌ CSS ΡΠΏΡΠ°ΠΉΡΠΎΠ², ΡΠΎ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡΡΠΈ ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΊΠΈΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΠΈΠΌΠΈ ΠΎΠ±Π»Π°ΡΡΡΠΌΠΈ. ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡΡ Π΅ΡΠ»ΠΈ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°Π² ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅ΠΌΡΠ΅ Β«Sprites meΒ» ΡΠΏΡΠ°ΠΉΡΡ ΠΊ ΡΠ²ΠΎΠ΅ΠΌΡ Π±Π»ΠΎΠ³Ρ, ΡΡΠΎΠ»ΠΊΠ½ΡΠ»ΠΈΡΡ Ρ Π½Π΅ΡΠ°Π±ΠΎΡΠΎΡΠΏΠΎΡΠΎΠ±Π½ΠΎΡΡΡΡ ΠΊΠ°ΠΊΠΈΡ -Π»ΠΈΠ±ΠΎ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½Π΅Π½Π½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.
ΠΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ css ΡΠΏΡΠ°ΠΉΡ ΠΊΠ»ΠΈΠΊΠ½ΠΈΡΠ΅ ΠΏΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ΅ «make sprite», ΠΊΠΎΡΠΎΡΠ°Ρ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π² ΠΏΡΠ°Π²ΠΎΠΌ Π²Π΅ΡΡ
Π½Π΅ΠΌ ΡΠ³Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅ΠΌΡΡ
CSS ΡΠΏΡΠ°ΠΉΡΠΎΠ².
ΠΠΎΡΠ»Π΅ ΡΡΠΎΠ³ΠΎ Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡ ΡΠΏΡΠ°ΠΉΡΠΎΠ² Π½Π° Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²ΡΠ΅ΠΌΡ Π·Π°Π΄ΡΠΌΠ°Π΅ΡΡΡ, Π° Π·Π°ΡΠ΅ΠΌ Π²ΠΌΠ΅ΡΡΠΎ ΡΡΡΠ»ΠΎΠΊ Π½Π° ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΠΎΠΊΠ°ΠΆΠ΅Ρ ΡΡΡΠ»ΠΊΡ, ΠΏΠΎ ΠΊΠΎΡΠΎΡΠΎΠΉ Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΠ°ΡΠ°ΡΡ ΡΠΆΠ΅ Π³ΠΎΡΠΎΠ²ΡΠΉ CSS ΡΠΏΡΠ°ΠΉΡ (Π²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π±ΡΠ΄ΡΡ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½Π΅Π½Ρ Π² ΠΎΠ΄Π½ΠΎ). ΠΠΎΠ΄Π²Π΅Π΄Ρ ΠΊΡΡΡΠΎΡ ΠΌΡΡΠΈ ΠΊ ΡΡΠΎΠΉ ΡΡΡΠ»ΠΊΠ΅ Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅, ΠΊΠ°ΠΊ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²Π°ΡΠ΅Π³ΠΎ Π½ΠΎΠ²ΠΎΠ³ΠΎ ΡΠΏΡΠ°ΠΉΡΠ°:
ΠΠ»Ρ ΡΠΊΠ°ΡΠΈΠ²Π°Π½ΠΈΡ ΡΠΎΠ·Π΄Π°Π½Π½ΠΎΠ³ΠΎ CSS ΡΠΏΡΠ°ΠΉΡΠ° ΠΏΡΠΎΡΡΠΎ ΡΠ΅Π»ΠΊΠ½ΠΈΡΠ΅ ΠΏΠΎ ΡΡΡΠ»ΠΊΠ΅ ΠΏΡΠ°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡΡΠΈ ΠΈ Π²ΡΠ±Π΅ΡΠΈΡΠ΅ ΠΈΠ· ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ ΠΏΡΠ½ΠΊΡ ΡΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΡ ΠΎΠ±ΡΠ΅ΠΊΡΠ° ΠΏΠΎ ΡΡΡΠ»ΠΊΠ΅. ΠΠ°ΡΠ΅ΠΌ ΡΠΊΠΎΠΏΠΈΡΡΠ΅ΡΠ΅ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΡΠ°ΠΉΠ» ΡΠΎ ΡΠΏΡΠ°ΠΉΡΠΎΠΌ Π² ΠΏΠ°ΠΏΠΊΡ Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°Π±Π»ΠΎΠ½Π°.Β Π’Π°ΠΊΠΈΠΌ ΠΆΠ΅ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΡΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΠΈ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ ΡΠΏΡΠ°ΠΉΡΡ.
ΠΠΎ Π½Π° ΡΡΠΎΠΌΒ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΠΏΡΠ°ΠΉΡΠΎΠ² Π΅ΡΠ΅ Π½Π΅ Π·Π°ΠΊΠΎΠ½ΡΠ΅Π½ΠΎ. ΠΠ΅Π΄Ρ Π½ΡΠΆΠ½ΠΎ Π΅ΡΠ΅ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ΄ΡΠΊΠ°Π·Π°ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ, ΠΊΠ°ΠΊ ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΈΠ·Π²Π»Π΅ΠΊΠ°ΡΡ Π½ΡΠΆΠ½ΡΠ΅ ΡΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ° ΠΈΠ· ΡΠΎΠ·Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΡΠΏΡΠ°ΠΉΡΠ°. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΠΏΡΠ°Π²ΠΈΡΡ css-ΡΠ°ΠΉΠ», Π² Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ ΡΠ»ΡΡΠ°Π΅Π² ΠΎΠ½Π° Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ style.css.
Π‘ ΡΡΠΈΠΌΒ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌ:Β Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡ ΡΠΏΡΠ°ΠΉΡΠΎΠ² ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅ΡΒ ΠΈΠ½ΡΡΡΡΠΊΡΠΈΡ, Π² ΠΊΠΎΡΠΎΡΠΎΠΉ Π½Π°ΠΏΠΈΡΠ°Π½ΠΎ ΡΡΠΎ Π² Π²Π°ΡΠ΅ΠΌ ΡΠ°ΠΉΠ»Π΅ CSS Π½ΡΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ. ΠΠ»Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ ΡΡΠΎΠΉ ΠΈΠ½ΡΡΡΡΠΊΡΠΈΠΈ ΠΊΠ»ΠΈΠΊΠ½ΠΈΡΠ΅ ΠΏΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ΅ Β«export CSSΒ» Π² ΠΏΡΠ°Π²ΠΎΠΌ Π²Π΅ΡΡ
Π½Π΅ΠΌ ΡΠ³Π»Ρ ΠΎΠΊΠ½Π° Β«Sprites meΒ».
ΠΡΠΊΡΠΎΠ΅ΡΡΡ ΡΡΡΠ°Π½ΠΈΡΠ° Ρ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΡΠΌΠΈ ΠΏΠΎ Π²Π½Π΅ΡΠ΅Π½ΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ ΠΈΠΌΠ΅Π½Π½ΠΎ Π² Π²Π°Ρ ΡΠ°ΠΉΠ» CSS Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±ΡΒ Π·Π°ΡΠ°Π±ΠΎΡΠ°Π»ΠΈ ΡΠΎΠ·Π΄Π°Π½Π½ΡΠ΅ CSS ΡΠΏΡΠ°ΠΉΡΡ. Π ΠΈΠ½ΡΡΡΡΠΊΡΠΈΠΈ ΡΠΊΠ°Π·Π°Π½ΡΒ ΠΏΡΠ°Π²ΠΈΠ»Π°, Π² ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π²Π½Π΅ΡΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ, Π±ΡΠ΄ΡΡ Π·Π°ΡΠ΅ΡΠΊΠ½ΡΡΡ ΡΠ΅ CSS ΡΠ²ΠΎΠΉΡΡΠ²Π°, ΠΊΠΎΡΠΎΡΡΠ΅ Π½ΡΠΆΠ½ΠΎΒ ΡΠ΄Π°Π»ΠΈΡΡ ΠΈ ΡΠ΅ CSS ΡΠ²ΠΎΠΉΡΡΠ²Π°, ΠΊΠΎΡΠΎΡΡΠ΅ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΠΏΠΈΡΠ°ΡΡ Π²ΠΌΠ΅ΡΡΠΎ ΡΠ΄Π°Π»Π΅Π½Π½ΡΡ .
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ Π² ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΉ ΠΈΠ½ΡΡΡΡΠΊΡΠΈΠΈ ΠΏΡΡΡ (URL) Π΄ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ CSS ΡΠΏΡΠ°ΠΉΡΠΎΠ² Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ΅Π½ΡΡΡ Π½Π° ΡΠ²ΠΎΠΉ.
ΠΡΠ»ΠΈ Π² CSS ΠΏΡΠ°Π²ΠΈΠ»Π΅ ΡΠΆΠ΅ ΠΎΠΊΠ°ΠΆΠ΅ΡΡΡ ΠΏΡΠΎΠΏΠΈΡΠ°Π½Π½ΡΠΌ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Β«background-positionΒ», ΡΠΎ Π·Π°ΠΌΠ΅Π½ΠΈΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π² ΡΡΠΎΠΌ ΡΠ²ΠΎΠΉΡΡΠ²Π΅ Π½Π° ΡΠ΅, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ ΡΠ΅ΡΠ²ΠΈΡ ΠΏΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠΏΡΠ°ΠΉΡΠΎΠ². ΠΠΎΡΠ»Π΅ Π²Π½Π΅ΡΠ΅Π½ΠΈΡ Π²ΡΠ΅Ρ
ΠΏΡΠ΅Π΄ΠΏΠΈΡΠ°Π½Π½ΡΡ
ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π² ΡΠ°ΠΉΠ» CSS ΡΡΠΈΠ»Π΅ΠΉ ΠΎΠ±Π½ΠΎΠ²ΠΈΡΠ΅ ΠΎΡΠΊΡΡΡΡΡ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ΅ΡΡΡΡΠ°, ΡΠ΄Π΅ΡΠΆΠΈΠ²Π°Ρ ΠΏΡΠΈ ΡΡΠΎ Π½Π°ΠΆΠ°ΡΠΎΠΉ ΠΊΠ»Π°Π²ΠΈΡΡ Shift Π½Π° ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΠ΅ (Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΎΠ±ΡΠ΅ΠΊΡΡ Π½Π° Π²Π΅Π±ΡΡΡΠ°Π½ΠΈΡΠ΅ Π±ΡΠ΄ΡΡ Π·Π°Π½ΠΎΠ²ΠΎ Π·Π°ΠΏΡΠΎΡΠ΅Π½Ρ Ρ web ΡΠ΅ΡΠ²Π΅ΡΠ° Π²Π°ΡΠ΅Π³ΠΎ ΡΠ΅ΡΡΡΡΠ°).
ΠΡΠ»ΠΈ Π½ΠΈΠΊΠ°ΠΊΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ ΠΈ ΠΏΠ΅ΡΠ΅ΠΊΠΎΡΠΎΠ² Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ° ΠΏΠΎΡΠ»Π΅ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ CSS ΡΠΏΡΠ°ΠΉΡΠΎΠ² (sprites) Π²Ρ Π½Π΅ Π·Π°ΠΌΠ΅ΡΠΈΡΠ΅, ΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π²Π°Ρ ΠΏΠΎΠ·Π΄ΡΠ°Π²ΠΈΡΡ Ρ ΡΠ΄Π°ΡΠ½ΡΠΌΒ ΠΏΠΎΠ²ΡΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠΊΠΎΡΠΎΡΡΠΈ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΠ΅ΡΠ΅Π· CSS ΡΠΏΡΠ°ΠΉΡΡ (sprites). ΠΡΠ»ΠΈ ΠΏΠ΅ΡΠ΅ΠΊΠΎΡΡ ΠΏΠΎΡΠ»Π΅ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ CSS ΡΠΏΡΠ°ΠΉΡΠ° Π²ΡΠ΅ ΠΆΠ΅ ΠΏΠΎΡΠ²ΠΈΠ»ΠΈΡΡ, ΡΠΎ ΠΏΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΠΈΡ ΠΏΡΠΈΡΠΈΠ½Ρ, ΠΈ ΠΏΡΠΈ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΡΡΡΡΠ°Π½Π΅Π½ΠΈΡ Π²ΠΎΠ·Π½ΠΈΠΊΡΠ΅ΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ ΠΏΡΠΎΡΡΠΎ ΡΠΎΠ·Π΄Π°ΠΉΡΠ΅ Π΄Π°Π½Π½ΡΠΉ ΡΠΏΡΠ°ΠΉΡ Π·Π°Π½ΠΎΠ²ΠΎ, Π½ΠΎ ΡΠΆΠ΅ ΠΈΡΠΊΠ»ΡΡΠΈΠ² ΠΈΠ· Π½Π΅Π³ΠΎ ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π»ΠΈΡΡ (ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΈΡΠ΅ ΠΈΡ ΠΌΡΡΡΡ Π² ΠΎΠ±Π»Π°ΡΡΡ Β«Non-Sprited ImagesΒ»).
ΠΠΎΠ»Π΅Π·Π½ΡΠ΅ ΡΡΡΠ»ΠΊΠΈ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ CSS ΡΠΏΡΠ°ΠΉΡΠΎΠ²:
- Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ CSS ΡΠΏΡΠ°ΠΉΡΠΎΠ² Π² ΠΎΠ½Π»Π°ΠΉΠ½ Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡΠ΅ Sprites MeΒ — ΠΎΡΠΈΠ³ΠΈΠ½Π°Π» ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠΈ
- www.spriteme.orgΒ — ΠΎΠ½Π»Π°ΠΉΠ½ ΡΠ΅ΡΠ²ΠΈΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ css ΡΠΏΡΠ°ΠΉΡΠ°
- wearekiss.com/spritepadΒ β Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ drag-and-drop ΡΠ΅ΡΠ²ΠΈΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠΏΡΠ°ΠΉΡΠΎΠ²
ΠΠΎΠ½ΡΠ°Π²ΠΈΠ»ΠΎΡΡ? =) ΠΠΎΠ΄Π΅Π»ΠΈΡΡ Ρ Π΄ΡΡΠ·ΡΡΠΌΠΈ:
ΠΠΏΡΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½ΠΎ Π² ΡΡΠ±ΡΠΈΠΊΠ΅ SEO
Β« Joomla: ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΡ Π±ΡΡΡΡΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ
Exchange 2003: SMTP: Non-Delivered Report (NDR) Generated Β»
CSS ΡΠΏΡΠ°ΠΉΡΡ Π΄Π»Ρ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΡ ΡΠΊΠΎΡΠΎΡΡΠΈ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΠ°ΠΉΡΠ°
ΠΡΠ΅ΠΌ ΠΏΡΠΈΠ²Π΅Ρ! ΠΠ°ΡΠ½Ρ Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎ CSS ΡΠΏΡΠ°ΠΉΡΠ°ΠΌΠΈ Ρ Π²ΠΏΠ΅ΡΠ²ΡΠ΅ Π·Π°ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠΎΠ²Π°Π»ΡΡ Π΅ΡΡ Π³ΠΎΠ΄ Π½Π°Π·Π°Π΄, ΠΎΠ΄Π½Π°ΠΊΠΎ Π½Π° ΡΠΎΡ ΠΌΠΎΠΌΠ΅Π½Ρ Ρ ΡΠ°ΠΊ ΠΈ Π½Π΅ ΡΠΌΠΎΠ³ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ Ρ ΡΡΠΎΠΉ ΡΠ΅Ρ
Π½ΠΎΠ»ΠΎΠ³ΠΈΠ΅ΠΉ ΠΈ Π½Π°ΠΉΡΠΈ Π΅ΠΉ Π΄ΠΎΡΡΠΎΠΉΠ½ΠΎΠ΅ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π½Π° ΡΠ²ΠΎΡΠΌ Π±Π»ΠΎΠ³Π΅.
ΠΡΠΊΠ²Π°Π»ΡΠ½ΠΎ Π½Π° Π΄Π½ΡΡ Ρ Π²Π½ΠΎΠ²Ρ Π²Π΅ΡΠ½ΡΠ»ΡΡ ΠΊ ΡΡΠΎΠΉ ΡΠ΅ΠΌΠ΅ ΠΈ, Π½Π°ΠΊΠΎΠ½Π΅Ρ-ΡΠΎ, Π΄ΠΎΠ±ΠΈΠ»ΡΡ ΠΆΠ΅Π»Π°Π΅ΠΌΠΎΠ³ΠΎ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ°. ΠΠ°ΡΠ½Ρ Ρ ΡΠ°ΡΡΠΊΠ°Π·Π° ΠΎ ΡΠΎΠΌ, ΡΡΠΎ ΡΠ°ΠΊΠΎΠ΅ CSS ΡΠΏΡΠ°ΠΉΡΡ, ΠΊΠ°ΠΊΠΎΠ²ΠΎ ΠΈΡ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΈ ΡΠ°ΠΌΠΎΠ΅ Π³Π»Π°Π²Π½ΠΎΠ΅ β ΠΊΠ°ΠΊ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠΏΡΠ°ΠΉΡ.
ΠΠ»Ρ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΠ³ΠΎ ΠΎΠΏΠΈΡΠ°Π½ΠΈΡ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠΏΡΠ°ΠΉΡΠ° Ρ ΠΏΡΠΈΠ²Π΅Π΄Ρ Π½Π°Π³Π»ΡΠ΄Π½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΠΌΠ½Π΅ ΡΠ΄Π°ΡΡΡΡ ΡΠ°Π·Π»ΠΎΠΆΠΈΡΡ ΠΏΠΎ ΠΏΠΎΠ»ΠΎΡΠΊΠ°ΠΌ Π²ΡΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ, ΡΡΠΎΠ±Ρ Π²ΠΎΠΎΡΠΈΡ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π½Π° ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ. Π ΡΠ»ΡΡΠ°Π΅ ΡΠ΅Π³ΠΎ β ΡΠΏΡΠ°ΡΠΈΠ²Π°ΠΉΡΠ΅, Ρ ΡΠ΄ΠΎΠ²ΠΎΠ»ΡΡΡΠ²ΠΈΠ΅ΠΌ ΠΎΡΠ²Π΅ΡΡ. ΠΡΠ°ΠΊ, ΠΏΠΎΠ΅Ρ Π°Π»ΠΈ!
Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ CSS ΡΠΏΡΠ°ΠΉΡΡ, ΠΈΡ ΠΏΠΎΠ»ΡΠ·Π° ΠΈ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π½Π° ΡΠ°ΠΉΡΠ΅
ΠΠ°ΡΡ ΡΠ»ΠΎΠ² ΠΎ ΠΏΠΎΠ»ΡΠ·Π΅ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠΏΡΠ°ΠΉΡΠΎΠ². Π‘Π°ΠΌΠΎΠ΅ Π³Π»Π°Π²Π½ΠΎΠ΅ Π΄ΠΎΡΡΠΎΠΈΠ½ΡΡΠ²ΠΎ ΡΡΠΎΠΉ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ β ΡΠΎΠΊΡΠ°ΡΠ΅Π½ΠΈΠ΅ ΡΠΈΡΠ»Π° HTTP-Π·Π°ΠΏΡΠΎΡΠΎΠ² ΠΊ ΡΠ΅ΡΠ²Π΅ΡΡ. ΠΠ°ΠΆΠ΄ΡΠΉ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅, Π±ΡΠ΄Ρ ΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΡΠΊΡΠΈΠΏΡ ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΎΠΉ ΡΠ°ΠΉΠ» ΡΠΎΠ·Π΄Π°Π΅Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ Π·Π°ΠΏΡΠΎΡ Π½Π° ΡΠ΅ΡΠ²Π΅Ρ.
Π§Π΅ΠΌ Π½ΠΈΠΆΠ΅ ΠΏΡΠΎΠΏΡΡΠΊΠ½Π°Ρ ΡΠΏΠΎΡΠΎΠ±Π½ΠΎΡΡΡ ΡΠ΅ΡΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ, ΡΠ΅ΠΌ ΠΌΠ΅Π½ΡΡΠ΅ ΠΏΠΎΡΠΎΠΊΠΎΠ² Π΄Π°Π½Π½ΡΡ
Π±ΡΠ΄Π΅Ρ ΠΏΠΎΡΡΡΠΏΠ°ΡΡ Ρ ΡΠ΅ΡΠ²Π΅ΡΠ°, Π° Π·Π½Π°ΡΠΈΡ ΠΈ ΡΠ°ΠΉΡ Π±ΡΠ΄Π΅Ρ Π·Π°Π³ΡΡΠΆΠ°ΡΡΡΡ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ Π΄ΠΎΠ»ΡΡΠ΅. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΡΠΎΠΊΡΠ°ΡΠ°Ρ ΡΠΈΡΠ»ΠΎ Π·Π°ΠΏΡΠΎΡΠΎΠ² ΠΌΡ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π΅ΠΌ ΡΠΊΠΎΡΠΎΡΡΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡΡ.
CSS Sprite β ΡΡΠΎ ΡΠΏΠΎΡΠΎΠ± ΡΠΌΠ΅Π½ΡΡΠΈΡΡ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΡΡΡΠΌ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π² ΠΎΠ΄Π½ΠΎ. ΠΠ°ΡΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡcΡ CSS-ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ background-position
Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΎΠΉ ΡΠ°ΡΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π²Π°ΠΌ Π½ΡΠΆΠ½Π°.
ΠΡΠΎ ΠΎΡΠ»ΠΈΡΠ½Π°Ρ ΡΠ΅Ρ Π½ΠΈΠΊΠ° Π΄Π»Ρ ΠΏΠΎΠ²ΡΡΠ΅Π½ΠΈΡ ΡΠΊΠΎΡΠΎΡΡΠΈ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡ Π΄Π΅ΡΡΡΠΊΠΈ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΡ ΠΈΠΊΠΎΠ½ΠΎΠΊ Π² ΠΎΠ΄Π½ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ Π·Π°Π³ΡΡΠ·ΠΈΡΡ ΠΈΡ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ, ΡΠΎΠΊΡΠ°ΡΠ°Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ HTTP-Π·Π°ΠΏΡΠΎΡΠΎΠ².
ΠΠ»Ρ ΡΡΡΠ½ΠΎΠ³ΠΎ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² ΠΎΠ΄ΠΈΠ½ ΡΠ°ΠΉΠ» ΠΏΠΎΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ ΠΈ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ. ΠΠ°ΡΠ΅ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² ΡΠΏΡΠ°ΠΉΡΠ΅ ΠΈ Π½Π°ΠΏΠΈΡΠ°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π΄Π»Ρ ΡΠ°ΠΉΠ»Π° ΡΡΠΈΠ»Π΅ΠΉ. Π― ΠΏΡΠ΅Π΄Π»Π°Π³Π°Ρ ΠΎΠ±Π»Π΅Π³ΡΠΈΡΡ Π·Π°Π΄Π°ΡΡ Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ ΠΎΠ½Π»Π°ΠΉΠ½ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ.
CSS Sprites Generator ΠΈ ΡΠΎΠ½ΠΊΠΎΡΡΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½ΡΠΆΠ½ΠΎ Π·Π½Π°ΡΡ
Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠ΄ΠΎΠ±Π½ΠΎΠ³ΠΎ ΠΈ Π½Π°Π΄ΡΠΆΠ½ΠΎΠ³ΠΎ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ° Ρ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Ρ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡΠΎΠΌ CSS ΡΠΏΡΠ°ΠΉΡΠΎΠ². ΠΠ°ΡΠΈΠ°Π½ΡΠΎΠ² Π²Π΅Π»ΠΈΠΊΠΎΠ΅ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΠΈ Π²ΡΠ΅ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ Π²ΠΎΠ·Π»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ Π½Π° Π½ΠΈΡ
Π·Π°Π΄Π°ΡΠΈ, Π½ΠΎ ΠΌΠ½Π΅ Π±ΠΎΠ»ΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ Π½ΡΠ°Π²ΠΈΡΡΡ CSS Sprites Generator, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΉ ΠΈΠ½ΠΆΠ΅Π½Π΅ΡΠ°ΠΌΠΈ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ Toptal.
ΠΠ»Ρ Π½Π°ΡΠ°Π»Π° Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ΅ΠΎΡΠΈΠΈ. ΠΡΠ»ΠΈ ΠΎΠ΄ΠΈΠ½ ΠΈΠ»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠΏΡΠ°ΠΉΡΠ° ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΠΎΠ²ΡΠΎΡΡΡΡΠ΅Π³ΠΎΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° repeat
, ΡΠΎΠ³Π΄Π° ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ Π»ΡΠ±ΠΎΠ΅ ΠΈΠ· Π΄Π²ΡΡ
ΡΡΠ»ΠΎΠ²ΠΈΠΉ:
- ΠΏΡΠΈΠΌΠ΅Π½ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ
repeat-x
ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΠΉΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΏΡΠ°ΠΉΡΠ° ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ ΠΈΠ»ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΉΡΠ΅ ΠΎΠ΄Π½ΠΎ ΠΏΠΎΠ²ΡΠΎΡΡΡΡΠ΅Π΅ΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊΡΠ°ΠΉΠ½ΠΈΠΌ ΠΏΡΠ°Π²ΡΠΌ Π² ΡΠ»ΡΡΠ°Π΅ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΏΡΠ°ΠΉΡΠ°; - ΠΏΡΠΈΠΌΠ΅Π½ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ
repeat-y
ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΠΉΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΏΡΠ°ΠΉΡΠ° ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ ΠΈΠ»ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΉΡΠ΅ ΠΎΠ΄Π½ΠΎ ΠΏΠΎΠ²ΡΠΎΡΡΡΡΠ΅Π΅ΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊΡΠ°ΠΉΠ½ΠΈΠΌ Π½ΠΈΠΆΠ½ΠΈΠΌ Π² ΡΠ»ΡΡΠ°Π΅ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΏΡΠ°ΠΉΡΠ°.
ΠΡΠΎΡΠ΅ Π³ΠΎΠ²ΠΎΡΡ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ²ΡΠΎΡΡΡΡΠ΅Π³ΠΎΡΡ ΡΠΎΠ½Π° Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡ Π² ΡΠΏΡΠ°ΠΉΡΠ΅ ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΡΡΠΎΠ±Ρ ΠΏΡΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΠΈ Π² Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΌ (X) ΠΈΠ»ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΌ (Y) Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΈ Π½Π° ΠΏΡΡΠΈ Π½Π΅ Π²ΡΡΡΠ΅ΡΠ°Π»ΠΎΡΡ Π΄ΡΡΠ³ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅.
ΠΠΎΡΡΠ΄ΠΎΠΊ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ CSS ΡΠΏΡΠ°ΠΉΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡΠ°
ΠΠ΅ΡΠ΅Ρ
ΠΎΠΆΡ ΠΎΡ ΡΠ΅ΠΎΡΠΈΠΈ ΠΊ ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅. Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΡΠΈΠΌΠ΅ΡΠ° Ρ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΈ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π² ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΌ ΠΈΡΠΎΠ³Π΅ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΠΈΠΌ Π² ΡΠΏΡΠ°ΠΉΡ. ΠΠΎΠ΄Π³ΠΎΡΠΎΠ²ΡΡΠ΅ ΡΠ²ΠΎΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΡΡΡΠΏΠ°ΡΡ ΠΊ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌΡ ΡΠ°Π³Ρ.
ΠΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΠΌ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ ΠΎΠ½Π»Π°ΠΉΠ½ Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡΠ° ΡΠΏΡΠ°ΠΉΡΠΎΠ² CSS Sprites Generator ΠΈ Π·Π°Π³ΡΡΠΆΠ°Π΅ΠΌ Π·Π°ΡΠ°Π½Π΅Π΅ ΠΏΠΎΠ΄Π³ΠΎΡΠΎΠ²Π»Π΅Π½Π½ΡΠ΅ ΡΠ°ΠΉΠ»Ρ Π½Π°ΠΆΠ°ΡΠΈΠ΅ΠΌ ΠΊΠΎΠ½ΠΊΠΈ Choose files ΠΈΠ»ΠΈ ΠΏΡΠΎΡΡΡΠΌ ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠΌ Drag & Drop.
ΠΠ΅ ΠΏΡΡΠ°ΠΉΡΠ΅ΡΡ Π·Π°Π³ΡΡΠΆΠ°ΡΡ ΠΎΠ³ΡΠΎΠΌΠ½ΡΠ΅ ΡΠ°ΠΉΠ»Ρ β ΡΡΠΎ ΠΏΡΠΎΡΠΈΠ²ΠΎΡΠ΅ΡΠΈΡ Π»ΠΎΠ³ΠΈΠΊΠ΅ ΡΠΏΡΠ°ΠΉΡΠΎΠ². ΠΠ½ΠΈ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Ρ Π΄Π»Ρ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.
ΠΠ°ΡΡΡΠΎΠΉΠΊΠΈ ΡΠΎΡΡΠΎΡΡ ΠΈΠ· Π΄Π²ΡΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠ²:
- Padding between elements (px) β ΠΎΡΡΡΡΠΏ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ ,
- Align elements β Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΎΡΡΡΡΠΏΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ, ΡΡΠΎΠ±Ρ ΠΏΡΠΈ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ ΡΡΡΠ°Π½ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π΅ Β«Π½Π°Π΅Π·ΠΆΠ°Π»ΠΈΒ» Π΄ΡΡΠ³ Π½Π° Π΄ΡΡΠ³Π°. ΠΠΈΠΆΠ΅ ΡΠ°Π·Π±Π΅ΡΡΠΌΡΡ Ρ Π²Π°ΡΠΈΠ°Π½ΡΠ°ΠΌΠΈ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
Binary Tree
β Π±ΠΈΠ½Π°ΡΠ½ΠΎΠ΅ Π΄Π΅ΡΠ΅Π²ΠΎ β Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΡΠΉ ΠΏΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡ Π°Π»Π³ΠΎΡΠΈΡΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²:
Diagonal
β Π΄ΠΈΠ°Π³ΠΎΠ½Π°Π»Ρ β ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΌΠΎΠΆΠ΅Ρ ΠΈΠΌΠ΅ΡΡ Π½Π΅ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΠΎΠ΅ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΈΠ»ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π±Π΅Π· ΠΏΠ΅ΡΠ΅ΡΠ΅ΡΠ΅Π½ΠΈΡ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΡΠΏΡΠ°ΠΉΡΠ°:
Diagonal (Alternative)
β Π΄ΠΈΠ°Π³ΠΎΠ½Π°Π»Ρ (Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π°) β ΡΠΎ ΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅, ΡΡΠΎ Π΄ΠΈΠ°Π³ΠΎΠ½Π°Π»Ρ, Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄ΠΈΠ°Π³ΠΎΠ½Π°Π»Ρ Π² Π΄ΡΡΠ³ΠΎΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΈ:
Top-down
β ΡΠ²Π΅ΡΡ
Ρ Π²Π½ΠΈΠ· β ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Ρ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎ ΠΏΠΎΠΎΡΠ΅ΡΡΠ΄Π½ΠΎ ΡΠ²Π΅ΡΡ
Ρ Π²Π½ΠΈΠ·:
Left-right
β ΡΠ»Π΅Π²Π° Π½Π°ΠΏΡΠ°Π²ΠΎ β ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ ΠΏΠΎΠΎΡΠ΅ΡΡΠ΄Π½ΠΎ ΡΠ»Π΅Π²Π° Π½Π°ΠΏΡΠ°Π²ΠΎ:
Π ΠΌΠΎΡΠΌ ΡΠ»ΡΡΠ°Π΅ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ Π²Π°ΡΠΈΠ°Π½Ρ Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠ»Π΅Π²Π° Π½Π°ΠΏΡΠ°Π²ΠΎ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΡΠΎΡΠΈΠ°Π»ΡΠ½ΡΡ
ΡΠ΅ΡΠ΅ΠΉ Π½Π΅ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Ρ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΠΎΠ²ΡΠΎΡΡΡΡΠ΅Π³ΠΎΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ ΠΏΠΎ ΡΠΎΡΠΌΠ΅ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎ ΠΏΡΠΈΠ±Π»ΠΈΠΆΠ΅Π½Ρ ΠΊ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π½Π° Π±Π»ΠΎΠ³Π΅.
ΠΠΎΡΠ»Π΅ Π²ΡΠ±ΠΎΡΠ° ΠΈ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΠ°ΠΉΠ»ΠΎΠ² Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ CSS Sprites Generator Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ Π³ΠΎΡΠΎΠ²ΡΠ΅ ΡΡΠΈΠ»ΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π² ΡΠ°ΠΉΠ» style.css. ΠΠ° ΠΎΡΠ½ΠΎΠ²Π΅ ΠΏΡΠΈΠΌΠ΅ΡΠ° Ρ ΠΏΠΎΠ»ΡΡΠΈΠ» ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄:
.bg-RSS { width: 85px; height: 50px; background: url('css_sprites.png') -10px -10px; } .bg-Twitter { width: 85px; height: 50px; background: url('css_sprites.png') -115px -10px; } .bg-Mail { width: 85px; height: 50px; background: url('css_sprites.png') -220px -10px; }
ΠΠ΅Π»ΠΎ ΠΎΡΡΠ°ΡΡΡΡ Π·Π° ΠΌΠ°Π»ΡΠΌ β Π½Π°ΠΆΠ°ΡΠΈΠ΅ΠΌ ΠΊΠ½ΠΎΠΏΠΊΠΈ Download ΡΠΊΠ°ΡΠ°ΡΡ Π³ΠΎΡΠΎΠ²ΡΠΉ ΡΠ°ΠΉΠ» ΡΠΏΡΠ°ΠΉΡΠ° Ρ ΠΈΠΌΠ΅Π½Π΅ΠΌ css_sprites.png
ΠΈ Π·Π°Π³ΡΡΠ·ΠΈΡΡ Π½Π° ΡΠ²ΠΎΠΉ ΡΠ΅ΡΠ²Π΅Ρ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΈΠΌΠ΅Π½ΠΎΠ²Π°ΡΡ ΡΠ°ΠΉΠ», Π³Π»Π°Π²Π½ΠΎΠ΅ Π² Π±ΡΠ΄ΡΡΠ΅ΠΌ Π½Π΅ Π·Π°Π±ΡΠ΄ΡΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠΎΠΆΠ΅ ΡΠ°ΠΌΠΎΠ΅ Π² ΡΠ°ΠΉΠ»Π΅ ΡΡΠΈΠ»Π΅ΠΉ, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΎΡΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΠΏΡΡΡ ΠΊ ΡΠ°ΠΉΠ»Ρ.
Π ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΌ ΠΈΡΠΎΠ³Π΅ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠΎΠΌ ΡΠ°Π±ΠΎΡΡ ΠΎΠ½Π»Π°ΠΉΠ½ Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡΠ° ΡΡΠ°Π»ΠΎ ΡΠ°ΠΊΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΡΠΎΠ±ΡΠ°Π½Ρ Π²ΠΎΠ΅Π΄ΠΈΠ½ΠΎ Π²ΡΠ΅ ΡΡΠΈ ΠΈΠΊΠΎΠ½ΠΊΠΈ:
Π ΠΏΡΠΈΠ½ΡΠΈΠΏΠ΅, Π½Π° ΡΡΠΎΠΌ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΠΏΡΠ°ΠΉΡΠ° Π·Π°Π²Π΅ΡΡΠ΅Π½ΠΎ. ΠΠ° Π²ΡΡ
ΠΎΠ΄Π΅ ΠΌΡ ΠΏΠΎΠ»ΡΡΠΈΠ»ΠΈ ΡΠ°ΠΉΠ» ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ Π³ΠΎΡΠΎΠ²ΡΠ΅ ΡΡΠΈΠ»ΠΈ. Π ΡΡΠΎ Π΄Π΅Π»Π°ΡΡ Π΄Π°Π»ΡΡΠ΅? ΠΠ° ΠΎΡΠ½ΠΎΠ²Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ° Ρ Π²ΡΠ±ΡΠ°Π» ΠΈΠΊΠΎΠ½ΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ²Π»ΡΡΡΡΡ ΡΡΡΠ»ΠΊΠ°ΠΌΠΈ Π½Π° Π²Π½Π΅ΡΠ½ΠΈΠ΅ ΡΠ°ΠΉΡΡ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΡΠ»ΠΊΠ΅ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡΠΈΡΠ²ΠΎΠΈΡΡ ΡΠ²ΠΎΠΉ ΠΊΠ»Π°ΡΡ Π΄Π»Ρ ΡΠ΅Π³Π°
<a>
, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ: <a href="..."></a>
ΠΡΠ΅ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ ΡΠ°ΠΉΡΠ° ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΠΈΡΡ Π² ΠΎΠ΄ΠΈΠ½ ΡΠΏΡΠ°ΠΉΡ, Π½ΠΎ ΡΠ°ΠΊΠΎΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ Π² Π±ΡΠ΄ΡΡΠ΅ΠΌ ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ·Π²Π°ΡΡ ΡΡΡΠ΄Π½ΠΎΡΡΠΈ.
ΠΡΠ΅Π΄ΡΡΠ°Π²ΡΡΠ΅ ΡΠΈΡΡΠ°ΡΠΈΡ, Π² ΠΊΠΎΡΠΎΡΠΎΠΉ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π·Π°ΠΌΠ΅Π½ΠΈΡΡ ΠΎΠ΄Π½ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° Π΄ΡΡΠ³ΠΎΠ΅ β ΠΏΡΠΈΠ΄ΡΡΡΡ ΠΌΠ΅Π½ΡΡΡ ΡΡΠΈΠ»ΠΈ Π²ΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ. ΠΠ·Π±Π΅ΠΆΠ°ΡΡ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΠΏΡΠ°ΠΉΡΠΎΠ², ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΡΡΡΠΈΡ Π³ΡΡΠΏΠΏΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² (ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΌΠ΅Π½Ρ, ΠΈΠΊΠΎΠ½ΠΊΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΠΈ Ρ.Π΄.). Π Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΡΠΏΡΠ°ΠΉΡΡ?
ΠΠ΅Π½Π΅ΡΠ°ΡΠΎΡ ΡΠΏΡΠ°ΠΉΡΠΎΠ² CSS| GiftOfSpeed ββ
ΠΡΠ±Π΅ΡΠΈΡΠ΅ 2 ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ:
ΠΡΠ±ΡΠ°Π½Π½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ:
Π‘ΠΎΡ ΡΠ°Π½ΠΈΡΡ ΠΊΠ°ΠΊ:
PNG Π³ΠΈΡΠΊΠ° JPG
ΠΠΈΠ½Π΅ΠΉΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ:
ΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½Π°Ρ ΠΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ
Π Π°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ:
ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ
Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ ΡΠΏΡΠ°ΠΉΡΡ CSS?
Π‘ΠΏΡΠ°ΠΉΡΡ CSS ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π² ΠΎΠ΄Π½ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. ΠΠ°ΡΠ΅ΠΌ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΎ ΠΎΠ΄Π½ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ Π²ΡΠ·ΠΎΠ²Π° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ ΡΠΎΠ½Π° X ΠΈ Y CSS, ΡΡΠΎΠ±Ρ ΡΠΎΠΎΠ±ΡΠΈΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΡ, Π³Π΄Π΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Ρ Π½Π° ΠΎΠ΄Π½ΠΎΠΌ Π±ΠΎΠ»ΡΡΠΎΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ ΠΈ Π³Π΄Π΅ ΠΈΡ
ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ Π½Π° Π²Π°ΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅.
ΠΠ°ΠΊ ΡΠΏΡΠ°ΠΉΡΡ ΡΡΠΊΠΎΡΡΡΡ ΠΌΠΎΠΉ ΡΠ°ΠΉΡ?
ΠΠ΄ΠΈΠ½ ΠΈΠ· ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΠΏΠΎΠ²ΡΡΠΈΡΡ ΡΠΊΠΎΡΠΎΡΡΡ ΡΠ°ΠΉΡΠ° β ΡΠΌΠ΅Π½ΡΡΠΈΡΡ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ HTTP-Π·Π°ΠΏΡΠΎΡΠΎΠ², Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΡ ΡΠ°ΠΉΡΡ Π΄Π»Ρ ΠΏΠΎΠ»Π½ΠΎΠ³ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π΄Π»Ρ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈΠ»ΠΈ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΡ ΡΠ΅Π»Π΅ΠΉ ΡΠΎΠ·Π΄Π°ΡΡ ΠΌΠ½ΠΎΠ³ΠΎ ΡΡΠΈΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ Π·Π°ΠΏΡΠΎΡΠΎΠ². Π₯ΠΎΡΠΎΡΠΈΠΉ ΡΠΏΠΎΡΠΎΠ± Π±ΠΎΡΡΠ±Ρ Ρ ΡΡΠΈΠΌ β ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΏΡΠ°ΠΉΡΠΎΠ² CSS.
ΠΠ»Ρ ΠΊΠ°ΠΊΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΏΡΠ°ΠΉΡΡ?
ΠΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄Π»Ρ Π²ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°. ΠΡΡΠ³ΠΈΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π½Π° Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ ΡΡΡΠ°Π½ΠΈΡ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°. ΠΡΠΏΠΎΠ»Π½ΠΈΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ, ΡΡΠΎΠ±Ρ ΠΎΠ±Π½Π°ΡΡΠΆΠΈΡΡ ΠΈ ΡΠΊΠ°ΡΠ°ΡΡ ΠΈΡ :
- ΠΡΠΊΡΠΎΠΉΡΠ΅ ΡΠ²ΠΎΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ Π² ΠΎΠΊΠ½Π΅ Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ ΠΈΡΡ
ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄ (ΠΊΠ°ΠΊ HTML, ΡΠ°ΠΊ ΠΈ CSS).
- Π’Π΅ΠΏΠ΅ΡΡ Π½Π°ΠΉΠ΄ΠΈΡΠ΅ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄ Π΄Π»Ρ Π²ΡΠ΅Ρ ΡΠ°ΠΉΠ»ΠΎΠ² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ (ΡΠ°ΠΉΠ»Ρ png, jpg ΠΈΠ»ΠΈ gif), ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ Π½Π° Π²Π°ΡΠ΅ΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅, ΠΎΠ±ΡΡΠ½ΠΎ Π΄Π»Ρ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π²Π°ΡΠ΅Π³ΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°.
- Π’Π΅ΠΏΠ΅ΡΡ ΡΠΎΡ ΡΠ°Π½ΠΈΡΠ΅ ΡΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π° ΠΆΠ΅ΡΡΠΊΠΈΠΉ Π΄ΠΈΡΠΊ.
- ΠΡΠ΅Π³Π΄Π° ΠΈΡΠΊΠ»ΡΡΠ°ΠΉΡΠ΅ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΈ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ Π΄Π»Ρ ΡΡΠ°ΡΠ΅ΠΉ, ΠΈΠ»ΠΈ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π½Π° Π²Π°ΡΠ΅ΠΌ ΡΠ°ΠΉΡΠ΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄ΠΈΠ½ ΠΈΠ»ΠΈ Π΄Π²Π° ΡΠ°Π·Π°.
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠΏΡΠ°ΠΉΡΡ CSS?
ΠΡΠ±Π΅ΡΠΈΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΡΠΎΡ ΡΠ°Π½ΠΈΠ»ΠΈ, Π²ΡΠΏΠΎΠ»Π½ΠΈΠ² ΡΠ΅ΡΡΡΠ΅ ΡΠ°Π³Π°, ΠΎΠΏΠΈΡΠ°Π½Π½ΡΡ Π² ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌ Π°Π±Π·Π°ΡΠ΅, ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡ ΡΠΏΡΠ°ΠΉΡΠΎΠ² CSS, ΡΡΠΎΠ±Ρ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΠΈΡΡ ΠΈΡ Π² ΠΎΠ΄ΠΈΠ½ ΡΠ°ΠΉΠ» ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π½Π°ΠΆΠ°Π² ΠΊΠ½ΠΎΠΏΠΊΡ Β«Π‘ΠΎΠ·Π΄Π°ΡΡΒ». ΠΠ΅Π½Π΅ΡΠ°ΡΠΎΡ ΡΠ°ΠΊΠΆΠ΅ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΠΎΠ΄ CSS, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠΉ Π΄Π»Ρ Π²ΡΠ·ΠΎΠ²Π° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° Π²Π°ΡΠ΅ΠΌ ΡΠ°ΠΉΡΠ΅.
ΠΠ°ΠΊ Π²Π½Π΅Π΄ΡΠΈΡΡ ΠΊΠΎΠ΄ CSS ΠΈ HTML?
— Π‘ΠΊΠΎΠΏΠΈΡΡΠΉΡΠ΅ ΠΊΠΎΠ΄ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ CSS ΠΈ Π²ΡΡΠ°Π²ΡΡΠ΅ Π΅Π³ΠΎ Π² ΡΠΊΡΠΈΠΏΡ CSS Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°.
— ΠΡΡΠ΅Π³ΡΠ»ΠΈΡΡΠΉΡΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ½Π°: ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ X ΠΈ Y, ΡΡΠΎΠ±Ρ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π½Π½ΠΎ Π² ΡΠΎΠΌ ΠΌΠ΅ΡΡΠ΅, Π³Π΄Π΅ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π»ΠΎΡΡ Π½Π° Π²Π°ΡΠ΅ΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ: background-position: -808px 25px;
Π§ΡΠΎ Π΄Π΅Π»Π°ΡΡ, Π΅ΡΠ»ΠΈ Ρ ΡΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» CSS Π΄Π»Ρ Π²ΡΠ·ΠΎΠ²Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ?
ΠΡΠ»ΠΈ Π²Ρ ΡΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ CSS Π΄Π»Ρ Π²ΡΠ·ΠΎΠ²Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π²ΠΌΠ΅ΡΡΠΎ ΡΠ΅Π³ΠΎΠ² HTML, Π²Π°ΠΌ ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π°ΠΌΠ΅Π½ΠΈΡΡ ΡΡΠ°ΡΡΠΉ ΠΊΠΎΠ΄ CSS, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠΉ Π΄Π»Ρ Π²ΡΠ·ΠΎΠ²Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, Π½ΠΎΠ²ΡΠΌ ΠΊΠΎΠ΄ΠΎΠΌ, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ CSS:
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π·Π°ΠΌΠ΅Π½ΠΈΡΠ΅ background-image: url(‘image. png’) Ρ ΡΠΎΠ½ΠΎΠ²ΡΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ: url(‘sprite.png’) background-position: 0px -197px; ΡΠΈΡΠΈΠ½Π°: 365 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; Π²ΡΡΠΎΡΠ°: 360 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π₯ΠΎΡΠΈΡΠ΅ ΠΈΠΌΠ΅ΡΡ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΡ ΡΠΊΠΎΡΠΎΡΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Π΄Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°?
ΠΡ ΠΌΠΎΠΆΠ΅ΠΌ Π²Π°ΠΌ Π² ΡΡΠΎΠΌ ΠΏΠΎΠΌΠΎΡΡ! ΠΠ° Π³ΠΎΠ΄Ρ ΡΠ°Π±ΠΎΡΡ ΠΌΡ ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎ ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°Π»ΠΈ ΡΠΊΠΎΡΠΎΡΡΡ ΡΡΡΡΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ². ΠΡ Π·Π½Π°Π΅ΠΌ, ΠΊΠ°ΠΊ Π΄ΠΎΠ±ΠΈΡΡΡΡ Π½Π°ΠΈΠ»ΡΡΡΠ΅Π³ΠΎ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ°, ΠΈ Π½Π°ΡΠΈ ΡΠ΅Π½Ρ Π΄ΠΎΡΡΡΠΏΠ½Ρ. ΠΠΎΠ»ΡΡΠΈΡΠ΅ ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½ΠΎΠ΅ ΡΠ΅Π½ΠΎΠ²ΠΎΠ΅ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π° Π½Π°ΡΠΈ ΡΡΠ»ΡΠ³ΠΈ ΠΏΠΎ ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΠΈ ΡΠΊΠΎΡΠΎΡΡΠΈ ΡΠ°ΠΉΡΠ° ΠΏΡΡΠΌΠΎ ΡΠ΅ΠΉΡΠ°Ρ.
ΠΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Π°Ρ ΡΠΊΠΎΡΠΎΡΡΡ — ΠΡΡΡΠΈΠ΅ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΡ
ΠΡ ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΡΠ΅ΠΌ ΡΠΊΠΎΡΠΎΡΡΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠ° Π΄ΠΎ Π΅Π΅ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠ΅Π½ΡΠΈΠ°Π»Π°. ΠΡ Π΄Π΅Π»Π°Π΅ΠΌ ΡΡΠΎ, ΠΏΡΠΎΠ²ΠΎΠ΄Ρ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ Π°Π½Π°Π»ΠΈΠ· ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΡ ΡΠ΅ΡΡΠ° Google PageSpeed, ΡΡΠΎΠ±Ρ ΠΈΡΠΏΡΠ°Π²ΠΈΡΡ Π²ΡΠ΅ ΠΎΠ±Π½Π°ΡΡΠΆΠ΅Π½Π½ΡΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ ΠΎΠ΄Π½Ρ Π·Π° Π΄ΡΡΠ³ΠΎΠΉ, ΡΡΠΎ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡ ΠΊ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠΌ ΠΏΠΎΠΊΠ°Π·Π°ΡΠ΅Π»ΡΠΌ ΡΠΊΠΎΡΠΎΡΡΠΈ. Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΌΠΎΠΆΠ½ΠΎ Π²Π·ΡΡΡ Π½Π°Ρ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ ΡΠ°ΠΉΡ.
ΠΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΡ Π·Π° 1 ΠΈΠ»ΠΈ 2 Π΄Π½Ρ — Π΄ΠΎΡΡΡΠΏΠ½ΡΠ΅ ΡΠ΅Π½Ρ
ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΡ ΠΌΠ½ΠΎΠ³ΠΎΠ»Π΅ΡΠ½Π΅ΠΌΡ ΠΎΠΏΡΡΡ ΠΌΡ ΠΎΠ±ΡΡΠ½ΠΎ ΠΌΠΎΠΆΠ΅ΠΌ ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ°ΠΉΡ Π·Π° 1 ΠΈΠ»ΠΈ 2 Π΄Π½Ρ. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ Π½Π°ΠΌΠΈ ΠΌΠ΅ΡΠΎΠ΄Ρ Π³Π°ΡΠ°Π½ΡΠΈΡΡΡΡ 100% Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΠΎΡΡΡ, ΡΡΠΎ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡ ΠΊ ΠΎΡΡΡΡΡΡΠ²ΠΈΡ ΠΏΡΠΎΡΡΠΎΠ΅Π² ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΈΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌ.
Π£Π·Π½Π°ΡΡ Π±ΠΎΠ»ΡΡΠ΅..
ΠΠΎΠΏΡΠΎΡΡ : ΠΠ΅Π½Π΅ΡΠ°ΡΠΎΡ ΡΠΏΡΠ°ΠΉΡΠΎΠ² CSS
ΠΏΠΎ ΡΠ΅Π»Π΅Π²Π°Π½ΡΠ½ΠΎΡΡΠΈΠΏΠΎ ΡΡΠ°ΡΡΡΡΡΠ°ΠΌΡΠ΅ Π½ΠΎΠ²ΡΠ΅ ΡΠ½Π°ΡΠ°Π»Π°ΡΠ°ΠΌΡΠ΅ ΡΡΠ°ΡΡΠ΅ ΡΠ½Π°ΡΠ°Π»Π°ΡΠ½Π°ΡΠ°Π»Π° Π½Π΅Π΄Π°Π²Π½ΠΎ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠ΅
Π€ΠΈΠ»ΡΡΡ ΡΠ·ΡΠΊΠΎΠ² (ΠΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ·ΡΠΊΠΈ)
Β ΠΠ½Π³Π»ΠΈΠΉΡΠΊΠΈΠΉ (en)
Π‘ΡΠ°ΡΡΡ
Β ΠΡΠΊΡΡΡΠΎ Β Β Β ΠΡΠΆΠ½Π° ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ Β Β Β ΠΡΠ²Π΅ΡΠ΅Π½ΠΎ Β Β Β Π Π΅ΡΠ΅Π½ΠΎ Β Β Β ΠΡΠΎΡΡΠΎΡΠ΅Π½ΠΎ Β Β Β ΠΠ΅Π²Π΅ΡΠ½ΠΎ
Π‘Π²ΠΎΠ΄ΠΊΠ° | Π‘ΠΎΠ·Π΄Π°Π½ΠΎ | ΠΡΠΏΡΠ°Π²ΠΈΡΠ΅Π»Ρ | ΠΡΠ°Π²ΠΎΠΏΡΠ΅Π΅ΠΌΠ½ΠΈΠΊ | Π‘ΡΠ°ΡΡΡ | ||
---|---|---|---|---|---|---|
161524 | Π£Π²Π΅Π»ΠΈΡΠΈΡΡ Π»ΠΈΠΌΠΈΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ Π΄ΠΎ 10ΠΌΠ± | 2011-06-15 14:09:36 UTC | Π Π΅Π½Π΅ ΠΠ΅Π΅ΡΠΌΠ°Π½ | β | Π Π΅ΡΠ΅Π½ΠΎ | |
161501 | Π·Π°ΠΏΡΠΎΡ ΡΡΠ½ΠΊΡΠΈΠΉ: ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Windows, ΡΠ°Π±ΠΎΡΠ° Π²Π½ΡΡΡΠΈ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠ΅Π³ΠΎ Π²ΠΈΡΡΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Ρ ΠΎΡΡΠ° | 2011-06-15 09:10:57 UTC | Π Π΅Π½Π΅ ΠΠ΅Π΅ΡΠΌΠ°Π½ | β | Π Π΅ΡΠ΅Π½ΠΎ | |
52436 | Π‘ΠΏΡΠ°ΠΉΡΡ ΠΈΠ· ΠΏΠ°ΠΊΠ΅ΡΠ° PNG ΠΎΡΠ±ΡΠ°ΡΡΠ²Π°ΡΡ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΡΡ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ | 2008-11-24 20:17:57 UTC ΠΡΡΠ°Π²ΠΈΡΡ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ
|