ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ CSS ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ² | ΠΠ°Π·Π° Π·Π½Π°Π½ΠΈΠΉ
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΡΠ°Π·Π±Π΅ΡΠ΅ΠΌ, ΠΊΠ°ΠΊ Π½Π°ΠΉΡΠΈ CSS ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡ Π΄Π»Ρ ΡΠ±ΠΎΡΠ° Π΄Π°Π½Π½ΡΡ Ρ ΡΠ°ΠΉΡΠ°
ΠΠ°ΠΆΠ½ΠΎ!Β ΠΠ΅ ΠΏΠ΅ΡΠ΅ΠΆΠΈΠ²Π°ΠΉΡΠ΅, Π΅ΡΠ»ΠΈ ΡΠ°Π½Π΅Π΅ Π½Π΅ Π±ΡΠ»ΠΈ Π·Π½Π°ΠΊΠΎΠΌΡ Ρ html ΠΈ CSS, Π·Π΄Π΅ΡΡ Π½Π΅ ΠΏΠΎΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΡ Π·Π½Π°Π½ΠΈΠΉ Π² ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ π
CSS ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΏΡΡΡ, Π² ΠΊΠ°ΠΊΠΎΠΌ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠ΅Π³Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡΡΡ Π½ΡΠΆΠ½Π°Ρ Π½Π°ΠΌ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ. ΠΠ»Ρ ΠΈΡ ΠΏΠΎΠΈΡΠΊΠ° ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΠΌΠΈ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ°ΠΌΠΈ Π΄Π»Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, SelectorGadget, Π½ΠΎ ΠΎΠ½ΠΈ Π½Π΅ Π³Π°ΡΠ°Π½ΡΠΈΡΡΡΡ ΡΠΎΠ³ΠΎ, ΡΡΠΎ Π½Π°ΠΉΠ΄Π΅Π½Π½ΡΠ΅ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ Π±ΡΠ΄ΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ Π²Π°ΡΠΈΠΌ Π·Π°Π΄Π°ΡΠ°ΠΌ.
ΠΠΎΠΈΡΠΊ Π½ΡΠΆΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
ΠΠ»Ρ Π½Π°ΡΠ°Π»Π° ΠΎΡΠΊΡΠΎΠΉΡΠ΅ html ΠΊΠΎΠ΄ ΡΡΡΠ°Π½ΠΈΡΡ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°. Π‘Π΄Π΅Π»Π°ΡΡ ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΊΠ»ΠΈΠΊΠ½ΡΠ² ΠΏΡΠ°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡΡΠΈ ΠΈ Π²ΡΠ±ΡΠ°Π² «ΠΠΎΠΊΠ°Π·Π°ΡΡ ΠΊΠΎΠ΄ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°»/Inspect (Π·Π΄Π΅ΡΡ ΠΈ Π΄Π°Π»Π΅Π΅ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΡΡΡ ΡΠ°Π±ΠΎΡΠ° Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ Chrome).Β
ΠΡΠΊΡΠΎΠ΅ΡΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, Π³Π΄Π΅ Π²ΠΎ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ Elements ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡΡ Π²Π΅ΡΡ html ΠΊΠΎΠ΄ ΡΡΡΠ°Π½ΠΈΡΡ, Π·Π°Π³ΡΡΠΆΠ΅Π½Π½ΡΠΉ Π² Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ. ΠΠ° ΡΠΊΡΠΈΠ½ΡΠΎΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ° Π²ΡΠ΄Π΅Π»Π΅Π½ ΡΠ΅Π³, Π½Π° ΠΊΠΎΡΠΎΡΡΠΉ ΠΊΠ°ΠΊ ΡΠ°Π· Π±ΡΠ» ΠΊΠ»ΠΈΠΊ ΠΏΡΠ°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡΡΠΈ.
Π‘Π»Π΅Π΄ΡΡΡΠΈΠΉ ΡΡΠ°ΠΏ ΡΠ°Π±ΠΎΡΡ — ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΡΠ΅Π³, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π°ΠΌ Π½ΡΠΆΠ΅Π½. Π‘Π΄Π΅Π»Π°ΡΡ ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ:
- ΠΊΠ»ΠΈΠΊΠ½ΡΡΡ Π½Π° ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΡ ΠΎΠ±Π»Π°ΡΡΡ, Π½Π°ΠΆΠ°ΡΡ Π½Π° ΠΏΡΠ°Π²ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΌΡΡΠΈ ΠΈ Π΅ΡΠ΅ ΡΠ°Π· Π²ΡΠ±ΡΠ°ΡΡΒ «ΠΠΎΠΊΠ°Π·Π°ΡΡ ΠΊΠΎΠ΄ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°»/Inspect;
- ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠΈΡΡΡΡ Π½Π° Π²ΡΠ±ΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΈΠ· ΠΊΠΎΠ½ΡΠΎΠ»ΠΈ, Π½Π°ΠΆΠ°Π² Π½Π° ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π² ΠΊΠΎΠ½ΡΠΎΠ»ΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°;
- ΡΠ΅ΡΠ΅Π· ΠΏΠΎΠΈΡΠΊ Π½Π°ΠΉΡΠΈ ΡΠ΅Π³ ΠΏΡΡΠΌΠΎ Π² html ΠΊΠΎΠ΄Π΅. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΊΠ»ΠΈΠΊΠ½ΠΈΡΠ΅ Π½Π° Π»ΡΠ±ΠΎΠΉ ΡΠ΅Π³, Π½Π°ΠΆΠΌΠΈΡΠ΅ ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠ΅ ΠΊΠ»Π°Π²ΠΈΡ Ctrl + F ΠΈ Π² ΠΏΠΎΡΠ²ΠΈΠ²ΡΠ΅ΠΉΡΡ ΡΡΡΠΎΠΊΠ΅ ΠΏΠΎΠΈΡΠΊΠ° Π²Π²Π΅Π΄ΠΈΡΠ΅ Π»ΡΠ±ΠΎΠΉ ΡΠ΅ΠΊΡΡ Ρ ΡΠ°ΠΉΡΠ°. ΠΡΠ°ΡΠ·Π΅Ρ ΡΠ°ΠΌ ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈ ΡΡΠ΄ΠΎΠΌ Π½Π°ΠΏΠΈΡΠ΅Ρ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠΎΠ²ΠΏΠ°Π΄Π΅Π½ΠΈΠΉ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. Π Π½Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π²ΠΈΠ΄Π½ΠΎ, ΡΡΠΎ «Π·Π°ΠΏΠΈΡΠ°ΡΡΡΡ» ΠΏΠΎΠ²ΡΠΎΡΡΠ΅ΡΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π΄Π²Π°ΠΆΠ΄Ρ. ΠΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Enter Π² ΡΡΡΠΎΠΊΠ΅ ΠΏΠΎΠΈΡΠΊΠ°, Π±ΡΠ°ΡΠ·Π΅Ρ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°Π΅Ρ ΠΊ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ (ΡΡΠΎΡ ΠΌΠΎΠΌΠ΅Π½Ρ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ Π²Π°ΠΌ ΠΏΡΠΎΠ²Π΅ΡΡΡΡ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΠΎΡΡΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ° Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π»ΠΈΠ±ΠΎ ΡΡΠΎΡΠ½ΡΡΡ, Π²ΡΠ΅ Π»ΠΈ Π½Π°ΠΉΠ΄Π΅Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡ Π²Π°ΡΠΈΠΌ Π·Π°Π΄Π°ΡΠ°ΠΌ, ΠΊΠΎΠ³Π΄Π° ΠΈΡ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ).
ΠΡΠ½ΠΎΠ²Π½ΡΠ΅ ΠΏΠΎΠ½ΡΡΠΈΡ Π² html ΠΊΠΎΠ΄Π΅
ΠΠ°Π»Π΅Π΅ ΡΠ°Π·Π±Π΅ΡΠ΅ΠΌ, ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π² html ΠΊΠΎΠ΄Π΅ ΠΈ ΡΡΠΎ ΠΈΠ· ΡΡΠΎΠ³ΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π·Π½Π°ΡΡ Π΄Π»Ρ ΡΠ±ΠΎΡΠ° Π΄Π°Π½Π½ΡΡ . Β
Π’Π΅Π³Β — ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ΅Ρ ΡΠΎΡΡΠΎΡΡΡ ΠΈΠ· Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΈ ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠ³ΠΎ, ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ Π²Π½ΡΡΡΠΈ ΡΠ΅Π±Ρ ΡΠ΅ΠΊΡΡ (span Π² ΠΏΡΠΈΠΌΠ΅ΡΠ΅ — Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΡΠ΅Π³Π°), Π° ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΎΠ΄ΠΈΠ½ΠΎΡΠ½ΡΠΌ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ <br> (ΠΏΠ΅ΡΠ΅Π½ΠΎΡ ΡΠ΅ΠΊΡΡΠ° Π½Π° Π½ΠΎΠ²ΡΡ ΡΡΡΠΎΠΊΡ).Β
ΠΡΡΠΈΠ±ΡΡ ΡΠ΅Π³Π° —Β Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΡΠ΅Π³Π°, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Π»ΠΈΡΡΡ Π½Π° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΡΠ΅Π³Π°, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΡΠ΅ΠΊΡΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ,
— Π·Π΄Π΅ΡΡ style=»font-size: 200%; text-align: center;»Β ΡΠ²Π»ΡΠ΅ΡΡΡ Π°ΡΡΠΈΠ±ΡΡΠΎΠΌ ΠΈ Π² Π½Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΎΠ½ ΡΠ΄Π΅Π»Π°Π΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ΅ΠΊΡΡΠ° ΠΠ°ΠΏΠΈΡΠ°ΡΡΡΡΒ Π² Π΄Π²Π° ΡΠ°Π·Π° ΠΊΡΡΠΏΠ½Π΅Π΅ ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡ Π΅Π³ΠΎ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ.
Π£ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ΅Π³Π° ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π°ΡΡΠΈΠ±ΡΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ΄ΡΡ ΡΠ°Π·Π΄Π΅Π»Π΅Π½Ρ ΠΏΡΠΎΠ±Π΅Π»Π°ΠΌΠΈ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ°ΠΊ:
Π·Π΄Π΅ΡΡ Π΄Π²Π° Π°ΡΡΠΈΠ±ΡΡΠ° Ρ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ΅Π³Π° — classΒ ΠΈ style.
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ Π°ΡΡΠΈΠ±ΡΡΠ° —Β Π°ΡΡΠΈΠ±ΡΡ ΡΠ΅Π³Π° ΡΠΎΡΡΠΎΠΈΡ ΠΈΠ· Π΄Π²ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²: Π½Π°Π·Π²Π°Π½ΠΈΡ ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ.
Π¦ΠΈΡΡΠΎΠΉ 1 ΠΎΡΠΌΠ΅ΡΠ΅Π½Ρ Π½Π°Π·Π²Π°Π½ΠΈΡ Π°ΡΡΠΈΠ±ΡΡΠΎΠ², ΡΠΈΡΡΠΎΠΉ 2 — ΠΈΡ
Π·Π½Π°ΡΠ΅Π½ΠΈΡ. ΠΠ½Π°ΡΠ΅Π½ΠΈΠΉ, ΠΊΠ°ΠΊ ΠΈ ΡΠ°ΠΌΠΈΡ
Π°ΡΡΠΈΠ±ΡΡΠΎΠ² Π² ΡΠ΅Π³Π΅, ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ, ΡΠ°Π·Π΄Π΅Π»ΡΡΡΡΡ ΠΎΠ½ΠΈ ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠΎΠ±Π΅Π»ΠΎΠΌ.
Π Π°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ΅Π³ΠΎΠ²Β — Π² html ΠΊΠΎΠ΄Π΅ Π²ΡΠ΅ ΡΠ΅Π³ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΠΏΠΎ ΡΠ΅ΡΠΊΠΈΠΌ ΠΏΡΠ°Π²ΠΈΠ»Π°ΠΌ, ΠΊΠ°ΠΊ ΠΌΠ°ΡΡΠ΅ΡΠΊΠΈ, ΠΎΠ΄ΠΈΠ½ Π² Π΄ΡΡΠ³ΠΎΠΌ Π»ΠΈΠ±ΠΎ ΡΡΠ΄ΠΎΠΌ. Π£ Π²ΡΠ΅Ρ ΡΠ΅Π³ΠΎΠ² Π΅ΡΡΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΠΈ (ΡΠ΅Π³ΠΈ, Π²Π½ΡΡΡΠΈ ΠΊΠΎΡΠΎΡΡΡ ΠΎΠ½ΠΈ Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ) ΠΈ Ρ ΠΌΠ½ΠΎΠ³ΠΈΡ Π΄Π΅ΡΠΈ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ΅Π³ <strong></strong> ΡΠ΅Π±Π΅Π½ΠΎΠΊ ΠΈ ΡΠ΅Π³Π° <h3></h3>, ΠΈ ΡΠ΅Π³Π° <div></div>, Π° ΠΎΠ½ΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ Π΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΠΈ:
ΠΡΠ°Π²ΠΈΠ»Π° ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ΅Π½ΠΈΡ CSS ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ²
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΡΠΊΠ°Π·Π°Π½ΠΈΡ Π½Π° ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΠΉ ΡΠ΅Π³ ΠΈΠ»ΠΈ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ html. ΠΠ°Π»Π΅Π΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°ΠΌΡΡ ΠΏΡΠΎΡΡΡΡ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ².
ΠΠ°Π·Π²Π°Π½ΠΈΠ΅ ΡΠ΅Π³Π° —Β Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΏΡΠΎΡΡΠΎ ΡΠΊΠ°Π·Π°ΡΡ span, div, img, h3Β Π² ΠΌΠ΅ΡΡΠ΅, Π³Π΄Π΅ Π½ΡΠΆΠ½ΠΎ ΠΏΡΠΎΠΏΠΈΡΠ°ΡΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ, ΠΈ ΡΠ°ΠΊΠΎΠΉ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ Π±ΡΠ΄Π΅Ρ ΡΡΠΈΡΡΠ²Π°ΡΡ Π²ΡΠ΅ ΡΠ΅Π³ΠΈ Ρ ΡΠ°ΠΊΠΈΠΌ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΠ±ΡΡΠ½ΠΎ ΡΡΠΎΠ³ΠΎ Ρ Π²Π°ΡΠ°Π΅Ρ Π΄Π»Ρ Π·Π°ΠΏΠΈΡΠΈ Π½Π°Π·Π²Π°Π½ΠΈΡ ΡΡΡΠ°Π½ΠΈΡΡ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΎΠ±ΡΡΠ½ΠΎ ΠΎΠ½ΠΎ ΠΏΡΠΈΡΡΡΡΡΠ²ΡΠ΅Ρ Π² ΡΠ΅Π³Π΅ h2, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π΅ ΠΏΠΎΠ²ΡΠΎΡΡΠ΅ΡΡΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ°ΠΊ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ Π½Π°ΡΡΡΠΎΠΉΠΊΠ° Π·Π°ΠΏΠΈΡΠΈ Π² ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΠΎΠ±ΡΡΠΈΡ «ΠΠΎΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ» Π½Π°Π·Π²Π°Π½ΠΈΡ ΡΡΡΠ°Π½ΠΈΡΡ:
ΠΡΡΠΈΠ±ΡΡΡ class ΠΈ idΒ — ΡΡΠΎ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠ΅ Π² Π½Π°ΡΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅ Π°ΡΡΠΈΠ±ΡΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ°ΡΡΡΡ Π½Π΅ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π²ΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅. ΠΡΠΈΠΌΠ΅Ρ:
ΠΠ΄Π΅ΡΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ Β class ΠΌΡ Π·Π°ΠΏΠΈΡΠ΅ΠΌ ΠΊΠ°ΠΊ .text ΠΈΠ»ΠΈ .wrapper2, ΡΠΎ Π΅ΡΡΡ ΠΏΡΠΎΡΡΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΡΠΎΡΠΊΡ ΠΏΠ΅ΡΠ΅Π΄ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ. ΠΡΠ»ΠΈ ΠΌΡ Ρ ΠΎΡΠΈΠΌ ΡΠΊΠ°Π·Π°ΡΡ, ΡΡΠΎ Π½Π°ΠΌ Π½ΡΠΆΠ΅Π½ ΡΠ΅Π³, Π³Π΄Π΅ Π² ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅ ΠΏΡΠΈΡΡΡΡΡΠ²ΡΡΡ ΠΎΠ±Π° Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΡΠΎ ΠΏΡΠΎΠΏΠΈΡΠ΅ΠΌ ΡΠ°ΠΊ .text.wrapper2 (Π±Π΅Π· ΠΏΡΠΎΠ±Π΅Π»Π°).
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ id Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΡΠ²Π»ΡΡΡΡΡ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΌ ΠΏΠΎ ΠΏΡΠ°Π²ΠΈΠ»Π°ΠΌ html ΠΈ ΠΈΠΌΠ΅ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π²Π½ΡΡΡΠΈ ΡΡΠΎΠ³ΠΎ ΡΠ΅Π³Π°. ΠΡΠΎ ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΎΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ°ΡΡΡΡ ΡΠ°ΠΊ #section24.
ΠΠ°ΠΌ ΠΏΠΎΠ²Π΅Π·Π»ΠΎ, Π΅ΡΠ»ΠΈ Π² Π½ΡΠΆΠ½ΠΎΠΌ Π²Π°ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅ Π΅ΡΡΡ id, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΡΡΠΎΠ³ΠΎ ΠΊΠ°ΠΊ ΡΠ°Π· Π±ΡΠ΄Π΅Ρ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π΄Π»Ρ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π° Π½Π°ΡΡΡΠΎΠ΅ΠΊ ΡΠ±ΠΎΡΠ° Π΄Π°Π½Π½ΡΡ .
ΠΡΡΠ³ΠΈΠ΅ Π°ΡΡΠΈΠ±ΡΡΡ —Β Π²ΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ Π°ΡΡΠΈΠ±ΡΡΡ Π·Π°ΠΏΠΈΡΡΠ²Π°ΡΡΡΡ ΠΏΠΎ Π΅Π΄ΠΈΠ½ΠΎΠΌΡ ΠΏΡΠ°Π²ΠΈΠ»Ρ: Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΡΠ΅Π³Π°[Π°ΡΡΠΈΠ±ΡΡ ΠΈ Π΅Π³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅]. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠΊΠ°ΠΆΠ΅ΠΌ CSS ΡΠ΅Π»Π΅ΠΊΡΠΎΡ Π΄Π»Ρ ΡΠ΅Π³Π° Ρ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠΉ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΎΠΉ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π°ΡΡΠΈΠ±ΡΡ scr (ΡΡΡΠ»ΠΊΡ Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ):
img[src=»//s.filesonload.ru/img/shadowbottom/1.png»]
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΠ΅Π³ΠΎΠ²Β — ΠΈΠ½ΠΎΠ³Π΄Π° Π°ΡΡΠΈΠ±ΡΡΡ Ρ Π½ΡΠΆΠ½ΠΎΠ³ΠΎ ΡΠ΅Π³Π° Π½Π΅ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½Ρ ΠΈΠ»ΠΈ Π²ΠΎΠ²ΡΠ΅ ΠΎΡΡΡΡΡΡΠ²ΡΡΡ. Π ΡΡΠΈΡ ΡΠ»ΡΡΠ°ΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π°ΡΡΠΈΠ±ΡΡΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»Π΅ΠΉ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ°. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΌΡ Ρ ΠΎΡΠΈΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΡΠ±ΠΎΡΠ° Π΄Π°Π½Π½ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΈΠ· ΡΠ΅Π³Π° <strong>:
Π‘Π½Π°ΡΠ°Π»Π° ΠΏΡΠΎΠ±ΡΠ΅ΠΌ Π±Π»ΠΈΠΆΠ°ΠΉΡΠ΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ, ΡΠΎ Π΅ΡΡΡ ΡΠ΅Π³ <span>. Π‘Π΅Π»Π΅ΠΊΡΠΎΡ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ°ΠΊ: span strong,Β ΡΠΎ Π΅ΡΡΡ Π½Π°ΠΌ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π½Π°ΠΏΠΈΡΠ°ΡΡ Π½Π°Π·Π²Π°Π½ΠΈΡ ΡΠ΅Π³ΠΎΠ² Π² Π½ΡΠΆΠ½ΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅ ΠΈ ΡΠ°ΠΊΠΎΠΉ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ Π²ΡΠ±Π΅ΡΠ΅Ρ Π²ΡΠ΅ ΡΠ΅Π³ΠΈ <strong>, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ Π² ΡΠ΅Π³Π΅ <span>. ΠΠ½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΠΈ Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»Π΅ΠΉ <h3>: h3 strong.Β
ΠΡ ΠΌΠΎΠΆΠ΅ΠΌ Π·Π°Π΄Π°ΡΡ ΠΈ Π±ΠΎΠ»Π΅Π΅ ΡΠ΅ΡΠΊΠΎΠ΅ ΡΡΠ»ΠΎΠ²ΠΈΠ΅, ΡΡΠΎ Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π²ΡΠ΅ ΡΠ΅Π³ΠΈ <strong>, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ Π² ΡΠ΅Π³Π΅ <span>. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΡΠΈΠΌΠ²ΠΎΠ» >: span > strong.Β
ΠΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ΅ΠΏΠΎΡΠΊΡ ΠΈΠ· Π½Π°Π·Π²Π°Π½ΠΈΠΉ ΡΠ΅Π³ΠΎΠ² ΠΈ ΠΈΡ Π°ΡΡΠΈΠ±ΡΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π² ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΌ ΠΈΡΠΎΠ³Π΅ ΡΠΊΠ°ΠΆΡΡ Π½Π° Π½ΡΠΆΠ½ΡΠΉ ΡΠ΅Π³: h3.font-header span span strong.
ΠΠ΅ΡΠΊΠΎΠ»ΡΠΊΠΎ CSS ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ² Π΄Π»Ρ ΠΎΠ΄Π½ΠΎΠΉ Π·Π°Π΄Π°ΡΠΈ —Β Π±ΡΠ²Π°Π΅Ρ, ΡΡΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΡΡΠ°Π·Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ² Π΄Π»Ρ ΡΠ±ΠΎΡΠ° ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠΎΠ±ΡΡΠΈΡ ΠΈΠ»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π°. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π½Π΅ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ Π½Π°ΡΡΡΠΎΠ΅ΠΊ Π² ΠΠ°ΡΡΠ΅ΡΠ΅ ΡΠ±ΠΎΡΠ° Π΄Π°Π½Π½ΡΡ , Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΏΡΠΎΠΏΠΈΡΠ°ΡΡ ΡΠ΅ΡΠ΅Π· Π·Π°ΠΏΡΡΡΡ Π²ΡΠ΅ Π½ΡΠΆΠ½ΡΠ΅ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ°ΠΊ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π½Π°ΡΡΡΠΎΠΉΠΊΠ° ΠΊΠ»ΠΈΠΊΠ° ΠΏΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π΅ΡΠ»ΠΈ ΠΏΠΎ ΡΠ°ΠΊΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ°ΡΡ ΠΎΠ΄Π½ΠΎ ΠΈ ΡΠΎ ΠΆΠ΅, Π½ΠΎ ΠΈΠΌΠ΅ΡΡ ΡΠ°Π·Π½ΡΠ΅ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ:
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π²ΡΠ΅ ΠΏΡΠΎΡΡΠΎ: ΠΌΡ ΠΈΠΌΠ΅Π΅ΠΌ Π²Π²ΠΈΠ΄Ρ 2 ΡΠ΅Π³Π°, ΠΊΠ»ΠΈΠΊ Π½Π° ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ΄ΡΡ Π·Π°ΠΏΠΈΡΡΠ²Π°ΡΡΡΡ Π² Ρ ΡΠΎΠ½ΠΎΠ»ΠΎΠ³ΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ, ΠΊΠ°ΠΊ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠ΅ ΡΠΎΠ±ΡΡΠΈΠ΅. ΠΠ΅ΡΠ²ΡΠΉ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ div.button input[type=»submit»] ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π½Π°ΠΌ Π½ΡΠΆΠ½Ρ Π²ΡΠ΅ ΡΠ΅Π³ΠΈ <input>, Π² ΠΊΠΎΡΠΎΡΡΡ Π΅ΡΡΡ Π°ΡΡΠΈΠ±ΡΡ type=»submit» ΠΈ ΠΎΠ½ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ²Π»ΡΡΡΡΡ Π΄Π΅ΡΡΠΌΠΈ ΡΠ΅Π³Π° <div>, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π΅ΡΡΡ Π°ΡΡΠΈΠ±ΡΡ. Π ΡΠΏΡΠΎΡΠ΅Π½Π½ΠΎΠΌ Π²Π°ΡΠΈΠ°Π½ΡΠ΅ ΡΡΠΎ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ°ΠΊ Π² html (Π½Π° ΡΠ°ΠΌΠΎΠΌ ΡΠ°ΠΉΡΠ΅, ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ, Π±ΡΠ΄Π΅Ρ Π±ΠΎΠ»ΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ Π²ΠΎΠΊΡΡΠ³):Β
<divΒ class=»button»>
<input type=»submit»></input>
</div>
Π’ΡΡ ΠΆΠ΅, ΡΠ΅ΡΠ΅Π· Π·Π°ΠΏΡΡΡΡ, ΠΏΡΠΎΠΏΠΈΡΠ°Π½ Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ: Π²ΡΠ΅ ΡΠ΅Π³ΠΈ <button> Ρ Π°ΡΡΠΈΠ±ΡΡΠΎΠΌ.
ΠΡΠΎΠ²Π΅ΡΠΊΠ° ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΠΎΡΡΠΈ CSS ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ°
Π£Π½ΠΈΠΊΠ°Π»ΡΠ½ΠΎΡΡΡ CSS ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ° Π΄Π»Ρ Π½Π°Ρ ΠΎΡΠ΅Π½Ρ Π²Π°ΠΆΠ½Π°. ΠΡΠ»ΠΈ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ ΠΏΡΠΎΠΏΠΈΡΠ°Π½ Π½Π΅Π²Π΅ΡΠ½ΠΎ ΠΈ ΠΎΠ½ Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΌ, ΡΠΎ ΡΠ±ΠΎΡ Π΄Π°Π½Π½ΡΡ Π±ΡΠ΄Π΅Ρ Π½Π΅ ΡΠΎΡΠ½ΡΠΌ, Π° Π·Π½Π°ΡΠΈΡ — Π±Π΅ΡΠΏΠΎΠ»Π΅Π·Π½ΡΠΌ.Β
ΠΡΠΎΠ²Π΅ΡΠΈΡΡ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΠΎΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΡΠΌΠΎ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ ΡΠ΅ΡΠ΅Π· ΠΏΠΎΠΈΡΠΊ Π² ΠΏΠ°Π½Π΅Π»Π΅ Elements. ΠΠ°ΠΆΠΌΠΈΡΠ΅ ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠ΅ ΠΊΠ»Π°Π²ΠΈΡ Ctrl + F, ΠΈ Π²Π²Π΅Π΄ΠΈΡΠ΅ Π² ΡΡΡΠΎΠΊΠ΅ ΠΏΠΎΠΈΡΠΊΠ° Π½Π°ΠΉΠ΄Π΅Π½Π½ΡΠΉ Π²Π°ΠΌΠΈ ΡΠ°Π½Π΅Π΅ CSS ΡΠ΅Π»Π΅ΠΊΡΠΎΡ. ΠΡΠ°ΡΠ·Π΅Ρ ΡΠ°ΠΌ ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠΈΡ ΡΠ΅Π³, ΠΏΡΡΡ ΠΊ ΠΊΠΎΡΠΎΡΠΎΠΌΡ Π²Ρ ΡΠΊΠ°Π·Π°Π»ΠΈ ΠΈ Π½Π°ΠΏΠΈΡΠ΅Ρ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠ°ΠΊΠΈΡ ΡΠΎΠ²ΠΏΠ°Π΄Π΅Π½ΠΈΠΉ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅.
Π Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ ΡΠ»ΡΡΠ°Π΅Π², ΡΠΎΠ²ΠΏΠ°Π΄Π΅Π½ΠΈΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½ΠΎ (Π±ΡΠ΄Π΅Ρ Π½Π°ΠΏΠΈΡΠ°Π½ΠΎ — 1/1). ΠΠ½ΠΎΠ³Π΄Π° ΡΡΠ΅Π±ΡΠ΅ΡΡΡ, ΡΡΠΎΠ±Ρ ΡΠΎΠ²ΠΏΠ°Π΄Π΅Π½ΠΈΠΉ Π±ΡΠ»ΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ, Π½ΠΎ Π²ΡΠ΅ ΠΎΠ½ΠΈ ΡΠΊΠ°Π·ΡΠ²Π°Π»ΠΈ Π½Π° Π½ΡΠΆΠ½ΡΠ΅ Π²Π°ΠΌ ΡΠ΅Π³ΠΈ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ «Π’ΠΎΠ²Π°ΡΡ Π² ΠΊΠΎΡΠ·ΠΈΠ½Π΅» ΠΏΠΎΠ΄ΡΡΠ³ΠΈΠ²Π°Π΅Ρ Π½Π°Π·Π²Π°Π½ΠΈΡ ΡΠΎΠ²Π°ΡΠΎΠ² ΠΈΠ· ΡΠΏΠΈΡΠΊΠ° ΡΠΎΠ²Π°ΡΠΎΠ² Π² ΡΠ°ΠΌΠΎΠΉ ΠΊΠΎΡΠ·ΠΈΠ½Π΅. ΠΡΠΈ Π½Π°ΡΡΡΠΎΠΉΠΊΠ΅ ΡΠ°ΠΊΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠΎΠ²ΠΏΠ°Π΄Π΅Π½ΠΈΠΉ ΠΏΠΎ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ°ΠΌ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΡΠ°Π²Π½ΡΡΡΡΡ ΡΠ΅Π°Π»ΡΠ½ΠΎΠΌΡ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Ρ ΡΠΎΠ²Π°ΡΠΎΠ² Π² ΠΊΠΎΡΠ·ΠΈΠ½Π΅ Π½Π° Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ.
ΠΠ°ΠΊ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ, ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ Π²Ρ Π½Π°ΡΡΡΠΎΠΈΠ»ΠΈ ΡΠ±ΠΎΡ Π΄Π°Π½Π½ΡΡ Π² Carrot quest, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π² ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅. ΠΡΠΈ Π»ΡΠ±ΡΡ ΡΠ»ΠΎΠΆΠ½ΠΎΡΡΡΡ — ΠΏΠΈΡΠΈΡΠ΅ Π½Π°ΠΌ Π² ΡΠ°Ρ, Π±ΡΠ΄Π΅ΠΌ ΡΠ°Π΄Ρ ΠΏΠΎΠΌΠΎΡΡ.
Π‘ΡΡΠ»ΠΊΠΈ ΠΏΡΠΎΡΠΈΠ² ΠΊΠ½ΠΎΠΏΠΎΠΊ Π² ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡΡ β CSS-LIVE
ΠΠ΅ΡΠ΅Π²ΠΎΠ΄ ΡΡΠ°ΡΡΠΈ Links vs. Buttons in Modern Web Applications Ρ ΡΠ°ΠΉΡΠ° marcysutton.com Π΄Π»Ρ CSS-live.ru, Π°Π²ΡΠΎΡ β ΠΠ°ΡΡΠΈ Π‘Π°ΡΡΠΎΠ½
Github: ΡΡΡΠ»ΠΊΠΈ ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ?
ΠΠ΄Π½Π° ΠΈΠ· Π²Π΅ΡΠ½ΡΡ
ΡΠ΅ΠΌ Π²ΠΎ ΡΡΠΎΠ½ΡΠ΅Π½Π΄-Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΠΈ β Π½Π΅ΡΠ°Π·Π±Π΅ΡΠΈΡ
Π° ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΡΠ»ΠΊΠ°ΠΌΠΈ ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ. ΠΡ, HTML-ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΡΠΊΡΡΠ²Π°ΡΡ ΡΡΡΠ»ΠΊΠΈ Π² Π½ΠΎΠ²ΠΎΠΌ ΠΎΠΊΠ½Π΅ ΠΈΠ»ΠΈ ΠΎΡΠΏΡΠ°Π²Π»ΡΡΡ ΡΠΎΡΠΌΡ, Π·Π½Π°Π΅ΡΠ΅? Π Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡΡ
Π½Π° JavaScript ΠΌΡ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ ΠΏΡΡΠ°Π΅ΠΌΡΡ, ΠΊΠ°ΠΊΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²ΡΠ±ΡΠ°ΡΡ Π΄Π»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ. Π§ΡΠΎΠ±Ρ ΡΠ°Π·Π²Π΅ΡΡΡ ΡΡΠΌΠ°Π½, Ρ ΠΏΠΎΠΊΠ°ΠΆΡ ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π΄Π»Ρ ΡΡΡΠ»ΠΎΠΊ ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡΡ
Ρ ΠΎΡΡΠΈΡΠΎΠ²ΠΊΠΎΠΉ Π½Π° ΠΊΠ»ΠΈΠ΅Π½ΡΠ΅ ΠΈ ΠΏΠΎΠΌΠΎΠ³Ρ Π²Π°ΠΌ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ Π»ΡΡΡΠΈΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΡ Ρ ΡΠΎΡΠΊΠΈ Π·ΡΠ΅Π½ΠΈΡ UI.
ΠΠ½ΠΎΠΏΠΊΠΈ
ΠΠΎΡΠ΅ΠΌΡ-ΡΠΎ Π»ΡΠ΄ΠΈ ΡΡΠ°Π½ΠΎΠ²ΡΡΡΡ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌΠΈ,ΡΠ°ΠΊ ΠΈ Π½Π΅ ΡΠ·Π½Π°Π² ΠΏΡΠΎ HTML-ΡΠ»Π΅ΠΌΠ΅Π½Ρ <button>. (ΠΠ½Π΅ ΠΈ ΡΠ°ΠΌΠΎΠΉ ΠΏΠΎΡΡΠ΅Π±ΠΎΠ²Π°Π»ΠΎΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π»Π΅Ρ, ΠΏΠΎΠΊΠ° Ρ ΡΠ·Π½Π°Π»Π°, Π΄Π»Ρ ΡΠ΅Π³ΠΎ Π½ΡΠΆΠ½Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ h2-h6, ΡΠ°ΠΊ ΡΡΠΎ Π±ΡΠ²Π°Π΅Ρ). ΠΠΎΠ³ΡΡΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΈ ΠΏΡΠ°Π²Π΄Π° ΠΊΡΡΡΠ°Ρ. ΠΠΎΡ ΡΡΠΎ ΠΎΠ½Π° ΠΌΠΎΠΆΠ΅Ρ Π΄Π΅Π»Π°ΡΡ:
- ΠΠΎΠ»ΡΡΠ°ΡΡ ΡΠΎΠΊΡΡ Ρ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ
- ΠΠ΅Π»Π°ΡΡ Β«ΠΊΠ»ΠΈΠΊΒ» ΠΏΠΎ Π½Π°ΠΆΠ°ΡΠΈΡ Π½Π° ΠΏΡΠΎΠ±Π΅Π»
- ΠΡΠΏΡΠ°Π²Π»ΡΡΡ Π΄Π°Π½Π½ΡΠ΅ ΡΠΎΡΠΌΡ Π½Π° ΡΠ΅ΡΠ²Π΅Ρ
- ΠΡΠΈΡΠ°ΡΡ ΡΠΎΡΠΌΡ
- ΠΠ»ΠΎΠΊΠΈΡΠΎΠ²Π°ΡΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π°ΡΡΠΈΠ±ΡΡΠ°
disabled
- ΠΠ°Π²Π°ΡΡ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΡ ΡΠΊΡΠΈΠ½ΡΠΈΠ΄Π΅ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π½Π΅ΡΠ²Π½ΠΎΠ³ΠΎ Π°ΡΡΠΈΠ±ΡΡΠ°
role="button"
- ΠΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ
βΆfocus
,βΆhover
,βΆactive
,βΆdisabled
ΠΡΠ»ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠΊΡΠΈΠΏΡΠ°,ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΈΠ΄Π΅Π°Π»ΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π΄Π»Ρ:
- ΠΡΠΊΡΡΠ²Π°Π½ΠΈΡ ΠΌΠΎΠ΄Π°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΎΠΊΠ½Π°
- ΠΡΠ·ΠΎΠ²Π° Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ
- ΠΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°
- ΠΡΠΎΠΈΠ³ΡΡΠ²Π°Π½ΠΈΡ ΠΌΠ΅Π΄ΠΈΠ°-ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°
- ΠΡΡΠ°Π²ΠΊΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ JS Π² ΡΠ»ΡΡΠ°Π΅, Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΈ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ JS
Π‘ΡΡΠ»ΠΊΠΈ
ΠΠΎΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π±Π°Π·ΠΎΠ²ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ ΡΡΡΠ»ΠΎΠΊ, ΠΈΠ»ΠΈ ΡΠΊΠΎΡΠ΅ΠΉ, ΠΈΠ»ΠΈ ΡΡΠ½Π΄Π°ΠΌΠ΅Π½ΡΠ° Π²Π΅Π±Π°:
- Π‘ΠΎΠ·Π΄Π°Π²Π°ΡΡ Π³ΠΈΠΏΠ΅ΡΡΠ΅ΠΊΡΡ,Β ΡΠ΅ΡΡ ΠΎΠ½Π»Π°ΠΉΠ½-ΡΠ΅ΡΡΡΡΠΎΠ²
- ΠΠ΅ΡΠ΅Π²Π΅ΡΡΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π° Π½ΠΎΠ²ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈΠ»ΠΈ ΠΎΠΊΠ½ΠΎ
- ΠΠ·ΠΌΠ΅Π½ΡΡΡ URL
- ΠΡΠ·Π²Π°ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ½ΡΠ΅ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠΎΠ²ΠΊΡ/ΠΏΠ΅ΡΠ΅Π·Π°Π³ΡΡΠ·ΠΊΡ
- ΠΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΡΡ ΠΏΠΎ ΡΠΊΠΎΡΡΠΌ Π²Π½ΡΡΡΠΈ ΡΡΡΠ°Π½ΠΈΡΡ
- Π‘Π²ΡΠ·ΡΠ²Π°ΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠΎΠ±ΠΎΠΉ ΡΠ°Π·Π½ΡΠ΅ ΡΠ°ΡΡΠΈ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Ρ ΠΎΡΡΠΈΡΠΎΠ²ΠΊΠΎΠΉ Π½Π° ΠΊΠ»ΠΈΠ΅Π½ΡΠ΅
- Π‘ΠΏΠΎΡΠΎΠ±Π½Ρ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ ΡΠΎΠΊΡΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π°ΡΡΠΈΠ±ΡΡΠ°
href
- Π Π΅Π³ΠΈΡΡΡΠΈΡΡΡΡ ΠΊΠ»ΠΈΠΊ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ»Π°Π²ΠΈΡΠΈ
Enter
- ΠΠΌΠ΅ΡΡ Π½Π΅ΡΠ²Π½ΡΡ ΡΠΎΠ»Ρ link
- ΠΠ΅ Π±Π»ΠΎΠΊΠΈΡΡΡΡΡΡ ΠΊΠ°ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π½ΠΎ ΠΈΡ
ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Π½Π΅Π°ΠΊΡΠΈΠ²Π½ΡΠΌΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ
tabindex="-1"
ΠΈaria-hidden="true"
- ΠΠΎΠ³ΡΡ ΠΎΡΠΊΡΡΠ²Π°ΡΡΡΡ Π² Π½ΠΎΠ²ΡΡ ΠΎΠΊΠ½Π°Ρ (Π° ΡΠ°Π½ΡΡΠ΅ β ΠΈ Π²ΠΎ ΡΡΠ΅ΠΉΠΌΠ°Ρ )
- ΠΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ
βΆlink
,βΆvisited
,βΆfocus
,βΆhover
,βΆactive
ΠΠΈΡΠ½ΠΎ Π΄Π»Ρ ΠΌΠ΅Π½Ρ ΡΠ°ΠΌΠΎΠ΅ Π³Π»Π°Π²Π½ΠΎΠ΅ ΡΠ°Π·Π»ΠΈΡΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΡΠ»ΠΊΠΎΠΉ ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ β ΡΠΎ, ΡΡΠΎ ΡΡΡΠ»ΠΊΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π° Π½ΠΎΠ²ΡΠΉ ΡΠ΅ΡΡΡΡ, ΡΠ½ΠΎΡΡ Π΅Π³ΠΎ ΠΈΠ· ΡΠ΅ΠΊΡΡΠ΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ° (Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΡΡΡΠ»ΠΊΠΈ β Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½Π°Ρ Π·Π°Π³Π²ΠΎΠ·Π΄ΠΊΠ° Π·Π΄Π΅ΡΡ).
ΠΠ½ΠΎΠΏΠΊΠ° ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°Π΅Ρ ΡΡΠΎ-ΡΠΎ Π² ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ΅, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π²ΠΈΠ΄Π΅ΠΎ-ΠΏΠ»Π΅Π΅Ρ,Β ΠΈΠ»ΠΈ Π²ΡΠ·ΡΠ²Π°Π΅Ρ Π½ΠΎΠ²ΡΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π² ΡΠΎΠΌ ΠΆΠ΅ ΡΠ°ΠΌΠΎΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠ΅Π΅aria-haspopup
.Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ? Π ΡΡΠΎ ΠΌΠ°ΡΡΡΡΡΠΈΠ·Π°ΡΠΈΡ?
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ URL ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄ΠΈΡ Π½Π° Π½ΠΎΠ²ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡΠΎ ΠΏΠ΅ΡΠ΅Π·Π°Π³ΡΡΠΆΠ°Π΅Ρ Π±ΡΠ°ΡΠ·Π΅Ρ Ρ Π½ΠΎΠ²ΡΠΌ ΡΠ΅ΡΡΡΡΠΎΠΌ ΠΈ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠΎΠ²ΡΠ²Π°Π΅Ρ ΠΏΠΈΠΊΡΠ΅Π»ΠΈ. ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΡ ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ·ΡΠ²Π°ΡΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ ΡΠΎΡΠΌΡ, ΡΠΊΠΎΡΠ½ΡΡ
ΡΡΡΠ»ΠΎΠΊ ΠΈ JavaScript-ΡΠ²ΠΎΠΉΡΡΠ²Π° location
.
ΠΠΎΠ΄ΠΎΠ±Π½ΠΎ ΡΠΎΡΡΠΈΡΠΎΠ²ΠΊΠ΅ ΠΏΠΈΡΠ΅ΠΌ Π½Π° ΠΏΠΎΡΡΠ΅, ΠΌΠ°ΡΡΡΡΡΠΈΠ·Π°ΡΠΈΡ β ΠΌΠ΅Ρ Π°Π½ΠΈΠ·ΠΌ Π΄Π»Ρ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΡΠ΅ΡΠ΅Π²ΡΡ Π·Π°ΠΏΡΠΎΡΠΎΠ² Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΌ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ. ΠΠ°ΡΡΡΡΡΠΈΠ·Π°ΡΠΎΡΡ β ΠΎΠ±ΡΠ°Ρ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡ Π΄Π»Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²Π° ΡΠ°Π·Π½ΡΡ Π²Π΅Π±-ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΎΠ² (ΠΏΠΎΠΌΠ½Ρ, ΠΊΠ°ΠΊ Π½Π° Π·Π°ΡΠ΅ ΡΠ²ΠΎΠ΅ΠΉ ΠΊΠ°ΡΡΠ΅ΡΡ Ρ Π±Π°Π»Π΄Π΅Π»Π° ΠΎΡ PHPΡΠ½ΡΡ ), ΡΡΠ°Π²ΡΡΠ°Ρ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΡ ΠΈ ΠΈΡ ΡΠ°ΡΡΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΌ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠ°ΠΌ URL. ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΡ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΡ ΠΌΠ°ΡΡΡΡΡΠΎΠ², Π½ΠΎΠ²ΡΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈ (Π±Π΅Π· Ρ Π°ΡΠ΄ΠΊΠΎΠ΄Π°)
ΠΡΠΊΡΠ΄Π° Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ ΠΏΡΡΠ°Π½ΠΈΡΠ°?
Π ΠΌΠΈΡΠ΅ ΠΊΠ»ΠΈΠ΅Π½ΡΡΠΊΠΈΡ Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΠΏΠΎΡΡΡΠΎΠ΅Π½Π½ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Angular, Ember ΠΈΠ»ΠΈ React, Π±ΡΠ°ΡΠ·Π΅ΡΠ½Π°Ρ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠΎΠ²ΠΊΠ° ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ·Π²Π°ΡΡΡΡ Π² Π»ΡΠ±ΠΎΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ. ΠΠ΅ΠΌΠ½ΠΎΠ³ΠΎ Π½Π΅ΡΡΠ½ΠΎ, ΠΊΠ°ΠΊΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π»ΡΡΡΠ΅ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ Π΄Π΅Π»Π°, ΠΊΠΎΠ³Π΄Π° Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ ΡΠΎΡ ΠΆΠ΅ ΠΊΠΎΠ΄, ΡΡΠΎ Π΄Π»Ρ ΠΌΠ°ΡΡΡΡΡΠ°, Π½ΠΎ Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠΌ ΠΊΠ»ΠΈΠΊΠ° ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ Π±Π΅Π· ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ URL. Π ΠΏΡΠΈΠΌΠ΅ΡΡ, Π΅ΡΠ»ΠΈ Ρ ΠΎΡΠΊΡΡΠ²Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ Π½Π°Π΄ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠΈΠΌ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ ΡΡΡΠ°Π½ΠΈΡΡ, Ρ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠΆΡ ΡΡΠ΄Π° ΠΈΠ»ΠΈ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°Ρ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ? ΠΠ°Π²ΠΈΡΠΈΡ Π»ΠΈ ΡΡΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, Π΅ΡΡΡ Π»ΠΈ Ρ ΡΡΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ ΡΠ²ΠΎΠΉ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ URL? ΠΠΎΡ ΠΊΠΎΠ΄, ΠΊΠΎΡΠΎΡΡΠΉ Ρ Π²ΠΈΠ΄Π΅Π»Π° Π½Π΅Π΄Π°Π²Π½ΠΎ:
<a href="#" tabindex="0" ng-click="userPicker.userClicked(true)" aria-label="Some username"></a>
ΠΠΎ ΠΏΠ΅ΡΠ²ΠΎΠΌΡ Π²ΠΏΠ΅ΡΠ°ΡΠ»Π΅Π½ΠΈΡ Ρ ΠΏΠΎΡΡΠΈΡΠ°Π»Π°, ΡΡΠΎ ΡΡΠΎ Π½Π°Π΄ΠΎ Π·Π°ΠΌΠ΅Π½ΠΈΡΡ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ button
, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π½Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π² href
, Π½ΠΎ Π΅ΡΡΡ tabindex="0"
ΠΈ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠ° ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ° ng-click
. ΠΡΠ³Π»ΡΠ΄ΠΈΡ ΠΎΡΠ΅Π²ΠΈΠ΄Π½ΠΎ, Π΄Π°? ΠΠ½Π΅ ΡΠΊΠ°Π·Π°Π»ΠΈ, ΡΡΠΎ ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΡΡΠ°Π²Π°ΡΡΡΡ ΡΠΊΠΎΡΠ΅ΠΌ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Β«ΠΎΠ½ ΠΏΠ΅ΡΠ΅Π½Π°ΠΏΡΠ°Π²Π»ΡΠ΅Ρ Π½Π° Π²Π½Π΅ΡΠ½ΠΈΠ΅ ΡΡΡΠ»ΠΊΠΈ ΠΈ ΡΡΡΠ°Π½ΠΈΡΡ ΠΏΡΠΎΡΠΈΠ»ΡΒ». ΠΡΠΎ ΡΡΠ°Π»ΠΎ ΡΡΠ½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΡΠ»Π΅ ΠΈΠ·ΡΡΠ΅Π½ΠΈΡ JavaScript-ΠΊΠΎΠ΄Π°, ΠΊΠΎΡΠΎΡΡΠΉ Π²ΡΠ·ΡΠ²Π°Π΅ΡΡΡ Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ
ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΡ
ΠΌΠ΅ΡΡΠ°Ρ
ΠΏΠΎ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠ΅ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ° ng-click
Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅ button
. ΠΠ΅ΡΠΆΠ΅Π»ΠΈ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ Π½Π°Π΄ΠΎ ΡΠ°ΠΊ Π³Π»ΡΠ±ΠΎΠΊΠΎ ΠΊΠΎΠΏΠ°ΡΡ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΌΠΎΡΡ Π²ΡΠ±ΡΠ°ΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ?
ΠΡΠ»ΠΈ Π² ΡΠΈΡΡΠΎ ΠΊΠ»ΠΈΠ΅Π½ΡΡΠΊΠΎΠΌ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ ΡΠΎΠΊΡΡ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°Π΅ΡΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ, ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π½Π΅ ΡΠΊΠ°Π·Π°ΡΡΡΡ Π½Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ β Ρ ΡΡΡΠ»ΠΊΠΈ ng-click
ΠΈ tabindex
ΠΎΡΡΠ°Π½Π΅ΡΡΡ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ Π½Π΅ΡΠ²Π½Π°Ρ ΡΠΎΠ»Ρ ΡΡΡΠ»ΠΊΠΈ. ΠΠ΄Π½Π°ΠΊΠΎ,ΠΏΡΠΈ Π΄Π΅ΠΊΠ»Π°ΡΠ°ΡΠΈΠ²Π½ΠΎΠΌ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄Π΅ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ Π»ΡΡΡΠ΅ Π±ΡΠ»ΠΎ Π±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½Π½ΡΠΉ href
ΠΈ ΠΌΠ°ΡΡΡΡΡΠΈΠ·Π°ΡΠΈΡ, Π΅ΡΠ»ΠΈ ΡΠΊΠΎΡΡ ΠΏΠ΅ΡΠ΅Π½Π°ΠΏΡΠ°Π²Π»ΡΠ΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π° Π½ΠΎΠ²ΡΠΉ ΡΠ΅ΡΡΡΡ. Tabindex ΠΈ ΡΠΎΠ±ΡΡΠΈΡ click
, ΠΏΡΠΈΠ²ΡΠ·Π°Π½Π½ΡΠ΅ ΠΊ ΡΠ΅Π³Ρ ΡΡΡΠ»ΠΊΠΈ β Π°Π½ΡΠΈΠΏΠ°ΡΠ΅ΡΠ½ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠΉ Π΅ΡΠ΅ Π°ΡΠΊΠ½Π΅ΡΡΡ ΡΠ΅ΠΌ, ΠΊΡΠΎ ΠΏΠΎΠ·Π΄Π½Π΅Π΅ Π±ΡΠ΄Π΅Ρ ΠΏΠΈΡΠ°ΡΡ ΠΊΠΎΠ΄ ΠΈ ΠΏΡΠΎΠ²Π΅ΡΡΡΡ Π΅Π³ΠΎ.
ΠΡΠ»ΠΈ Π΄Π΅Π»Π°ΡΡ ΠΌΠ°ΡΡΡΡΡΠΈΠ·Π°ΡΠΈΡ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΡΠ°ΡΡΡΡ Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, ΡΠΎ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌ Π±ΡΠ΄Π΅Ρ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΡΠ»ΠΊΠΈ ΠΈ ΠΏΠΎΠ½ΡΡΡ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΎΠΊ. Π Π΅ΡΠ΅ Ρ Π½ΠΈΠΌ ΠΏΡΠΎΡΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠ΅ΡΠ²Π΅ΡΠ½ΡΠ΅ JavaScript-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Ρ ΠΏΡΠΎΠ³ΡΠ΅ΡΡΠΈΠ²Π½ΡΠΌ ΡΠ»ΡΡΡΠ΅Π½ΠΈΠ΅ΠΌ, ΠΏΠΎΠ»ΡΠ·ΡΡΡΡ ΡΠ°Π±Π»ΠΎΠ½Π°ΠΌΠΈ URL, Π° Π½Π΅ ΠΏΠΎΠ»Π°Π³Π°ΡΡΡ Π½Π° ΡΠΎΠ±ΡΡΠΈΡ ΠΏΠΎ ΠΊΠ»ΠΈΠΊΡ.
Π ΠΎΠ»Ρ UX Π² ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅ Π΄ΠΎΡΡΡΠΏΠ½ΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ
Π― ΡΠΊΠ°ΠΆΡ ΡΡΠΎ Π²ΡΠ»ΡΡ : ΡΡΠ° ΠΏΡΡΠ°Π½ΠΈΡΠ° ΡΠ°ΡΡΠΎ Π½Π°ΡΠΈΠ½Π°Π΅ΡΡΡ Ρ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ UX. ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΡ ΠΊ Π½Π°ΠΌ Ρ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΡΠΌΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°, ΠΈ β ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΡΠ°ΠΊ Π½Π°Π΄ΠΎ β Π² ΠΊΠΎΠ΄Π΅ ΠΎΠ½ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΡΡΡΠ»ΠΊΠ°ΠΌΠΈ. ΠΠ΄Π΅ ΡΡΠΎ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠΎΠΉ?
ΠΡΠ»ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΡΠΊΡΠΈΠ½ΡΠΈΠ΄Π΅ΡΠ° ΠΎΠ±ΡΠ°ΡΠΈΡΡΡ Π² ΡΠ΅Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ ΠΈ ΠΏΠΎΠ»ΡΡΠΈΡ ΠΈΠ½ΡΡΡΡΠΊΡΠΈΡ Β«ΠΊΠ»ΠΈΠΊΠ½ΡΡΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡΒ» Π² Π²Π°ΡΠ΅ΠΌ UI, ΠΊΠΎΡΠΎΡΠ°Ρ Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ Π½Π°ΠΏΠΈΡΠ°Π½Π° Π² ΠΊΠΎΠ΄Π΅ ΠΊΠ°ΠΊ ΡΡΡΠ»ΠΊΠ°, Π΄Π»Ρ Π½Π΅Π³ΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΎΠΊΠ°Π·Π°ΡΡΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠΎΠΉ Π½Π°ΠΉΡΠΈ Π΅Π΅. ΠΠ΅ Π·Π°Π±ΡΠ²Π°ΠΉΡΠ΅ ΠΈ ΠΎ Π³ΠΎΠ»ΠΎΡΠΎΠ²ΡΡ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°Ρ : Π΅ΡΠ»ΠΈ Π²Ρ ΠΏΡΠΎΠΈΠ·Π½Π΅ΡΡΡΠ΅ ΠΊΠΎΠΌΠ°Π½Π΄Ρ ΠΊΠ»ΠΈΠΊΠ½ΡΡΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π² ΠΊΠΎΠ΄Π΅ ΠΏΠΎΡ ΠΎΠΆΠ° Π½Π° ΡΡΡΠ»ΠΊΡ, Π²Ρ ΡΡΠΎΠ»ΠΊΠ½Π΅ΡΠ΅ΡΡ Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°ΠΌΠΈ, Π½Π΅Ρ?
Π€ΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΈ, ΠΏΠΎ ΠΎΠ±ΡΠ΅ΠΌΡ ΠΏΡΠΈΠ·Π½Π°Π½ΠΈΡ, ΡΡΠΈΡΠ°ΡΡ ΡΡΡ Π³ΡΠ°Π½Ρ ΠΈ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΏΠΎΡΠΎΠ±ΡΡΠ²ΡΡΡ Π²ΡΠ±ΠΎΡΡ Π½Π΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΊΠ°ΠΊ Π² ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Ρ ng-click
Π²ΡΡΠ΅. ΠΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ JavaScript Π΄Π»Ρ Π·Π°ΠΏΡΡΠΊΠ° Π°ΡΠΈΠ½Ρ
ΡΠΎΠ½Π½ΠΎΠΉ ΠΎΡΠΏΡΠ°Π²ΠΊΠΈ ΡΠΎΡΠΌΡ Π½Π° Π½ΡΠΆΠ½ΠΎΠΌ Π½Π°ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅ (Π΄Π°ΠΆΠ΅ Π±Π΅Π· ΡΠ΅Π³Π° <form>
, Π½ΠΎ ΡΡΠΎ Π΅ΡΠ΅ Π½Π΅ ΠΏΠΎΠ²ΠΎΠ΄ ΠΎΡ Π½Π΅Π³ΠΎ ΠΎΡΠΊΠ°Π·ΡΠ²Π°ΡΡΡΡ). ΠΠ½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎ, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ½ΠΈΡΠΈΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΡ Π±Π΅Π· ΠΌΠ°ΡΡΡΡΡΠΈΠ·Π°ΡΠΈΠΈ, Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ ΠΈΡ
Π»ΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΡΠ»ΠΊΠΈ. ΠΠ΄Π½ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΡΡ Π² ΠΎΠ΄Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, Π΄ΡΡΠ³ΠΈΠ΅ β Π² Π΄ΡΡΠ³ΠΎΠΌ: Π²ΡΡ Π΄Π΅Π»ΠΎ Π² ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½Π°ΡΠΈΠ²Π½ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΡΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΠΎ ΠΌΠ°ΠΊΡΠΈΠΌΡΠΌΡ.
ΠΠ°ΠΌΠ΅ΡΠΈΠ»ΠΈ ΡΠ°Π·Π½ΠΈΡΡ?
Π§ΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ?
ΠΠ΅ΡΠ½ΠΈΡΠ΅ΡΡ ΠΊ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ ΠΈ ΡΠ΄Π΅Π»Π°ΠΉΡΠ΅ ΡΡΡΠ»ΠΊΠΈ ΠΏΠΎΡ
ΠΎΠΆΠΈΠΌΠΈ Π½Π° ΡΡΡΠ»ΠΊΠΈ, Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ β Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΠ΅Π· Π΄Π²ΡΡΠΌΡΡΠ»Π΅Π½Π½ΠΎΡΡΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌ ΡΡΠ°Π½Π΅Ρ Π»Π΅Π³ΡΠ΅ ΠΏΠΈΡΠ°ΡΡ Π±ΠΎΠ»Π΅Π΅ Π΄ΠΎΡΡΡΠΏΠ½ΡΠΉ ΠΊΠΎΠ΄, Π»ΡΡΡΠ΅ ΠΎΡΠ²Π΅ΡΠ°ΡΡΠΈΠΉ ΠΎΠΆΠΈΠ΄Π°Π½ΠΈΡΠΌ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ.
Π ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅:
- ΠΡΠ»ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΡΠΊΡΠΈΠ½ΡΠΈΠ΄Π΅ΡΠ° ΠΏΠ΅ΡΠ΅ΠΉΠ΄Π΅Ρ ΡΠ°Π±ΠΎΠΌ Π½Π° ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΏΠΎΠ΄ΡΠΊΠ°ΠΆΠ΅Ρ Π»ΠΈ ΡΠΎΠ»Ρ ΡΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΡΠ΅Π³ΠΎ ΠΎΡ Π½Π΅Π³ΠΎ ΠΆΠ΄Π°ΡΡ? (Π£Π²ΠΎΠ΄ΠΈΡ Π»ΠΈ ΠΎΠ½ ΠΊΡΠ΄Π°-ΡΠΎ Ρ ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΡ? ΠΠ± ΡΡΠΎΠΌ Ρ ΠΎΡΠΎΡΠΎ Π±Ρ ΡΠ·Π½Π°ΡΡ Π·Π°ΡΠ°Π½Π΅Π΅.)
- ΠΡΠΊΠ»ΡΡΠ°Π΅ΡΠ΅ ΡΡΡΠ»ΠΎΡΠ½ΡΠ΅ ΡΠΈΡΠΈ ΡΠΈΠΏΠ° ΡΠΌΠ΅Π½Ρ URL ΠΈΠ»ΠΈ ΠΏΡΠ°Π²ΠΎΠ³ΠΎ ΠΊΠ»ΠΈΠΊΠ°? ΠΠΎΠ΄ΡΠΌΠ°ΠΉΡΠ΅ ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ΅.
- ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΠΉΡΠ΅ ΠΌΠ°ΡΡΡΡΡΠΈΠ·Π°ΡΠΈΡ Π² Π²Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ
href
,ng-href
, ΠΈ ΡΠ°ΠΊ Π΄Π°Π»Π΅Π΅. - ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΡ ΠΏΠΎ ΡΡΡΠ°Π½ΠΈΡΠ°ΠΌ Π·Π°ΡΠ»ΡΠΆΠΈΠ²Π°Π΅Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΈ ΠΈΡΡΠΎΡΠΈΠΈ.
ΠΡΠΎ Π΅ΡΡ Π½Π΅ ΠΊΠΎΠ½Π΅Ρ.
Π£Π²Π΅ΡΠ΅Π½Π°, ΡΡΠΎ ΠΊ ΡΡΠΎΠΉ ΡΠ΅ΠΌΠ΅ ΠΏΡΠΈΠ΄Π΅ΡΡΡ Π²Π΅ΡΠ½ΠΎ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°ΡΡΡΡ ΡΠ½ΠΎΠ²Π° ΠΈ ΡΠ½ΠΎΠ²Π°, ΠΊΠ°ΠΊ ΠΈ Π²ΡΠ΅ ΡΡΠΈ Π³ΠΎΠ΄Ρ. ΠΠΎΠΏΠ»ΠΎΡΠ°Ρ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ Π² ΠΊΠΎΠ΄Π΅, Π²Π°ΠΌ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ°Π· ΠΏΡΠΈΠ΄Π΅ΡΡΡ Ρ ΡΡΡΠ΄ΠΎΠΌ Π²ΡΠ±ΠΈΡΠ°ΡΡ, ΠΊΠ°ΠΊΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠΉ Π² Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅β¦ ΠΈ Π΅ΡΡΡ ΡΠΉΠΌΠ° ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΡΠ΄Π΅Π»Π°ΡΡ ΠΎΠ΄Π½ΠΎ ΠΈ ΡΠΎ ΠΆΠ΅. Π Π΅ΡΠ»ΠΈ ΠΏΡΠΈ ΡΡΠΎΠΌ Π²Ρ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅ΡΠ΅ ΠΊΠΎΠΌΠΏΠ΅ΡΠ΅Π½ΡΠ½ΡΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΡ, ΡΠΎ ΡΡΠΎ Π»ΡΡΡΠ΅Π΅, ΡΡΠΎ Π² Π²Π°ΡΠΈΡ ΡΠΈΠ»Π°Ρ .
Π Π°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠΌ ΠΏΡΠ΅Π΄ΡΡΠΎΠΈΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ ΠΊΠΎΠ΄ΠΎΠΌ ΠΏΠΎΡΠ»Π΅ Π²Π°Ρ, Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ Π΄Π΅ΠΊΠ»Π°ΡΠ°ΡΠΈΠ²Π½ΠΎΡΡΠΈ ΡΠΌΠΎΠ³ΡΡ Π»Π΅Π³ΡΠ΅ ΠΎΡΠ²ΠΎΠΈΡΡ ΡΡΡ Π½Π°ΡΠΊΡ. Π ΡΠ°ΠΌΠΎΠ΅ Π³Π»Π°Π²Π½ΠΎΠ΅, ΠΏΠΎΠ΄ΡΠΌΠ°ΠΉΡΠ΅ ΠΎΠ± ΠΎΠΆΠΈΠ΄Π°Π½ΠΈΡΡ Π²Π°ΡΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ ΠΎΡ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ, Π° Π½Π΅ Π±ΡΠΎΡΠ°ΠΉΡΠ΅ΡΡ Ρ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° Π² ΠΊΡΠ°ΠΉΠ½ΠΎΡΡΠΈ. ΠΠΎΠ³Π΄Π° ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ ΠΈΠ½ΡΡΠΈΡΠΈΠ²Π½ΠΎ ΠΏΠΎΠ½ΡΡΠ΅Π½, ΠΎΠ½ ΠΌΠ΅Π½ΡΡΠ΅ Π½Π°ΠΏΡΡΠ³Π°Π΅Ρ, ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΎΡΡΠ°ΡΡΡΡ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½Ρ.
ΠΠ΅Π½Π΅ΡΠ°ΡΠΎΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ CSSP.S. ΠΡΠΎ ΡΠΎΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ:
| ΠΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ½ΡΠ΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ
ΠΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ½ΡΠ΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ
ΠΡΠΎ Π²ΡΡΠΎΠΊΠΎΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Π΄Π»Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΈΠ½ΡΡΠΈΡΠΈΠ²Π½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ.
Π¦Π²Π΅Ρ ΡΠΎΠ½Π°, Π³ΡΠ°Π΄Π°ΡΠΈΡ ΡΠΎΠ½Π°, ΡΠ΅Π½Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ (ΡΠ΅Π½Ρ Π±Π»ΠΎΠΊΠ°), ΡΠ΅Π½Ρ ΡΠΈΠΌΠ²ΠΎΠ»Π° (ΡΠ΅Π½Ρ ΡΠ΅ΠΊΡΡΠ°), ΡΠ°Π·ΠΌΠ΅Ρ (ΡΠΈΡΠΈΠ½Π°, Π²ΡΡΠΎΡΠ°), Π³ΡΠ°Π½ΠΈΡΠ° (Π³ΡΠ°Π½ΠΈΡΠ°), Π·Π°ΠΊΡΡΠ³Π»Π΅Π½Π½ΡΠ΅ ΡΠ³Π»Ρ (Π³ΡΠ°Π½ΠΈΡΠ°-ΡΠ°Π΄ΠΈΡΡ), ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄Ρ (Π°Π½ΠΈΠΌΠ°ΡΠΈΡ) ΠΈ Ρ. Π΄.
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΡ (Π΄ΠΎ, ΠΏΠΎΡΠ»Π΅), Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΌΡΡΠΈ (Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅) ΠΈ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎΡΠ»Π΅ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΌΡΡΠΈ, ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ.
20 ΡΠΈΠΏΠΎΠ² ΠΎΠ±ΡΠ°Π·ΡΠΎΠ² Π£ Π½Π°Ρ Π΅ΡΡΡ Π²ΡΡΠ΅ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Π½ΠΎΠ΅!
ΠΠ±ΡΠ°Π·Π΅Ρ ΡΠΏΠΈΡΠΊΠ°. ΠΡΠ±Π΅ΡΠΈΡΠ΅ ΡΠΎΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΠΎΡΠ½ΠΎ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΎΠ³ΠΎ, ΡΡΠΎ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ. ΠΠΎΠΆΠ½ΠΎ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΠΏΠΎΡΠ»Π΅ Π²ΡΠ±ΠΎΡΠ°.
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΠΏΡΠΈ Π²ΡΠ±ΠΎΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ° Π² ΡΠΏΠΈΡΠΊΠ΅ ΠΎΠ±ΡΠ°Π·ΡΠΎΠ² Π²ΡΠ΅ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΡΠ΅ΠΌΡΠ΅ Π΄Π°Π½Π½ΡΠ΅ Π±ΡΠ΄ΡΡ ΠΏΠ΅ΡΠ΅Π·Π°ΠΏΠΈΡΠ°Π½Ρ.
γγΏγ³
Π‘ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
γγΏγ³
Π‘ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
- 900 04 γγΏγ³
Π‘ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ
γγΏγ³
Π‘ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
γγΏγ³
Π‘ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
- 9000 4 γγΏγ³
Π‘ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
γγΏγ³
γγΏγ³
γγΏγ³
Π‘ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ
γγΏγ³
γγΏγ³
γγΏγ³
Π‘ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ 900 03
γγΏγ³
Π‘ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
γγΏγ³
Π‘ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
γγΏγ³
Π‘ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
- 9000 4 γγΏγ³
Π‘ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
γγΏγ³
Π‘ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
γγΏγ³
Π‘ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
γγΏγ³
Π‘ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
γγΏγ³
Π‘ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
- 900 04 γγΏγ³
Π‘ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ
γγΏγ³
Π‘ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
γγΏγ³
Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π²ΠΊΠ»ΡΡΠ΅Π½Π°
900 04 . original-button {
Β Β display: flex;
Β Β align-items: center;
Β Β Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅-ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°: ΠΏΠΎ ΡΠ΅Π½ΡΡΡ;
Β Β line-height: 1;
Β Β text-decoration: Π½Π΅Ρ;
Β Β ΡΠ²Π΅Ρ: #ffffff;
Β Β ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°: 18 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Β Β border-radius: 5px;
Β Β ΡΠΈΡΠΈΠ½Π°: 200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Β Β Π²ΡΡΠΎΡΠ°: 40 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Β Β ΡΡΠΈΡΡ: ΠΏΠΎΠ»ΡΠΆΠΈΡΠ½ΡΠΉ;
Β Β ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄: 0,3 Ρ;
}
.original-button:hover {
Β Β Π½Π΅ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ: .7;
}
Π Π΅Π΄Π°ΠΊΡΠΎΡ ΡΡΠΈΠ»Π΅ΠΉ
ΡΠΈΡΠΈΠ½Π°
px
Π²ΡΡΠΎΡΠ°
px
Π‘Π΄Π΅Π»Π°ΡΡ ΡΠΎΠ½ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠΎΠΌ
9000 2 font-size(px)px
Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π³ΡΠ°Π½ΠΈΡΡ
ΠΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ΅Π½Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°
ΠΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ΅Π½Ρ ΠΊ Π±ΡΠΊΠ²Π°ΠΌ
Π΄ΠΎ/ΠΏΠΎΡΠ»Π΅ (ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½Ρ), Π½Π°ΡΡΡΠΎΠΉΠΊΠ° Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ
Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅
ΠΠ±ΡΠΈΠ΅ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ Π΄Π»Ρ Π΄ΠΎ ΠΈ ΠΏΠΎΡΠ»Π΅
Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π΄ΠΎ
Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΏΠΎΡΠ»Π΅
Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅
βΠ½Π΅ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ: . 7;
Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ Π΄Π»Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ
transition-duration
Ρ
ΠΠ±ΡΠΈΠ΅ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ Π΄Π»Ρ Π΄ΠΎ ΠΈ ΠΏΠΎΡΠ»Π΅ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π΄ΠΎ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΏΠΎΡΠ»Π΅ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
ΠΡΡΠ³ΠΈΠ΅ Ρ Π°ΡΠ°ΠΊΡΠ΅ΡΠΈΡΡΠΈΠΊΠΈ
ΠΠΎΠ±Π°Π²ΠΈΡΡ (ΠΏΠ΅ΡΠ΅Π·Π°ΠΏΠΈΡΠ°ΡΡ) CSS
- ΠΠΎΠ»ΠΈΡΠΈΠΊΠ° ΠΊΠΎΠ½ΡΠΈΠ΄Π΅Π½ΡΠΈΠ°Π»ΡΠ½ΠΎΡΡΠΈ
- ΠΡΠΊΠ°Π· ΠΎΡ ΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎΡΡΠΈ
- ΠΠΎΠ½ΡΠ°ΠΊΡΡ
ΠΠ΅ΡΠΎΠ΄Ρ ΠΈ ΡΠ΅ΡΡΡΡΡ β Smashing Magazine
- 12 ΠΌΠΈΠ½ΡΡ ΡΡΠ΅Π½ΠΈΡ
- ΠΠΎΠ΄ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, ΠΠ½ΠΎΠΏΠΊΠΈ, CSS, Π’Π΅Ρ Π½ΠΈΠΊΠΈ, Essentials
- ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ Π² Twitter, LinkedIn
ΠΠ± Π°Π²ΡΠΎΡΠ΅
Π―Π½ΠΊΠΎ ΠΠΎΠ²Π°Π½ΠΎΠ²ΠΈΡ β Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°, ΠΈΠ½ΠΆΠ΅Π½Π΅Ρ-ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΡ, Π±Π»ΠΎΠ³Π΅Ρ, ΡΠΏΠΈΠΊΠ΅Ρ ΠΈ Ρ ΡΠ΄ΠΎΠΆΠ½ΠΈΠΊ. Π ΡΠ²ΠΎΠ±ΠΎΠ΄Π½ΠΎΠ΅ Π²ΡΠ΅ΠΌΡ ΠΎΠ½ ΠΏΠΈΡΠ΅Ρ ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΡ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°Ρ Π² ΡΠ²ΠΎΠ΅ΠΌ Π±Π»ΠΎΠ³Π΅β¦ ΠΠΎΠ»ΡΡΠ΅ ΠΎ JankoΒ β¬
ΠΠ½ΠΎΠΏΠΊΠΈ, Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΠΈΡ Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΡΠ²Π»ΡΡΡΡΡ Π²Π°ΠΆΠ½ΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π°.ΠΠ½ΠΎΠΏΠΊΠΈ, Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΠΈΡ Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΡΠ²Π»ΡΡΡΡΡ Π²Π°ΠΆΠ½ΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π°. ΠΠ½ΠΈ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΉ ΡΠΎΡΠΊΠΎΠΉ Π²Π΅Π±-ΡΠΎΡΠΌΡ ΠΈΠ»ΠΈ ΠΏΡΠΈΠ·ΡΠ²ΠΎΠΌ ΠΊ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ. Π£ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΠΎΠ² Π΅ΡΡΡ ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡΠΈΡΠΈΠ½ Π΄Π»Ρ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ, Π² ΡΠΎΠΌ ΡΠΈΡΠ»Π΅ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΠΈΡ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠΌΠΈ ΠΈ ΠΏΠΎΠ²ΡΡΠΈΡΡ ΡΠ΄ΠΎΠ±ΡΡΠ²ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ.
ΠΠ΄Π½Π°ΠΊΠΎ ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½ΡΡ ΠΏΡΠΈΡΠΈΠ½ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎ, ΡΡΠΎ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΌΠΎΠ³ΡΡ Π»Π΅Π³ΠΊΠΎ ΠΏΡΠΎΠΏΡΡΡΠΈΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ , ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΎΠ½ΠΈ ΡΠ°ΡΡΠΎ ΠΏΠΎΡ ΠΎΠΆΠΈ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² ΠΈΡ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠΉ ΡΠΈΡΡΠ΅ΠΌΠ΅. ΠΠ΄Π΅ΡΡ ΠΌΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅ΠΌ Π²Π°ΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ΅Ρ Π½ΠΈΠΊ ΠΈ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠΌΠΎΠ³ΡΡ Π²Π°ΠΌ Π½Π°ΡΡΠΈΡΡΡΡ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS. ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΠ΄ΠΎΠ±ΡΡΠ²ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ.ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Ρ Π·Π°Ρ ΠΎΡΠΈΡΠ΅ Π²Π·Π³Π»ΡΠ½ΡΡΡ Π½Π° ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΡΠ°ΡΡΠΈ ΠΏΠΎ ΡΠ΅ΠΌΠ΅:
- ΠΠ°ΠΆΠ°ΡΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΎΠΊ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS3
- ΠΡΠ²ΠΎΠ΅Π½ΠΈΠ΅ CSS, ΡΠ°ΡΡΡ 1: ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π΄ΠΈΠ·Π°ΠΉΠ½Π°
- Π Π°Π·ΡΠ°Π±ΠΎΡΠΊΠ° ΡΡΡΠ»ΠΎΠΊ Β«ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅Β» ΠΈ Β«ΠΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΡ ΡΡΠ΅Π½ΠΈΠ΅Β»
- ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°: ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΈ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΠΈ
ΠΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ ΠΌΡ ΠΎΠ±ΡΡΡΠ½ΠΈΠΌ, ΠΊΠ°ΠΊ ΠΎΡΠΎΡΠΌΠ»ΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΡΠΎΡΡΠ½ΠΈΠΌ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΠΎΠ΅ Π·Π°Π±Π»ΡΠΆΠ΄Π΅Π½ΠΈΠ΅: ΠΊΠ½ΠΎΠΏΠΊΠΈ β ΡΡΠΎ Π½Π΅ ΡΡΡΠ»ΠΊΠΈ. ΠΡΠ½ΠΎΠ²Π½Π°Ρ ΡΠ΅Π»Ρ ΡΡΡΠ»ΠΊΠΈ β ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΡΠ°Π½ΠΈΡΠ°ΠΌΠΈ ΠΈ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΡΠΌΠΈ, ΡΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΎΡΠΏΡΠ°Π²Π»ΡΡΡ ΡΠΎΡΠΌΡ).
ΠΠΎΠ»ΡΡΠ΅ ΠΏΠΎΡΠ»Π΅ ΠΏΡΡΠΆΠΊΠ°! ΠΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΡ ΡΡΠ΅Π½ΠΈΠ΅ Π½ΠΈΠΆΠ΅Β β
Π ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· ΡΠ²ΠΎΠΈΡ ΡΡΠ°ΡΠ΅ΠΉ Π―ΠΊΠΎΠ± ΠΠΈΠ»ΡΡΠ΅Π½ ΠΏΠΈΡΠ΅Ρ ΠΎ ΠΊΠΎΠΌΠ°Π½Π΄Π½ΡΡ ΡΡΡΠ»ΠΊΠ°Ρ , ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡ ΡΠΎΠ±ΠΎΠΉ ΡΠΌΠ΅ΡΡ ΡΡΡΠ»ΠΎΠΊ ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ. ΠΠΎ ΠΎΠ½ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Π» ΠΎΠ³ΡΠ°Π½ΠΈΡΠΈΠ²Π°ΡΡ ΠΊΠΎΠΌΠ°Π½Π΄Π½ΡΠ΅ ΡΡΡΠ»ΠΊΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠΌΠΈ Ρ Π½Π΅Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌΠΈ ΠΏΠΎΡΠ»Π΅Π΄ΡΡΠ²ΠΈΡΠΌΠΈ ΠΈ Π²ΡΠΎΡΠΎΡΡΠ΅ΠΏΠ΅Π½Π½ΡΠΌΠΈ ΠΊΠΎΠΌΠ°Π½Π΄Π°ΠΌΠΈ. Π§ΡΠΎΠ±Ρ ΡΠ·Π½Π°ΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΎ ΠΏΠ΅ΡΠ²ΠΈΡΠ½ΡΡ ΠΈ Π²ΡΠΎΡΠΈΡΠ½ΡΡ ΠΊΠΎΠΌΠ°Π½Π΄Π°Ρ (ΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΡ ), ΠΎΠ·Π½Π°ΠΊΠΎΠΌΡΡΠ΅ΡΡ Ρ ΠΏΠ΅ΡΠ²ΠΈΡΠ½ΡΠΌΠΈ ΠΈ Π²ΡΠΎΡΠΈΡΠ½ΡΠΌΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠΌΠΈ Π² Π²Π΅Π±-ΡΠΎΡΠΌΠ°Ρ ΠΡΠΊΠ° ΠΡΠΎΠ±Π»Π΅Π²ΡΠΊΠΈ. Π§ΡΠΎΠ±Ρ ΡΠ·Π½Π°ΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΎ ΡΠ°Π·Π»ΠΈΡΠΈΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΡΠ»ΠΊΠ°ΠΌΠΈ ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ, ΠΏΡΠΎΡΠΈΡΠ°ΠΉΡΠ΅ Β«Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΠΎΠ»Π΅Π·Π½ΡΡ ΡΡΡΠ»ΠΎΠΊ ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π½Π° UXBoothΒ».
ΠΡΠ½ΠΎΠ²Π½ΡΠ΅ ΡΡΠΈΠ»ΠΈ
Π‘Π°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΡΡΡΠ»ΠΊΠΈ ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ β Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ²Π΅Ρ ΡΠΎΠ½Π°, ΠΎΡΡΡΡΠΏΡ ΠΈ Π³ΡΠ°Π½ΠΈΡΡ. ΠΠΈΠΆΠ΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Ρ ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΊΠΎΠ΄Π° Π΄Π»Ρ ΡΡΡΠ»ΠΊΠΈ, ΠΊΠ½ΠΎΠΏΠΊΠΈ
ΠΈ Π²Π²ΠΎΠ΄Π°
(Β«ΠΡΠΏΡΠ°Π²ΠΈΡΡΒ»).
ΠΠ±ΡΠ°Π·Π΅Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ
.button { ΠΎΡΡΡΡΠΏ: 5px; ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: #dcdcdc; Π³ΡΠ°Π½ΠΈΡΠ°: 1px ΡΠΏΠ»ΠΎΡΠ½Π°Ρ #666; ΡΠ²Π΅Ρ:#000; ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅: Π½Π΅Ρ; }
ΠΡΠΎΡ ΠΏΡΠΎΡΡΠΎΠΉ ΠΊΠΎΠ΄ ΡΠ²ΠΎΠ΄ΠΈΡ ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡΠΌΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠ΅ ΡΠ°Π·Π»ΠΈΡΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΡΠ»ΠΊΠ°ΠΌΠΈ ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ. Π Π²ΠΎΡ ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΊΠΎΠ΄Π° Π²ΡΡΠ΅:
ΠΠ°ΠΆΠ½ΠΎ ΠΎΡΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ ΡΡΠΈ ΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΠΏΠΎ-ΡΠ°Π·Π½ΠΎΠΌΡ Ρ ΠΎΠ΄Π½ΠΈΠΌ ΠΈ ΡΠ΅ΠΌ ΠΆΠ΅ CSS . Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΡΠ°ΡΠ΅Π»ΡΠ½ΠΎ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΡΡΠΎΠ±Ρ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΡΡ ΡΠΎΠ³Π»Π°ΡΠΎΠ²Π°Π½Π½ΠΎΡΡΡ Π½Π° Π²Π°ΡΠ΅ΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅ ΠΈΠ»ΠΈ Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ.
ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ ΠΌΠΎΠΆΠ΅Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π±ΠΎΠ»Π΅Π΅ Π·Π°ΠΌΠ΅ΡΠ½ΡΠΌΠΈ. ΠΠ½ΠΎΠ³Π΄Π° ΡΠ°ΠΌΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ΅ΡΠΊΠΎ
.ΠΊΠ½ΠΎΠΏΠΊΠ° { ΠΎΡΡΡΡΠΏ: 5px 5px 5px 25px; Π³ΡΠ°Π½ΠΈΡΠ°: 1px ΡΠΏΠ»ΠΎΡΠ½Π°Ρ #666; ΡΠ²Π΅Ρ:#000; ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅: Π½Π΅Ρ; ΡΠΎΠ½: #dcdcdc url(icon.png) Π±Π΅Π· ΠΏΠΎΠ²ΡΠΎΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ 5px ΠΏΠΎ ΡΠ΅Π½ΡΡΡ; }
Π‘ΠΎΡΡΠΎΡΠ½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ
ΠΠΎΠΌΠΈΠΌΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ ΡΡΡΠ»ΠΊΠΈ ΠΌΠΎΠ³ΡΡ ΠΈΠΌΠ΅ΡΡ Π΄Π²Π° Π΄ΡΡΠ³ΠΈΡ
ΡΠΎΡΡΠΎΡΠ½ΠΈΡ: Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΈ Π°ΠΊΡΠΈΠ²Π½ΠΎΠ΅ (Ρ.Π΅. Π½Π°ΠΆΠ°ΡΠΎΠ΅). ΠΠ°ΠΆΠ½ΠΎ, ΡΡΠΎΠ±Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π²ΡΠ³Π»ΡΠ΄Π΅Π»ΠΈ ΠΏΠΎ-ΡΠ°Π·Π½ΠΎΠΌΡ Π² ΡΠ°Π·Π½ΡΡ
ΡΠΎΡΡΠΎΡΠ½ΠΈΡΡ
, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΏΠΎΠ½ΠΈΠΌΠ°Π»ΠΈ, ΡΡΠΎ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ. ΠΡΠ±ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ, Π²ΡΠ·Π²Π°Π² :hover
ΠΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ CSS.
Π°: Π½Π°Π²Π΅Π΄ΠΈΡΠ΅ { ΡΠ²Π΅Ρ:#f00; }
Π₯ΠΎΡΡ ΡΡΠΎ ΠΎΡΠ΅Π½Ρ Π²Π°ΠΆΠ½ΠΎ, Π°ΠΊΡΠΈΠ²Π½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΡΠ΅Π΄ΠΊΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π½Π° Π²Π΅Π±-ΡΠ°ΠΉΡΠ°Ρ . ΠΠΎΠΊΠ°Π·ΡΠ²Π°Ρ ΡΡΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅, Π²Ρ Π³Π°ΡΠ°Π½ΡΠΈΡΡΠ΅ΡΠ΅, ΡΡΠΎ Π²Π°ΡΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΠ΅Π°Π³ΠΈΡΡΡΡ, ΠΈ ΠΎΡΠΏΡΠ°Π²Π»ΡΠ΅ΡΠ΅ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠΈΠ³Π½Π°Π» ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ° Π±ΡΠ»Π° Π½Π°ΠΆΠ°ΡΠ°. ΠΡΠΎ Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ ΠΈΠ·ΠΎΠΌΠΎΡΡΠ½ΡΠΌ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠ΅ΠΌ ΠΈ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ Β«ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ΠΌ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎΠΉ ΡΠΎΡΠΌΡ ΠΈ ΡΠΎΠΏΠΎΡΡΠ°Π²ΠΈΠΌΡΠΌ ΡΠ΅Π»ΠΎΠ²Π΅ΡΠ΅ΡΠΊΠΈΠΌ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌΒ» (ΠΡΠΊ ΠΡΠΎΠ±Π»Π΅Π²ΡΠΊΠΈ, Site-Seeing). Π ΡΡΠ°ΡΡΠ΅ Β«Π‘ΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π½Π°ΠΆΠ°ΡΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSSΒ» ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΡΡΡ Π²Π°ΠΆΠ½ΠΎΡΡΡ Π°ΠΊΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ.
Π°: Π°ΠΊΡΠΈΠ²Π½ΡΠΉ { ΡΠ²Π΅Ρ:#f00; }
ΠΡΡΡ Π΅ΡΠ΅ ΠΎΠ΄Π½ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²ΠΈΠ΄Π½ΠΎ ΠΏΡΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ: ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΡΠΎΠΊΡΡΠ°. ΠΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΡ ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ»Π°Π²ΠΈΡΠΈ Tab, Π΅Π΅ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΡΡ, ΠΆΠ΅Π»Π°ΡΠ΅Π»ΡΠ½ΠΎ, ΡΡΠΎΠ±Ρ ΠΎΠ½ Π²ΡΠ³Π»ΡΠ΄Π΅Π» ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ.
Π°: ΡΠΎΠΊΡΡ { ΡΠ²Π΅Ρ:#f00; }
Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΡ Π½ΠΈΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ°Ρ ΠΏΠΎΠΊΠ°Π·Π°Π½ ΠΎΠ±ΡΠΈΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ ΠΊΠ½ΠΎΠΏΠΎΠΊ. Π‘ΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ»Π΅Π΅, ΡΠ΅ΠΌ ΠΎΠ±ΡΡΠ½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅, Π² ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ Π°ΠΊΡΠΈΠ²Π½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΠΈΠ½Π²Π΅ΡΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ, ΠΈΠΌΠΈΡΠΈΡΡΡΡΠΈΠΉ Π½Π°ΠΆΠ°ΡΠΈΠ΅. Π₯ΠΎΡΡ Π²Π°ΠΌ Π½Π΅ Π½ΡΠΆΠ½ΠΎ ΠΎΠ³ΡΠ°Π½ΠΈΡΠΈΠ²Π°ΡΡ ΡΠ΅Π±Ρ ΡΡΠΈΠΌ ΡΡΠΈΠ»Π΅ΠΌ, ΡΡΠΎ Ρ ΠΎΡΠΎΡΠ΅Π΅ ΠΌΠ΅ΡΡΠΎ Π΄Π»Ρ Π½Π°ΡΠ°Π»Π°.
ΠΠ°ΠΌ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΡΡ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ ΠΎΠ±ΡΠ°ΡΠ°ΡΡΡΡ ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ ΠΊΠΎΠ½ΡΡΡΠ° Π΄Π»Ρ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ :active
ΠΈ :focus
. ΠΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠ΅ ΠΎΠ±ΡΠ°ΡΠ΅Π½ΠΈΠ΅ Ρ ΡΡΠΈΠΌ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ Π²Π°ΠΆΠ½ΠΎ Π΄Π»Ρ ΡΠ΄ΠΎΠ±ΡΡΠ²Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠΈΡ
ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ ΠΌΡΡΡ. Π ΡΡΠ°ΡΡΠ΅ Better CSS Outline Suppression ΠΠ°ΡΡΠΈΠΊ ΠΠ°ΡΠΊΠ΅ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΠΊΠ°ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ ΡΡΡΠ»ΠΊΠΈ Π²Π΅Π΄ΡΡ ΡΠ΅Π±Ρ Π² ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΡΡ
ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ, ΠΈ ΠΎΠ±ΡΡΡΠ½ΡΠ΅Ρ, ΠΏΠΎΡΠ΅ΠΌΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΡΡΡΠΊΡΡΡΡ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π²ΡΠ·ΡΠ²Π°ΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Ρ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ΠΌ :active
.
Π‘ΠΈΠ½ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠ° Β«ΠΡΠΏΠΈΡΡ ΡΠ΅ΠΉΡΠ°ΡΒ» Π½Π° ΡΠ°ΠΉΡΠ΅ Apple.com ΠΈΠΌΠ΅Π΅Ρ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π±ΠΎΠ»Π΅Π΅ ΡΠ²Π΅ΡΠ»ΡΠΉ ΡΠΎΠ½ Π΄Π»Ρ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈ ΡΡΠΈΠ»Ρ Π²ΡΡΠ°Π²ΠΊΠΈ Π΄Π»Ρ Π°ΠΊΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ. ΠΠ°ΠΆΠ΅ ΠΎΡΠ½ΠΎΠ²Π½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° Π½Π° ΡΠ°ΠΉΡΠ΅ Apple ΡΠ΅Π°Π»ΠΈΠ·ΡΠ΅Ρ Π²ΡΠ΅ ΡΡΠΈ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ.
Π₯ΠΎΡΡ ΡΡΠ° ΠΏΡΠΈΡΡΠ΄Π»ΠΈΠ²Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° Π½Π΅ ΡΠ΅Π°Π»ΠΈΠ·ΡΠ΅Ρ Π°ΠΊΡΠΈΠ²Π½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅, ΠΎΠ½Π° ΠΈΠΌΠ΅Π΅Ρ ΠΏΡΠΈΡΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ Π·Π°ΡΡΡ Π°Π½ΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°.
ΠΠ½ΠΎΠΏΠΊΠ° Β«ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅Β» Π½Π° UX Booth ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ Π·Π΅Π»Π΅Π½ΠΎΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π½Π° ΠΎΠ΄ΠΈΠ½ ΠΏΠΈΠΊΡΠ΅Π»Ρ Π²Π½ΠΈΠ· Π² Π°ΠΊΡΠΈΠ²Π½ΠΎΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ, ΡΡΠΎ ΠΈΠΌΠΈΡΠΈΡΡΠ΅Ρ ΡΡΡΠ΅ΠΊΡ Π½Π°ΠΆΠ°ΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ.
ΠΠΎΠ»Π΅Π·Π½ΠΎΠ΅ ΡΡΠ΅Π½ΠΈΠ΅
Π ΡΡΠ°ΡΡΠ΅ ΠΠΎΠ²ΠΎΠ΅ ΠΎΡΠΊΡΡΡΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Button ΠΏΠΎΠΊΠ°Π·Π°Π½Ρ ΡΠ°Π·Π»ΠΈΡΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΡΠ»ΠΊΠ°ΠΌΠΈ ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ ΠΈ ΠΎΠ±ΡΡΡΠ½ΡΠ΅ΡΡΡ, ΠΊΠ°ΠΊ Π»Π΅Π³ΠΊΠΎ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ.
Π‘ΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΡΠΎΡΠΌ ΠΎΡ Π²Π°ΡΡΠ²Π°Π΅Ρ ΠΎΡΠ½ΠΎΠ²Ρ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΡΠΎ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ².
ΠΡΠ°ΡΠΈΠ²ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ CSS Ρ Π½Π°Π±ΠΎΡΠΎΠΌ Π·Π½Π°ΡΠΊΠΎΠ² ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΠΊΠ°ΠΊ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΎΠ½ΠΎΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. Π₯ΠΎΡΡ ΠΎΠ½ΠΈ ΠΈ Π½Π΅ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΡΡΡΡ, ΡΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Ρ ΠΎΡΠΎΡΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ.
Recreating the Button β ΠΎΡΠ΅Π½Ρ Ρ ΠΎΡΠΎΡΠ°Ρ ΡΡΠ°ΡΡΡ, Π² ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΎΠ±ΡΡΡΠ½ΡΠ΅ΡΡΡ, ΠΊΠ°ΠΊ Google ΠΏΡΠΈΡΠ΅Π» ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π½Π° Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ ΡΠ²ΠΎΠΈΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ².
ΠΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ CSS Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ PNG ΠΈ ΡΠ²Π΅ΡΠΎΠ² ΡΠΎΠ½Π° ΠΎΠ±ΡΡΡΠ½ΡΠ΅Ρ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΡΡΡΡΠ°ΡΡΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π΄Π»Ρ Π²ΡΠ΅Ρ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ. Π₯ΠΎΡΡ ΠΎΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ jQuery, ΠΎΠ½ ΠΈΠ·ΡΡΠ½ΠΎ Π΄Π΅Π³ΡΠ°Π΄ΠΈΡΡΠ΅Ρ, Π΅ΡΠ»ΠΈ JavaScript ΠΎΡΠΊΠ»ΡΡΠ΅Π½.
Π Π°Π·Π΄Π²ΠΈΠΆΠ½ΡΠ΅ Π΄Π²Π΅ΡΠΈ: Π³ΠΈΠ±ΠΊΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ
ΠΡΠΈ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΡΠΈΡΡΠ²Π°ΡΡ ΠΎΠ΄Π½ΠΎ Π²Π°ΠΆΠ½ΠΎΠ΅ ΡΠΎΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΠΎΡΡΡ. ΠΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΠΎΡΡΡ Π² ΡΡΠΎΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ, ΡΡΠΎΠ±Ρ ΠΎΠ½Π° ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°Π»Π° ΡΠ΅ΠΊΡΡΡ, ΠΈ ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΡΠ»ΠΈ Π²Ρ Π½Π΅ Ρ ΠΎΡΠΈΡΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠ°Π·Π½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΡΠ°ΡΡΠΌΠΎΡΡΠΈΡΠ΅ ΡΠ΅Ρ Π½ΠΈΠΊΡ Β«ΡΠ°Π·Π΄Π²ΠΈΠΆΠ½ΡΡ Π΄Π²Π΅ΡΠ΅ΠΉΒ». ΠΡΠΎΡ ΠΌΠ΅ΡΠΎΠ΄ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΡΠ΅, Π½Π°ΡΡΡΠ΅Π½Π½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ.
ΠΡΠΈΠ½ΡΠΈΠΏ Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ Π΄Π²Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΊΠΎΠ»ΡΠ·ΡΡ Π΄ΡΡΠ³ ΠΏΠΎ Π΄ΡΡΠ³Ρ, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠ΅ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°ΡΡΡΡ Π΄ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ . ΠΠ±ΡΡΠ½ΠΎ ΡΡΠΎ Π΄Π΅Π»Π°Π΅ΡΡΡ ΠΏΡΡΠ΅ΠΌ Π²Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° span Π² ΡΡΡΠ»ΠΊΡ. ΠΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ Π²ΡΡΠ΅, Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π΅ΡΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠ΅Π΅ ΡΠΎΠ·Π΄Π°ΡΡ ΡΡΡΠ΅ΠΊΡ ΡΠΊΠΎΠ»ΡΠΆΠ΅Π½ΠΈΡ. ΠΠ²Π° ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΡ Π½ΠΈΠΆΠ΅ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠ° ΠΊΠΎΠ΄Π° ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ ΡΡΡΡΠΊΡΡΡΡ ΠΈ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΡΡΡΠ΅ΠΊΡΠ°.
Π‘ΡΠ°Π½Π΄Π°ΡΡΠ½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° ΡΠ°Π·Π΄Π²ΠΈΠΆΠ½ΡΡ Π΄Π²Π΅ΡΠ΅ΠΉ
a { ΡΠΎΠ½: ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΡΠΉ URL('button_right.png') Π±Π΅Π· ΠΏΠΎΠ²ΡΠΎΡΠ° ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ Π²Π²Π΅ΡΡ Ρ ΡΠΏΡΠ°Π²Π°; Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π±Π»ΠΎΠΊ; ΠΏΠ»ΡΡΡ Π½Π°Π»Π΅Π²ΠΎ; /* ΠΎΡΡΡΡΠΏΡ, ΠΏΠΎΠ»Ρ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΡΡΠΈΠ»ΠΈ Π·Π΄Π΅ΡΡ */ } ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΠΊ { ΡΠΎΠ½: ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΡΠΉ URL('button_left. png') Π±Π΅Π· ΠΏΠΎΠ²ΡΠΎΡΠΎΠ²; Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π±Π»ΠΎΠΊ; /* ΠΎΡΡΡΡΠΏΡ, ΠΏΠΎΠ»Ρ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΡΡΠΈΠ»ΠΈ Π·Π΄Π΅ΡΡ */ }
ΠΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π° ΡΡΠΎΠ³ΠΎ ΠΌΠ΅ΡΠΎΠ΄Π° Π·Π°ΠΊΠ»ΡΡΠ°ΡΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΎΠ½:
- ΠΡΠΎ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎ Π½Π°ΡΡΡΠ΅Π½Π½ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ;
- ΠΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΡ, Π³ΠΈΠ±ΠΊΠΎΡΡΡ ΠΈ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΠΎΡΡΡ;
- ΠΠ΅ ΡΡΠ΅Π±ΡΠ΅Ρ JavaScript;
- Π Π°Π±ΠΎΡΠ°Π΅Ρ Π²ΠΎ Π²ΡΠ΅Ρ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ .
ΠΠΎΠ»Π΅Π·Π½ΠΎΠ΅ ΡΡΠ΅Π½ΠΈΠ΅
Π‘ΡΠ°ΡΡΡ Β«Sliding Doors of CSSΒ» Π½Π° A List Apart (ΡΠ°ΡΡΡ 1 ΠΈ ΡΠ°ΡΡΡ 2) ΠΏΠΎΡΠ²ΡΡΠ΅Π½Π° ΠΎΡΠ½ΠΎΠ²Π°ΠΌ ΡΡΠΎΠΉ ΡΠ΅Ρ Π½ΠΈΠΊΠΈ. Π₯ΠΎΡΡ ΡΡΠΈ ΡΡΠ°ΡΡΠΈ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΡΡΠ°ΡΠ΅Π»ΠΈ, ΠΈΡ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΡΠΎΡΠΈΡΠ°ΡΡ ΠΊΠ°ΠΆΠ΄ΡΠΉ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ.
Π’Π°ΠΊΠΆΠ΅ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΡΡΠ°ΡΠ΅Π»Π°, Β«Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΡΠ»Π΅Π½Π΅ΠΏΡΠΎΠ±ΠΈΠ²Π°Π΅ΠΌΡΡ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΡΡΡΠ»ΠΎΠΊ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSSΒ» β ΠΎΡΠ»ΠΈΡΠ½Π°Ρ ΡΡΠ°ΡΡΡ, Π² ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΏΡΠ»Π΅Π½Π΅ΠΏΡΠΎΠ±ΠΈΠ²Π°Π΅ΠΌΡΠ΅, ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΠΌΡΠ΅ ΠΏΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡ, ΡΠΆΠ°ΡΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ. Π’Π°ΠΊΠΆΠ΅ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½Π° ΠΊ ΠΏΡΠΎΡΡΠ΅Π½ΠΈΡ.
Filament Group ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΠΎΡΠ»ΠΈΡΠ½ΡΡ ΡΡΠ°ΡΠ΅ΠΉ ΠΈ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ². ΠΠ³ΠΎ Π²ΡΠΎΡΠ°Ρ ΡΡΠ°ΡΡΡ ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ°Ρ CSS, Β«Π‘ΡΠΈΠ»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ°Π·Π΄Π²ΠΈΠΆΠ½ΡΡ Π΄Π²Π΅ΡΠ΅ΠΉ CSSΒ», ΠΎΠ±ΡΡΡΠ½ΡΠ΅Ρ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡΡΡ ΠΌΠ΅ΡΠΎΠ΄Ρ. Π₯ΠΎΡΡ ΠΎΠ½ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π°ΠΊΡΠΈΠ²Π½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅, Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π»Π΅Π³ΠΊΠΎ ΡΠ°ΡΡΠΈΡΠΈΡΡ.
ΠΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π² ΡΡΠΈΠ»Π΅ Wii, Π² ΡΡΠ°ΡΡΠ΅ Β«ΠΡΠΎΡΡΡΠ΅ ΠΊΡΡΠ³Π»ΡΠ΅ ΡΡΡΠ»ΠΊΠΈ CSS (ΠΊΠ½ΠΎΠΏΠΊΠΈ Wii)Β» ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Ρ Π²ΡΠ΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠ΅ ΡΠ΅ΡΡΡΡΡ ΠΈ ΠΏΠΎΡΡΠ½Π΅Π½ΠΈΡ ΠΏΠΎ ΠΈΡ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ.
ΠΠ±ΡΡΠ½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΡΠ΅Ρ Π½ΠΈΠΊΡ ΡΠ°Π·Π΄Π²ΠΈΠΆΠ½ΡΡ Π΄Π²Π΅ΡΠ΅ΠΉ CSS β ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π²Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠ΄Π½Π°ΠΊΠΎ ΡΡΠ°ΡΡΡ CSS Sliding Door Using Only One Image ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±ΠΈΡΡΡΡ ΡΠΎΠ³ΠΎ ΠΆΠ΅ ΡΡΡΠ΅ΠΊΡΠ°, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅.
ΠΠ²Π°Π»ΡΠ½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ CSS ΠΈ ΠΠ²Π°Π΄ΡΠ°ΡΠ½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ CSS ΠΎΡ Dynamic Drive β Π΄Π²Π΅ Π΄ΡΡΠ³ΠΈΠ΅ ΡΡΠ°ΡΡΠΈ, Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΡΡΡΠΈΠ΅ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎΡΡΡ ΡΠ°Π·Π΄Π²ΠΈΠΆΠ½ΡΡ Π΄Π²Π΅ΡΠ΅ΠΉ CSS.
CSS-ΡΠΏΡΠ°ΠΉΡΡ: ΠΎΠ΄Π½ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ
ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ CSS-ΡΠΏΡΠ°ΠΉΡΠΎΠ² ΠΎΠ΄ΠΈΠ½ ΡΠ°ΠΉΠ» ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² , ΠΎΠ±ΡΡΠ½ΠΎ Π²ΡΠ»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ Π² Π²ΠΈΠ΄Π΅ ΡΠ΅ΡΠΊΠΈ. Π Π°Π·Π±ΠΈΠ²Π°Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΌΡ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄ΠΈΠ½ ΡΠΏΡΠ°ΠΉΡ Π·Π° ΡΠ°Π·. ΠΠ»Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π²ΠΊΠ»ΡΡΠΈΡΡ Π³ΡΠ°ΡΠΈΠΊΡ Π΄Π»Ρ Π²ΡΠ΅Ρ ΡΡΠ΅Ρ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ Π² ΠΎΠ΄ΠΈΠ½ ΡΠ°ΠΉΠ». ΠΡΠΎΡ ΠΌΠ΅ΡΠΎΠ΄ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π΅Π½, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠ΅Π±ΡΠ΅Ρ ΠΌΠ΅Π½ΡΡΠ΅ ΡΠ΅ΡΡΡΡΠΎΠ², Π° ΡΡΡΠ°Π½ΠΈΡΠ° Π·Π°Π³ΡΡΠΆΠ°Π΅ΡΡΡ Π±ΡΡΡΡΠ΅Π΅. ΠΡΠ΅ ΠΌΡ Π·Π½Π°Π΅ΠΌ, ΡΡΠΎ ΠΌΠ½ΠΎΠ³ΠΎ Π·Π°ΠΏΡΠΎΡΠΎΠ² ΠΊ ΡΠ΅ΡΠ²Π΅ΡΡ Π΄Π»Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΡ ΡΠ΅ΡΡΡΡΠΎΠ² ΠΌΠΎΠΆΠ΅Ρ Π·Π°Π½ΡΡΡ ΠΌΠ½ΠΎΠ³ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ. ΠΠΎΡ ΠΏΠΎΡΠ΅ΠΌΡ CSS-ΡΠΏΡΠ°ΠΉΡΡ ΡΠ°ΠΊ ΡΠ΄ΠΎΠ±Π½Ρ. ΠΠ½ΠΈ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎΠΊΡΠ°ΡΠ°ΡΡ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΎΠ±ΡΠ°ΡΠ΅Π½ΠΈΠΉ ΠΊ ΡΠ΅ΡΠ²Π΅ΡΡ. ΠΠ½ΠΈ Π½Π°ΡΡΠΎΠ»ΡΠΊΠΎ ΠΌΠΎΡΠ½Ρ, ΡΡΠΎ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΡΠΏΡΠ°ΠΉΡΡ CSS Π΄Π»Ρ Π²ΡΠ΅ΠΉ ΡΠ²ΠΎΠ΅ΠΉ Π³ΡΠ°ΡΠΈΠΊΠΈ. ΠΠ±Π·ΠΎΡ Holy Sprites ΠΎ ΡΡΡΠΊΠ°Ρ CSS ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΎΡΠ΅Π½Ρ ΠΊΡΠ΅Π°ΡΠΈΠ²Π½ΡΡ ΡΠ΅ΡΠ΅Π½ΠΈΠΉ.
Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ ΠΏΡΠΎΡΡΠ΅ΠΉΡΠ΅Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΏΡΠ°ΠΉΡΠΎΠ² CSS. ΠΠ΄Π½ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π³ΡΠ°ΡΠΈΠΊΡ Π΄Π»Ρ Π²ΡΠ΅Ρ
ΡΡΠ΅Ρ
ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΠ°ΡΡΡΠ°ΠΈΠ²Π°Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ background-position
, ΠΌΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΠΌ ΡΠΎΡΠ½ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ Π½ΡΠΆΠ½ΠΎΠ³ΠΎ Π½Π°ΠΌ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΡ Π²ΡΠ±ΠΈΡΠ°Π΅ΠΌ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠΎΠ½Π° ΡΠ²Π΅ΡΡ
Ρ: -30 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ
ΠΈ ΡΠ»Π΅Π²Π°: 0
.
Π° { ΡΠΎΠ½: Π±Π΅Π»ΡΠΉ url(buttons.png) 0px 0px Π±Π΅Π· ΠΏΠΎΠ²ΡΠΎΡΠ°; } Π°: Π½Π°Π²Π΅Π΄ΠΈΡΠ΅ { ΡΠΎΠ½ΠΎΠ²Π°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ: -30px 0px; } Π°: Π°ΠΊΡΠΈΠ²Π½ΡΠΉ { ΡΠΎΠ½ΠΎΠ²Π°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ: -60px 0px; }
ΠΠ»Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ ΠΎΠ±ΡΠ΅ΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΠΈ ΡΠ΅ΡΡΡΡΠΎΠ² ΠΏΠΎ CSS-ΡΠΏΡΠ°ΠΉΡΠ°ΠΌ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΡΡΠ΅ΡΡ Ρ The Mystery of CSS Sprites: Techniques, Tools and TutorialsΒ».
ΠΠΎΠ»Π΅Π·Π½ΠΎΠ΅ ΡΡΠ΅Π½ΠΈΠ΅
Π ΡΡΠΎΠΌ ΠΏΡΠΎΡΡΠΎΠΌ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π΅ Β«ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΠΏΡΠΎΡΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΏΡΠ°ΠΉΡΠΎΠ² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ CSSΒ» ΠΡΠΈΡ Π‘ΠΏΡΠ½Π΅Ρ ΠΎΠ±ΡΡΡΠ½ΡΠ΅Ρ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΏΡΠ°ΠΉΡΠΎΠ² CSS Π² Photoshop ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ Ρ CSS.
ΠΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ°Π·Π΄Π²ΠΈΠΆΠ½ΡΡ Π΄Π²Π΅ΡΠ΅ΠΉ ΠΈ ΡΠΏΡΠ°ΠΉΡΠΎΠ² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΠΊΠ°ΠΊ ΠΎΠ±ΠΎΠ³Π°ΡΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΠ΅ΠΉ ΡΠ°Π·Π΄Π²ΠΈΠΆΠ½ΡΡ Π΄Π²Π΅ΡΠ΅ΠΉ ΠΈ ΡΠΏΡΠ°ΠΉΡΠΎΠ² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. ΠΠ½ ΡΠ΅Π°Π»ΠΈΠ·ΡΠ΅Ρ Π°ΠΊΡΠΈΠ²Π½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΎΡΠ΅Π½Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ°Π·Π½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈΠ»ΠΈ ΡΠ²Π΅ΡΠ°, Π° ΡΠΊΠΎΡΠ΅Π΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΡ.
CSS 3: ΠΠ½ΠΎΠΏΠΊΠΈ Π±ΡΠ΄ΡΡΠ΅Π³ΠΎ
CSS 3 ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π°ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎ Π±ΠΎΠ³Π°ΡΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π²ΡΠ΅Π³ΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΡΡΡΠΎΠΊΠ°ΠΌΠΈ ΠΊΠΎΠ΄Π°. ΠΠΎΠΊΠ° ΡΡΠΎ ΡΡΠΎ ΡΠ°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ. ΠΠ΅Π΄ΠΎΡΡΠ°ΡΠΊΠΎΠΌ CSS 3 ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎ, ΡΡΠΎ Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ ΠΎΠ½ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Firefox ΠΈ Safari. ΠΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΠΌΠΎΠΌΠ΅Π½ΡΠΎΠΌ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎ, ΡΡΠΎ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS 3 , ΠΈΠ·ΡΡΠ½ΠΎ Π΄Π΅Π³ΡΠ°Π΄ΠΈΡΡΡΡ Π² Π½Π΅ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌΡΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
. ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° -moz-border-radius
(Π΄Π»Ρ Firefox) ΠΈΠ»ΠΈ -webkit-border-radius
(Π΄Π»Ρ Safari), Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΡΠ°Π΄ΠΈΡΡ ΡΠ³Π»ΠΎΠ². ΠΠΎΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ ΡΠ°Π΄ΠΈΡΡΠ° Π³ΡΠ°Π½ΠΈΡΡ.
ΠΠ»Ρ Π»ΡΡΡΠΈΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠΎΠ² Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡΠΎΠ²Π°ΡΡ Π·Π°ΠΊΡΡΠ³Π»Π΅Π½Π½ΡΠ΅ ΡΠ³Π»Ρ CSS 3 ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΡΠΈΠΌΠ΅Ρ Π½ΠΈΠΆΠ΅ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΡΠΈΠΏΠΈΡΠ½ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Ρ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ½ΡΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ, ΠΏΠ΅ΡΠ²ΠΎΠ΅ Π±Π΅Π· Π·Π°ΠΊΡΡΠ³Π»Π΅Π½Π½ΡΡ ΡΠ³Π»ΠΎΠ², Π° Π²ΡΠΎΡΠΎΠ΅ Ρ.
ΠΠΎ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ Ρ ΡΠ°Π·Π΄Π²ΠΈΠΆΠ½ΡΠΌΠΈ Π΄Π²Π΅ΡΡΠΌΠΈ ΡΡΠΎΡ ΠΌΠ΅ΡΠΎΠ΄ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΡΠ΅. ΠΠ΄Π½Π°ΠΊΠΎ, Π΅ΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΡ ΡΠΎΠ³Π»Π°ΡΠΎΠ²Π°Π½Π½ΠΎΡΡΡ Π²ΠΎ Π²ΡΠ΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ , ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ°Π·Π΄Π²ΠΈΠΆΠ½ΡΠ΅ Π΄Π²Π΅ΡΠΈ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ΠΈ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π²ΠΎ Π²ΡΠ΅Ρ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ , Π²ΠΊΠ»ΡΡΠ°Ρ IE6. Π§ΡΠΎΠ±Ρ ΡΠ·Π½Π°ΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΡ CSS 3, ΠΏΡΠΎΡΡΠΈΡΠ΅ Π£Π²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ CSS 3: Π±ΠΎΠ»Π΅Π΅ 30 ΠΏΠΎΠ»Π΅Π·Π½ΡΡ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Β». Π Π²ΠΎΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Ρ ΠΎΡΠΎΡΠΈΡ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ² ΠΏΠΎ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠ½ΠΊΡΠΈΠΉ CSS 3.
ΠΠΎΠ»Π΅Π·Π½ΠΎΠ΅ ΡΡΠ΅Π½ΠΈΠ΅
Super Awesome Buttons With CSS 3 ΠΈ RGBA Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΡΠ΅Ρ ΠΌΠΎΡΡ CSS 3 Ρ Π·Π°ΠΊΡΡΠ³Π»Π΅Π½Π½ΡΠΌΠΈ ΡΠ³Π»Π°ΠΌΠΈ, ΡΠ΅Π½ΡΠΌΠΈ Mozilla ΠΈ RGBA, ΡΠ²Π΅ΡΠΎΠ²ΡΠΌ ΡΠ΅ΠΆΠΈΠΌΠΎΠΌ, Π΄ΠΎΠ±Π°Π²Π»ΡΡΡΠΈΠΌ Π°Π»ΡΡΠ°-ΡΠΌΠ΅ΡΠΈΠ²Π°Π½ΠΈΠ΅ ΠΊ Π²Π°ΡΠΈΠΌ Π»ΡΠ±ΠΈΠΌΡΠΌ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌ CSS. ΠΡΠΎ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π»ΡΡΡΠΈΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΠΊΠ½ΠΎΠΏΠΎΠΊ CSS 3.
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π±Π΅Π· ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS 3 ΠΎΠ±ΡΡΡΠ½ΡΠ΅Ρ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π΄Π»Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ CSS 3 Π±Π΅Π· ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.
ΠΠ³Π½ΠΎΠ²Π΅Π½Π½ΡΠ΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ: ΠΏΠΎΠ»Π΅Π·Π½Ρ Π»ΠΈ ΠΎΠ½ΠΈ?
Π‘ΡΡΠ΅ΡΡΠ²ΡΡΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Easy Button ΠΈ Menu Maker ΠΈ My Cool Button, Π° ΡΠ°ΠΊΠΆΠ΅ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ CSS-ΡΠΏΡΠ°ΠΉΡΠΎΠ², ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ CSS Sprite Generator, Π½ΠΎ Π²ΠΎΠΏΡΠΎΡ Π² ΡΠΎΠΌ, Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π»ΠΈ ΠΎΠ½ΠΈ ΠΏΠΎΠΌΠΎΠ³Π°ΡΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠ΅ Π²Π°ΡΠΈΠΌ ΠΏΠΎΡΡΠ΅Π±Π½ΠΎΡΡΡΠΌ. Π₯ΠΎΡΡ ΠΎΠ½ΠΈ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡΡΡ ΠΈ ΠΏΡΠΎΡΡΡ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ, Π²Π°ΡΠ΅ ΡΠ²ΠΎΡΡΠ΅ΡΡΠ²ΠΎ ΠΈ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ Π½Π°Π΄ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ°ΠΌΠΈ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Ρ, ΡΡΠΎ Π΄Π΅Π»Π°Π΅Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΡΠ΅Π΄Π½Π΅Π³ΠΎ Π²ΠΈΠ΄Π°. ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ½ΠΈΠ²Π΅ΡΡΠ°Π»ΡΠ½ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ Ρ ΠΎΡΠΎΡΠ΅ΠΉ ΠΈΠ΄Π΅Π΅ΠΉ.
Π Π΅ΡΠ΅Π½ΠΈΠ΅ Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ Photoshop (ΠΈΠ»ΠΈ Π΅Π³ΠΎ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎΠΉ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Ρ) ΠΈ ΠΏΡΠΎΠ²Π΅ΡΠ΅Π½Π½ΡΡ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ², ΠΎΠΏΠΈΡΠ°Π½Π½ΡΡ Π² ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅. ΠΡΠ»ΠΈ Π²Ρ Π½ΠΎΠ²ΠΈΡΠΎΠΊ Π² Photoshop, Π²ΠΎΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΎΡΠ»ΠΈΡΠ½ΡΡ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ² ΠΏΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ΄ΠΈΠ²ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ.
ΠΡΠ»ΠΈ Π²Ρ Π½Π΅ Π·Π½Π°Π΅ΡΠ΅, Ρ ΡΠ΅Π³ΠΎ Π½Π°ΡΠ°ΡΡ, iPhone-ΠΊΠ½ΠΎΠΏΠΊΠ° Π² Photoshop β ΠΈΠ΄Π΅Π°Π»ΡΠ½ΡΠΉ Π²ΡΠ±ΠΎΡ. ΠΡΠ΅Π³ΠΎ Π·Π° 10-15 ΠΌΠΈΠ½ΡΡ Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ°ΠΊΠΈΠ΅ ΠΆΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΊΠ°ΠΊ Π½Π° iPhone.
ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ Π³Π»Π°Π΄ΠΊΡΡ ΠΈ ΡΠΈΡΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π² Photoshop β ΡΡΠΎ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΠ΅ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΡΠΎΠ²Π΅Π΄Π΅Ρ Π²Π°Ρ ΡΠ΅ΡΠ΅Π· 30 ΠΏΡΠΎΡΡΡΡ ΡΠ°Π³ΠΎΠ² ΠΈ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ Π²Π°ΠΌ ΠΈΠ·ΡΡΠΈΡΡ ΠΎΡΠ½ΠΎΠ²Ρ Photoshop. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π² ΡΡΠ°ΡΡΠ΅ ΠΎΠ±ΡΡΡΠ½ΡΠ΅ΡΡΡ, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΡ Π³ΡΠ°ΡΠΈΠΊΡ Π² ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠΈ Ρ HTML ΠΈ CSS Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΠΎΠ»Π½ΠΎΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ CSS.
ΠΠ½ΠΎΠΏΠΊΠΈ ΠΈ ΡΠ·Π°Π±ΠΈΠ»ΠΈΡΠΈ: Π²ΠΌΠ΅ΡΡΠΎ Π·Π°ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ
ΠΠΏΠΈΡΠ°Π½Π½ΡΠ΅ Π²ΡΡΠ΅ ΠΏΡΠΈΠ΅ΠΌΡ ΠΏΠΎΠΌΠΎΠ³ΡΡ Π²Π°ΠΌ ΡΠΎΠ·Π΄Π°ΡΡ ΠΏΠΎΡΡΡΡΠ°ΡΡΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΠ΄Π½Π°ΠΊΠΎ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ΠΈ ΠΈΠ³ΡΠ°ΡΡ ΡΠ΅ΡΠ°ΡΡΡΡ ΡΠΎΠ»Ρ Π² ΡΠ΄ΠΎΠ±ΡΡΠ²Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°, ΠΊΠ½ΠΎΠΏΠΊΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠΌ ΠΊΠ»ΡΡΠ΅Π²ΡΠΌ ΠΏΡΠΈΠ½ΡΠΈΠΏΠ°ΠΌ:
- Π‘Π½Π°ΡΠ°Π»Π° ΠΎΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΠΌΠ°ΡΠΊΠΈΡΠΎΠ²ΠΊΡ. ΠΡΠ΅Π³Π΄Π° ΠΏΠΎΠΌΠ΅ΡΠ°ΠΉΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ . Π Π²ΡΠ΅Π³Π΄Π° Π΄Π΅Π»Π°ΠΉΡΠ΅ ΡΡΠΎ Π³Π»Π°Π³ΠΎΠ»ΠΎΠΌ. Π Π°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΠΎΠΉ ΠΎΡΠΈΠ±ΠΊΠΎΠΉ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠΎΠΌΠ΅ΡΠΊΠ° ΠΊΠ½ΠΎΠΏΠΎΠΊ Β«ΠΠ΅ΡΠ΅ΠΉΡΠΈΒ» Π΄Π»Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ, ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ ΠΏΠΎΠΈΡΠΊ, ΠΎΡΠΏΡΠ°Π²ΠΊΠ° ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΠΎΠΉ ΠΏΠΎΡΡΡ ΠΈ ΡΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΠ΅. Π―ΡΠ»ΡΠΊΠΈ ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΠΊΠΎΡΠΎΡΠΊΠΈΠΌΠΈ ΠΈ ΠΏΠΎ ΡΡΡΠ΅ΡΡΠ²Ρ; Π½Π΅Ρ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ Π·Π°Π³ΡΠΎΠΌΠΎΠΆΠ΄Π°ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ.