Π₯ΠΎΠ²Π΅Ρ Π½Π° ΠΊΠ°ΡΡΠΎΡΠΊΠ°Ρ ΠΈ ΠΏΠ»ΠΈΡΠΊΠ°Ρ // ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ Π² Π²Π΅Π±Π΅
ΠΠΠΠ£ΠΠ―Π ΠΠ«Π ΠΠ ΠΠΠΠ« Π₯ΠΠΠΠ ΠΠ€Π€ΠΠΠ’Π ΠΠΠ― ΠΠΠ Π’ΠΠ§ΠΠ Π ΠΠΠΠ’ΠΠ
Π£Π»ΡΡΡΠ°Π΅Ρ ΡΠΈΡΠ°Π±Π΅Π»ΡΠ½ΠΎΡΡΡ ΡΠ΅ΠΊΡΡΠ° Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
ΠΠΊΡΠ΅Π½ΡΠΈΡΡΠ΅Ρ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΠΊΠ°ΡΡΠΎΡΠΊΠ΅, Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΡΡΡ
Π’Π΅ΠΊΡΡ Π½Π΅ ΠΏΠ΅ΡΠ΅Π±ΠΈΠ²Π°Π΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
ΠΠ΅Π»Π°Π΅Ρ ΠΊΠ°ΡΡΠΎΡΠΊΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΠΉ, ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΈ ΡΠΎΠ²Π°ΡΠΎΠ²
ΠΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ ΡΠ΅Π½ΠΈ
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΌΠ°ΡΡΡΠ°Π±Π°
Π‘ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΊΠ°ΡΡΠΎΡΠΊΠΈ
13 hover ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° jquery
1.

2. jQuery ΡΡΡΠ΅ΠΊΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
ΠΠ»Π°Π²Π½ΡΠΉ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ ΠΎΡ ΠΌΠΎΠ½ΠΎΡ ΡΠΎΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΊ ΡΠ²Π΅ΡΠ½ΠΎΠΌΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ jQuery.
3. Hover-ΡΡΡΠ΅ΠΊΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS ΠΈ jQuery
ΠΡΡΠ΅ΠΊΡ Π·Π°ΠΌΠ΅Π½Ρ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΊΠΈ. Π€ΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΈ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Ρ Π² Π²ΠΈΠ΄Π΅ ΡΠΏΡΠ°ΠΉΡΠΎΠ² (Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΎΡΠΎ, ΠΎΠ±ΡΠ΅Π΄Π΅Π½Π΅Π½Π½ΡΡ Π² ΠΎΠ΄Π½Ρ).
4. ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΡΡΠ΅ΠΊΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
jQuery ΡΡΡΠ΅ΠΊΡ: ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π·Π°ΡΠ΅ΠΌΠ½Π΅Π½ Π΄ΠΎ ΡΠ΅Ρ ΠΏΠΎΡ ΠΏΠΎΠΊΠ° Π½Π° Π½Π΅Π³ΠΎ Π½Π΅ Π±ΡΠ΄Π΅Ρ Π½Π°Π²Π΅Π΄Π΅Π½ ΠΊΡΡΡΠΎΡ ΠΌΡΡΠΈ. ΠΡΠ»ΠΈΡΠ½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± Π·Π°ΠΎΡΡΡΠΈΡΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Ρ Π½Π° ΠΊΠ°ΠΊΠΎΠΌ-Π½ΠΈΠ±ΡΠ΄Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅.
5. Π‘ΠΌΠ΅Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ jQuery
ΠΡΠ΅Π½Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ. ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΡΠΌΠ΅Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. ΠΡΠΈ ΠΊΠ»ΠΈΠΊΠ΅ ΠΌΡΡΠΊΠΎΠΉ Π²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΌΠ΅Π½ΡΡΡΡ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ.
6. CSS Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΡΡΠ΅ΠΊΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
Π‘ΠΌΠ΅Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. ΠΡΡΠ΅ΠΊΡ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ IE.
7. ΠΡΡΠ΅ΠΊΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ CSS ΡΠΏΡΠ°ΠΉΡΠΎΠ² ΠΈ jQuery
ΠΡΡΠ΅ΠΊΡ Π·Π°ΡΠ΅ΠΌΠ½Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Π³ΠΎ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ. ΠΠ»Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΡΡΡΠ΅ΠΊΡΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ CSS ΡΠΏΡΠ°ΠΉΡΡ.
8. jQuery ΠΏΠ»Π°Π³ΠΈΠ½ Β«jQueryZoomΒ»
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠΎΠ³ΠΎ ΠΏΠ»Π°Π³ΠΈΠ½Π° Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΡΡΠ΅ΠΊΡ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΈΠ»ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π° Π½Π΅Π³ΠΎ. ΠΠ»Π°Π³ΠΈΠ½ Π»Π΅Π³ΠΊΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ Π΄Π»Ρ Π²Π°ΡΠΈΡ Π½ΡΠΆΠ΄.
9. Π‘ΠΌΠ΅Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
Π‘ΠΌΠ΅Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΊΠΈ. ΠΡ Π»Π΅Π³ΠΊΠΎ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΠΉΡΠΈ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΡΠΎΠΌΡ jQuery ΠΏΠ»Π°Π³ΠΈΠ½Ρ Π² ΠΈΠ½ΡΠ΅ΡΠ½Π΅Ρ-ΠΌΠ°Π³Π°Π·ΠΈΠ½Π°Ρ ΠΈ ΠΊΠ°ΡΠ°Π»ΠΎΠ³Π°Ρ .
10. jQuery ΡΡΡΠ΅ΠΊΡ ΠΏΠ»Π°Π²Π½ΠΎΠ³ΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ²Π΅ΡΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ Π½Π° ΠΎΠ±ΡΠ΅ΠΊΡ, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅ΡΠ° ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΡΠ°ΡΡΠΈ ΡΡΡΠ°Π½ΠΈΡΡ.
11. ΠΠ»Π°Π³ΠΈΠ½ jQuery Β«Hover Image ZoomΒ»
Π£Π²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°. ΠΡΡΠ΅ΠΊΡ ΠΏΡΠΈΠ±Π»ΠΈΠΆΠ΅Π½ΠΈΡ.
12. jQuery Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
ΠΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ. ΠΡΡΠ΅ΠΊΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π² Π΄Π²ΡΡ
Π²Π°ΡΠΈΠ°Π½ΡΠ°Ρ
: Ρ ΠΎΡΠ±ΡΠ°ΡΡΠ²Π°Π΅ΠΌΠΎΠΉ ΡΠ΅Π½ΡΡ ΠΈ Ρ ΠΎΡΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ.
13. jQuery ΡΡΡΠ΅ΠΊΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Β«Images Hover Cycle effectΒ»
Π£Π²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΡΡΠ΅Π΄ΡΡΠ²Π°ΠΌΠΈ jQuery
- ΠΠ»Π°Π²Π½Π°Ρ
- ->
- ΠΠ°ΡΠ΅ΡΠΈΠ°Π»Ρ
- ->
Reg.ru: Π΄ΠΎΠΌΠ΅Π½Ρ ΠΈ Ρ ΠΎΡΡΠΈΠ½Π³
ΠΡΡΠΏΠ½Π΅ΠΉΡΠΈΠΉ ΡΠ΅Π³ΠΈΡΡΡΠ°ΡΠΎΡ ΠΈ Ρ ΠΎΡΡΠΈΠ½Π³-ΠΏΡΠΎΠ²Π°ΠΉΠ΄Π΅Ρ Π² Π ΠΎΡΡΠΈΠΈ.
ΠΠΎΠ»Π΅Π΅ 2 ΠΌΠΈΠ»Π»ΠΈΠΎΠ½ΠΎΠ² Π΄ΠΎΠΌΠ΅Π½Π½ΡΡ ΠΈΠΌΠ΅Π½ Π½Π° ΠΎΠ±ΡΠ»ΡΠΆΠΈΠ²Π°Π½ΠΈΠΈ.
ΠΡΠΎΠ΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅, ΠΏΠΎΡΡΠ° Π΄Π»Ρ Π΄ΠΎΠΌΠ΅Π½Π°, ΡΠ΅ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ Π±ΠΈΠ·Π½Π΅ΡΠ°.
ΠΠΎΠ»Π΅Π΅ 700 ΡΡΡ. ΠΊΠ»ΠΈΠ΅Π½ΡΠΎΠ² ΠΏΠΎ Π²ΡΠ΅ΠΌΡ ΠΌΠΈΡΡ ΡΠΆΠ΅ ΡΠ΄Π΅Π»Π°Π»ΠΈ ΡΠ²ΠΎΠΉ Π²ΡΠ±ΠΎΡ.
ΠΠ΅ΡΠ΅ΠΉΡΠΈ Π½Π° ΡΠ°ΠΉΡ->
ΠΠ΅ΡΠΏΠ»Π°ΡΠ½ΡΠΉ ΠΡΡΡ Β«ΠΡΠ°ΠΊΡΠΈΠΊΠ° HTML5 ΠΈ CSS3Β»
ΠΡΠ²ΠΎΠΉΡΠ΅ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ ΠΏΠΎΡΠ°Π³ΠΎΠ²ΡΠΉ Π²ΠΈΠ΄Π΅ΠΎΠΊΡΡΡ
ΠΏΠΎ ΠΎΡΠ½ΠΎΠ²Π°ΠΌ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΉ Π²Π΅ΡΡΡΠΊΠΈ
Π½Π° HTML5 ΠΈ CSS3 Ρ ΠΏΠΎΠ»Π½ΠΎΠ³ΠΎ Π½ΡΠ»Ρ.
ΠΠ°ΡΠ°ΡΡ->
Π€ΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ Bootstrap: Π±ΡΡΡΡΠ°Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½Π°Ρ Π²ΡΡΡΡΠΊΠ°
ΠΠΎΡΠ°Π³ΠΎΠ²ΡΠΉ Π²ΠΈΠ΄Π΅ΠΎΠΊΡΡΡ ΠΏΠΎ ΠΎΡΠ½ΠΎΠ²Π°ΠΌ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΉ Π²Π΅ΡΡΡΠΊΠΈ Π² ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ΅ Bootstrap.
ΠΠ°ΡΡΠΈΡΠ΅ΡΡ Π²Π΅ΡΡΡΠ°ΡΡ ΠΏΡΠΎΡΡΠΎ, Π±ΡΡΡΡΠΎ ΠΈ ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΌΠΎΡΠ½ΡΠΉ ΠΈ ΠΏΡΠ°ΠΊΡΠΈΡΠ½ΡΠΉ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ.
ΠΠ΅ΡΡΡΠ°ΠΉΡΠ΅ Π½Π° Π·Π°ΠΊΠ°Π· ΠΈ ΠΏΠΎΠ»ΡΡΠ°ΠΉΡΠ΅ Π΄Π΅Π½ΡΠ³ΠΈ.
ΠΠΎΠ»ΡΡΠΈΡΡ Π² ΠΏΠΎΠ΄Π°ΡΠΎΠΊ->
Π₯ΠΎΡΠΈΡΠ΅ ΠΎΡΠ²ΠΎΠΈΡΡ CMS WordPress?
ΠΠΎΠ»ΡΡΠΈΡΠ΅ ΡΡΠΎΠΊΠΈ ΠΏΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ ΠΈ Π²Π΅ΡΡΡΠΊΠ΅ ΡΠ°ΠΉΡΠ° Π½Π° WordPress.
ΠΠ°ΡΡΠΈΡΠ΅ΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ ΡΠ΅ΠΌΠ°ΠΌΠΈ ΠΈ Π½Π°ΡΠ΅Π·Π°ΡΡ ΠΌΠ°ΠΊΠ΅Ρ.
ΠΠ΅ΡΠΏΠ»Π°ΡΠ½ΡΠΉ Π²ΠΈΠ΄Π΅ΠΎΠΊΡΡΡ ΠΏΠΎ ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΡΠ°ΠΉΡΠ°, Π΅Π³ΠΎ Π²Π΅ΡΡΡΠΊΠ΅ ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ΅ Π½Π° CMS WordPress!
ΠΠΎΠ»ΡΡΠΈΡΡ Π² ΠΏΠΎΠ΄Π°ΡΠΎΠΊ->
*ΠΠ°Π²Π΅Π΄ΠΈΡΠ΅ ΠΊΡΡΡΠΎΡ ΠΌΡΡΠΈ Π΄Π»Ρ ΠΏΡΠΈΠΎΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ.
ΠΠ°Π·Π°Π΄ ΠΠΏΠ΅ΡΠ΅Π΄
Π£Π²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΡΡΠ΅Π΄ΡΡΠ²Π°ΠΌΠΈ jQuery
Π ΡΡΠΎΠΌ Π²ΠΈΠ΄Π΅ΠΎΡΡΠΎΠΊΠ΅ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΠΊΡΠΈΠΏΡ, Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Π³ΠΎ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ.
Π’Π°ΠΊΠ°Ρ ΡΡΠ½ΠΊΡΠΈΡ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΏΠΎΠ»Π΅Π·Π½Π° Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ ΡΠ»ΡΡΠ°ΡΡ .
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅:
β ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ ΡΠΌΠ΅Π½ΡΡΠ΅Π½Π½ΡΠ΅ ΡΠΎΡΠΎ ΡΠΎΠ²Π°ΡΠΎΠ² Π² ΠΈΠ½ΡΠ΅ΡΠ½Π΅Ρ-ΠΌΠ°Π³Π°Π·ΠΈΠ½Π΅
β ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π³Π°Π»Π΅ΡΠ΅ΠΈ ΠΈΠ· ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΉ Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΠΌΠΈ ΠΏΡΠ΅Π²ΡΡ-ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°ΠΌΠΈ
β Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΠΎΠ²Π°ΡΡ Π²Π°ΡΠΈ ΠΏΠΎΡΡΡΠΎΠ»ΠΈΠΎ ΠΈ Ρ.Π΄.
ΠΠ°Π½Π½ΡΠΉ ΡΠΊΡΠΈΠΏΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ Π² ΡΠ°ΠΌΡΡ ΡΠ°Π·Π½ΡΡ ΡΠΈΡΡΠ°ΡΠΈΡΡ , Π΅ΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΡΠΊΠΎΠ½ΠΎΠΌΠΈΡΡ ΠΌΠ΅ΡΡΠΎ Π½Π° ΡΠΊΡΠ°Π½Π΅, Π΄Π°Π² ΠΏΡΠΈ ΡΡΠΎΠΌ ΡΠ΅Π»ΠΎΠ²Π΅ΠΊΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΠ°Π·Π³Π»ΡΠ΄Π΅ΡΡ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΠΈΠ· ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π² Π±ΠΎΠ»Π΅Π΅ Π²ΡΡΠΎΠΊΠΎΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠΈ.
Π Π΄Π°Π½Π½ΠΎΠΌ Π²ΠΈΠ΄Π΅ΠΎ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΡΠ½ΠΊΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΡΠΎΠ³ΠΎ ΡΠΊΡΠΈΠΏΡΠ° ΠΈ ΡΠ°Π·Π±Π΅ΡΠ΅ΠΌ Π΅Π³ΠΎ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΡΠΏΡΠ°Π²Π»ΡΡΡ ΠΎΡΠ½ΠΎΠ²Π½ΡΠΌΠΈ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ°ΠΌΠΈ:
β ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½Π½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
β ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΅Π³ΠΎ ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ
β ΠΎΡΡΡΡΠΏΠ°ΠΌΠΈ ΠΌΠ΅ΠΆΠ΄Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ
β ΡΠΊΠΎΡΠΎΡΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΈ Π΄Ρ.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΡΡΠΎΡ ΡΡΠΎΠΊ ΠΏΡΡΠΌΠΎ ΡΠ΅ΠΉΡΠ°Ρ, Π»ΠΈΠ±ΠΎ ΡΠΊΠ°ΡΠ°ΡΡ Π΅Π³ΠΎ ΡΠ΅Π±Π΅ Π½Π° ΠΊΠΎΠΌΠΏΡΡΡΠ΅Ρ ΠΏΠΎ ΡΡΡΠ»ΠΊΠ΅ Π²ΡΡΠ΅.
P.S. ΠΡΠΈΡΠΌΠΎΡΡΠΈΡΠ΅ΡΡ ΠΊ ΠΏΡΠ΅ΠΌΠΈΡΠΌ-ΡΡΠΎΠΊΠ°ΠΌ ΠΏΠΎ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌ Π°ΡΠΏΠ΅ΠΊΡΠ°ΠΌ ΡΠ°ΠΉΡΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ, Π²ΠΊΠ»ΡΡΠ°Ρ JavaScript, jQuery ΠΈ Ajax, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΊ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎΠΌΡ ΠΊΡΡΡΡ ΠΏΠΎ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΉ Π²Π΅ΡΡΡΠΊΠ΅. ΠΡΠ΅ ΡΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ Π²Π°ΠΌ Π±ΡΡΡΡΠ΅Π΅ ΠΎΠ²Π»Π°Π΄Π΅ΡΡ Π²Π°ΠΆΠ½ΡΠΌΠΈ Π½Π°Π²ΡΠΊΠ°ΠΌΠΈ Π² ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ ΡΠ°ΠΉΡΠΎΠ²:
ΠΠΎΠ½ΡΠ°Π²ΠΈΠ»ΡΡ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π» ΠΈ Ρ
ΠΎΡΠΈΡΠ΅ ΠΎΡΠ±Π»Π°Π³ΠΎΠ΄Π°ΡΠΈΡΡ?
ΠΡΠΎΡΡΠΎ ΠΏΠΎΠ΄Π΅Π»ΠΈΡΠ΅ΡΡ Ρ Π΄ΡΡΠ·ΡΡΠΌΠΈ ΠΈ ΠΊΠΎΠ»Π»Π΅Π³Π°ΠΌΠΈ!
Π‘ΠΌΠΎΡΡΠΈΡΠ΅ ΡΠ°ΠΊΠΆΠ΅:
ΠΠ°Π²Π΅ΡΡ
35 Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² CSS, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅Π»ΡΠ·Ρ ΠΏΡΠΎΠΏΡΡΡΠΈΡΡ Π΄Π»Ρ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°
Π‘Π΅Π³ΠΎΠ΄Π½Ρ Π² ΡΠ΅ΡΠΈ Π΅ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΡΠ°Π»ΠΈ ΠΎΡΠ½ΠΎΠ²Π½ΡΠΌ ΠΏΡΠΈΠ²Π»Π΅ΡΠ΅Π½ΠΈΠ΅ΠΌ Π²Π½ΠΈΠΌΠ°Π½ΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΠΈΡ ΠΊ Π½Π΅ΠΌΡ ΠΏΠΎ Π²ΡΠ΅ΠΌ Π²ΠΎΠΏΡΠΎΡΠ°ΠΌ. Π ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡΡ
, ΠΏΡΡΠ΅ΡΠ΅ΡΡΠ²ΠΈΡΡ
, ΠΏΡΠΎΠ΄ΡΠΊΡΠ°Ρ
ΠΈΠ»ΠΈ ΡΡΠ΅Π½Π°Ρ
Π»ΡΠ±ΠΎΠ³ΠΎ ΡΠΎΠ΄Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ²Π»ΡΡΡΡΡ ΠΎΠ΄Π½ΠΈΠΌΠΈ ΠΈΠ· Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΏΠΎΡΡΠΎΠΌΡ, Π΅ΡΠ»ΠΈ ΠΌΡ ΡΠΌΠΎΠΆΠ΅ΠΌ ΠΏΡΠΎΠΈΠ·Π²Π΅ΡΡΠΈ ΠΏΠΎΡΠ°Π·ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ, ΡΡΠ° ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡ ΡΠΌΠΎΠΆΠ΅Ρ ΡΠ΄Π΅ΡΠΆΠ°ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ, ΠΏΠΎΠΏΠ°Π²ΡΠ΅Π³ΠΎ Π½Π° Π½Π°Ρ Π²Π΅Π±-ΡΠ°ΠΉΡ.
ΠΡΠΎ ΠΏΡΠΎΡΡΠΎ ΡΠΎ, ΡΠ΅Π³ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΠΈΠ· ΡΡΠΈΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² ΡΠΏΠΎΡΠΎΠ±Π½Ρ Π΄ΠΎΡΡΠΈΡΡ Π½Π° ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Π΅ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°. CSS-ΡΡΡΠ΅ΠΊΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π² Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΠ»ΡΡΠ°ΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΈ ΡΡΠΎ Π² Π΄ΡΡΠ³ΠΈΡ ΠΎΠ½ΠΈ ΠΈΠΌΠ΅ΡΡ ΡΠ΅Π»Ρ Π±ΡΡΡ ΠΏΡΠΎΡΠ΅, Π½ΠΎ Π²ΡΠ΅Π³Π΄Π° Π΄ΠΎΡΡΠΈΠ³Π°ΡΡ ΡΠΎΠ³ΠΎ, ΠΊ ΡΠ΅ΠΌΡ Π²ΡΠ΅ ΠΌΡ ΡΡΡΠ΅ΠΌΠΈΠΌΡΡ: ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΎΡΡΠ°Π²Π°Π»ΡΡ Π²Π½ΠΈΠΌΠ°ΡΠ΅Π»ΡΠ½ΡΠΌ ΠΊΠΎ Π²ΡΠ΅ΠΌΡ, ΡΡΠΎ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ Π½Π°Ρ Π²Π΅Π±-ΡΠ°ΠΉΡ. ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ΅ΠΏΠ΅ΡΡ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»ΠΈΠΌ 33 ΡΡΡΠ΅ΠΊΡΠ° CSS-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΈΠ»ΡΠ½ΠΎ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅.
ΠΡΠΎΡ ΡΡΡΠ΅ΠΊΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΡΡΡΡΠ°ΡΡΠΈΠΉ, ΠΊΠΎΠ³Π΄Π° ΡΠ°Π·Π»ΠΎΠΆΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° 3D ΠΊΡΠ± ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ°ΡΠ°ΡΡΡΡ Π²ΠΎΠΊΡΡΠ³ ΡΠ²ΠΎΠ΅ΠΉ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ, ΡΡΠΎΠ±Ρ ΠΏΡΠΎΠΈΠ·Π²Π΅ΡΡΠΈ ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ. ΠΠ° ΠΎΡΠ½ΠΎΠ²Π΅ CSS3D, Π΅ΡΠ»ΠΈ Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ Π½Π° ΡΠ²ΠΎΠ΅ΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅, ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Ρ ΠΏΠΎΡΠ΅ΡΡΠ΅Ρ Π΄Π°Ρ ΡΠ΅ΡΠΈ.
Π’Π΅ΠΌΠ΅ ΡΡΠ°ΡΡΠΈ:
ΠΡΠ΅ 35 ΡΠ΅ΠΊΡΡΠΎΠ²ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² CSS Π΄Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°
ΠΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ: ΠΊΠΎΠ³Π΄Π° ΠΌΡ ΠΎΡΡΠ°Π²Π»ΡΠ΅ΠΌ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π½Π°Π΄ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ, ΡΡΠΎ ΡΠΏΠ°ΡΡΡ, ΠΊΠ°ΠΊ Π΅ΡΠ»ΠΈ Π±Ρ ΠΎΠ½ Π±ΡΠ» ΠΏΠΎΡΠ°ΠΆΠ΅Π½ ΡΠ΅ΠΌ ΠΆΠ΅. ΠΡΠ»ΠΈΡΠ½Π°Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π΄Π»Ρ Π΅ΡΠ΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΎΡΠ»ΠΈΡΠ½ΠΎΠ³ΠΎ ΡΡΡΠ΅ΠΊΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
HTML ΠΈ CSS ΠΈΠ΄ΡΡ ΡΡΠΊΠ° ΠΎΠ± ΡΡΠΊΡ, ΡΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΠΏΠ°Π½ΠΎΡΠ°ΠΌΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ ΠΊΠ°ΠΊ Π±ΡΠ΄ΡΠΎ ΠΌΡ ΡΠΌΠΎΡΡΠΈΠΌ Ρ ΠΊΡΡΡΠΈ Π·Π΄Π°Π½ΠΈΡ Π² Π³ΠΎΡΠΎΠ΄Π΅.
Π’Π΅ΠΌΠ΅ ΡΡΠ°ΡΡΠΈ:
27 ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² CSS Π΄Π»Ρ ΡΠΈΠΏΠΎΠ³ΡΠ°ΡΠΈΠΊΠΈ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°
Un Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½Ρ ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ΅Ρ ΡΠ»ΡΠΆΠΈΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΡΠ΅Π»ΠΈ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π²Π΅Π±-ΡΠ°ΡΡΠΈ.
ΠΡΠ»ΠΈΡΠ½ΡΠΉ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ°Π· ΠΎΡΡΠ°Π²ΡΡΠ΅ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ ΡΠ°ΠΊ ΡΡΠΎ ΠΎΠ½ ΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΌΠ΅ΠΆΠ΄Ρ Π΄Π²ΡΠΌΡ ΠΊΠΎΠ½ΡΡΠ°ΡΡΠ°ΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π΄Π°Π΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅.
ΠΠ°Π²Π΅Π΄Ρ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π΅Π³ΠΎ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ ΡΠΎΡΡΠ°Π²Π»Π΅Π½Π½ΡΠΌ.
ΠΡΡΠ΅ΠΊΡ ΡΠ΅ΡΠΊΠΈ ΡΠΎΠ·Π΄Π°Π΅ΡΡΡ ΠΏΡΠΈ Π²ΡΡ ΠΎΠ΄Π΅ ΠΈΠ· el ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π½Π° ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΡΠΎΡΠΊΠ΅ ΠΈΠ· ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΈΡΠΊΠΈ Ρ Π·Π΅ΡΠΊΠ°Π»ΡΠ½ΡΠΌ ΡΡΡΠ΅ΠΊΡΠΎΠΌ ΠΊΠΎΠ³Π΄Π° ΠΌΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΠΌ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ ΡΠΏΡΠ°Π²Π° Π½Π°Π»Π΅Π²ΠΎ ΠΈ Π½Π°ΠΎΠ±ΠΎΡΠΎΡ.
ΠΠ΅ΠΉΡΡΠ²ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΡΡΠ΅ΠΌΠΈΡΡΡ ΠΏΡΠΎΠ΅ΡΠΈΡΠΎΠ²Π°ΡΡ ΡΡΡΠ΅ΠΊΡ ΠΎΡΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΡΡΡΠ΅ΠΊΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ CSS.
ΠΠΎΠΆΠ΅Ρ Π΄ΠΎΡΡΠΈΠ³Π°ΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π·Π°ΠΊΡΡΠΆΠΈΡΡΡ Π³ΠΎΠ»ΠΎΠ²Π° ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊ ΡΡΠΎΡΠΎΠ½Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΎΠ·Π΄Π°ΡΡ ΠΏΠΎΡΠ°Π·ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ Π΄Π²ΠΎΠΉΠ½ΠΎΠΉ ΡΡΡΠ΅ΠΊΡ.
ΠΠΎΠ³Π΄Π° ΠΌΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅ΠΌ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΏΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ ΡΡΡΠ΅ΠΊΡ ΡΠ°Π·ΠΌΡΡΠΈΡ ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΡΡΠ΅Π·Π°Π΅Ρ Π² ΡΡΠΈΡΠ°Π½Π½ΡΠ΅ ΡΠ΅ΠΊΡΠ½Π΄Ρ.
ΠΡΡΡ ΡΡΡΠ΅ΠΊΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π² ΡΠΎΡ ΠΆΠ΅ ΠΌΠΎΠΌΠ΅Π½Ρ, Π² ΠΊΠΎΡΠΎΡΡΠΉ ΡΡΠ°Π²ΠΈΠΌ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ Π½Π°Π²Π΅Π΄ΠΈΡΠ΅ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅.
ΠΡΠ»ΠΈΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ Π·Π°Π²ΠΈΡΠ°Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΡΠ°Π²ΠΈΡ ΡΠ°ΡΠΊΡΡΠ» ΡΠΊΡΡΡΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ΄ ΡΠ°ΠΌΠΈΠΌ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ. ΠΡΠ»ΠΈΡΠ½Π°Ρ ΠΎΡΠ΄Π΅Π»ΠΊΠ° ΠΈ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΠΏΠΎΠΊΠ°Π·Π° ΡΠ²ΠΎΡΡΠ΅ΡΠΊΠΎΠΉ ΠΈ Π»ΡΠ±ΠΎΠΏΡΡΠ½ΠΎΠΉ Π³Π°Π»Π΅ΡΠ΅ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.
Π’Π΅ΠΊΡΡ ΠΎΡΠΊΡΡΠ²Π°Π΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Ρ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ ΡΠΎ ΡΠ»Π΅ΠΏΡΠΌ ΡΡΡΠ΅ΠΊΡΠΎΠΌ ΠΎΡΠΊΡΡΠ²Π°Π΅ΡΡΡ Ρ ΡΠ΅ΡΠ΅Π΄ΠΈΠ½Ρ.
ΠΠ°ΠΊ Π±ΡΠ΄ΡΠΎ Ρ Π½Π°Ρ Π² ΡΡΠΊΠ°Ρ ΠΏΠ΅ΡΠ΅ΠΊΡΠ΅ΡΡΠΈΠ΅ ΡΠ΅Π»Π΅ΠΎΠ±ΡΠ΅ΠΊΡΠΈΠ²Π°, ΠΏΡΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΠΈ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ ΠΎΡΠΊΡΡΠ²Π°Π΅ΡΡΡ ΡΠ°ΡΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
ΠΠ΅Π»ΠΈΠΊΠΎΠ»Π΅ΠΏΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ, Π½ΠΎ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎΠΉ ΠΏΠΎ ΡΠΎΡΡΠ°Π²Ρ. ΠΡΠ»ΠΈ ΡΡ ΡΡΠΎ-ΡΠΎ ΠΈΡΠ΅ΡΡ ΡΠΏΡΠΎΡΠ΅Π½Π½ΡΠΉ ΠΈ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΡΡΡΠΊΠΈΠΉ, ΡΡΠΎΡ ΡΡΡΠ΅ΠΊΡ Π·Π°ΡΡΠ°Π²ΠΈΡ Π²Π°Ρ Π²Π»ΡΠ±ΠΈΡΡΡΡ.
ΠΡΡΠ³ΠΎΠΉ ΠΏΡΠΎΡΡΠΎΠΉ ΡΡΡΠ΅ΠΊΡ Π΄Π»Ρ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠΉ ΡΠ΅Π»ΠΈ.
ΠΡΠΎ ΡΠΈΠΏΠΈΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΊΠΎΡΠΎΡΡΡ Π²Ρ Π½Π°Π²Π΅ΡΠ½ΡΠΊΠ° Π·Π°Ρ ΠΎΡΠΈΡΠ΅ ΠΏΠ΅ΡΠ΅Π½Π΅ΡΡΠΈ Π½Π° ΡΠ²ΠΎΠΉ ΡΠ°ΠΉΡ ΠΏΡΡΠΌΠΎ ΡΠ΅ΠΉΡΠ°Ρ.
ΠΡΡΠ³Π°Ρ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π°, ΡΠ°ΠΊΠ°Ρ ΠΊΠ°ΠΊ ΡΡΡΠ΅ΠΊΡ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΠΊΠΎΠ³Π΄Π° ΠΌΡ ΠΎΡΡΠ°Π²Π»ΡΠ΅ΠΌ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΡ ΡΠΈΠ΄Π΅Π»Π° Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ.
ΠΠ°ΠΊ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΠ· Π½Π°Π·Π²Π°Π½ΠΈΡ, ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ ΠΏΠ΅ΡΠ΅Π²Π΅ΡΠ½Π΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΡΠ²Π΅Π»ΠΈΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠΌ ΡΡΠ΅ΠΊΠ»Π΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π΅Ρ Π΅Π³ΠΎ.
ΠΠ΅Ρ JavaScript Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΎΡΡΠΎΠ·Π΄Π°ΡΡ ΡΡΡΠ΅ΠΊΡ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ ΡΠ΅ΡΠΊΠΎΠΉ.
Un ΡΠΈΡΡΡΠΉ ΡΡΡΠ΅ΠΊΡ CSS Π΄Π»Ρ ΡΠ»ΠΎΡ ΠΊΠΎΡΠΎΡΡΠΉ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ Π½Π° ΠΈΠΌΠ΅ΡΡΠ΅ΠΌΡΡ Ρ Π½Π°Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ.
Π£ Π²Π°Ρ Π΅ΡΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° CSS-Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π΄Π»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΈΡ
Π²ΡΠ΅ ΠΏΠΎ ΡΡΡΠ»ΠΊΠ΅, ΡΡΠΎΠ±Ρ Π²ΡΠ±ΡΠ°ΡΡ ΡΠΎΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π²Π°ΠΌ Π±ΠΎΠ»ΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΠΈΡ. Π£ Π²Π°Ρ Π΅ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π° Π²ΡΠ±ΠΎΡ ΠΎΡΠ»ΠΈΡΠ½ΠΎΠ³ΠΎ ΠΊΠ°ΡΠ΅ΡΡΠ²Π°.
Π‘ ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎΠΉ Π»ΠΈΠ½Π΅ΠΉΠ½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ, ΡΡΡΠ΅ΠΊΡΠ½ΠΎΠ΅ Π½Π°ΡΠ»ΠΎΠ΅Π½ΠΈΠ΅. ΠΡΠ΅ ΠΎΠ΄ΠΈΠ½, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ΅Ρ ΡΡΠ°ΡΡ Π²Π°ΡΠΈΠΌ Π»ΡΠ±ΠΈΠΌΡΠΌ.
ΠΡ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅ΠΌΡΡ Ρ Π΄ΡΡΠ³ΠΈΠΌ ΡΡΡΠ΅ΠΊΡΠΎΠΌ ΠΎΠ²Π΅ΡΠ»Π΅ΠΉ Π² HTML ΠΈ CSS Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΊΡΡΠ³ΠΎΠ²ΡΠ΅ Π»ΠΈΠ½ΠΈΠΈ β Π³Π»Π°Π²Π½ΡΠ΅ Π³Π΅ΡΠΎΠΈ.
ΠΠΎΡΠ°Π·ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ Π²Π΅Π±-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². Π‘ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ²ΠΎΡΡΠ΅ΡΡΠ²Π° ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ½ΡΠ΅Π³ΡΠΈΡΠΎΠ²Π°ΡΡ Π½Π° ΠΊΠ°ΡΡΠΎΡΠΊΠ°Ρ ΠΊΠ°ΠΊ ΡΠ΅, ΡΡΠΎ Π² ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅.
ΠΡΡΠΎΠΊΠΎΠ΅ ΠΊΠ°ΡΠ΅ΡΡΠ²ΠΎ Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ Π·Π½Π°ΡΠΊΠΎΠ², ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΠΎΡΠ°Π΄ΡΠ΅Ρ Π²Π°Ρ ΠΏΡΠΈ ΠΏΠ΅ΡΠ²ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡΡ . ΠΠ½ ΡΠΌΠ΅Π΅Ρ ΠΏΠΎΠ΄Π½ΡΡΡ ΡΠ΅ΠΊΡΡ Ρ Π±ΠΎΠ»ΡΡΠΈΠΌ ΡΡΡΠ΅ΠΊΡΠΎΠΌ.
ΠΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Ρ ΡΡΠ±ΡΠΈΡΡΡ Ρ ΠΎΡΠ΅Π½Ρ ΠΏΠ»Π°Π²Π½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ ΠΈ Π΄ΠΎΠ±ΠΈΠ»ΡΡ.
ΠΠ΄ΠΈΠ½ ΠΈΠ· ΡΠ°ΠΌΡΡ ΡΡΠΈΠΌΡΠ»ΠΈΡΡΡΡΠΈΡ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΡΡΡΠ΅ΠΊΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ Π²ΠΎ Π²ΡΠ΅ΠΌ ΡΠΏΠΈΡΠΊΠ΅. Π ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ ΡΡΠ°Π½Π΅Ρ ΠΎΡΠΈΠ΅Π½ΡΠΈΡΠΎΠΌ Π΄Π»Ρ Β«3D ΠΊΡΠ±Π°Β».
ΠΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΏΡΠΎΡΡΠΎΠΉ ΡΡΡΠ΅ΠΊΡ, Π½ΠΎ ΠΎΡΠ΅Π½Ρ ΡΡΡΠ΅ΠΊΡΠ½ΠΎ Π±Π΅Π· ΠΈΠ·Π»ΠΈΡΠ΅ΡΡΠ².
Un ΡΡΡΠ΅ΠΊΡ Π±Π΅Π· ΠΎΡΠΎΠ±ΠΎΠΉ ΠΏΠΎΠΌΠΏΡ, Π½ΠΎ ΠΎΡΠ΅Π½Ρ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΠΉ Π² ΡΠΎΠ·Π΄Π°Π²Π°Π΅ΠΌΠΎΠΌ ΠΈΠΌ ΡΠ΅Π½Π΅Π²ΠΎΠΌ ΡΡΡΠ΅ΠΊΡΠ΅, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΊΠ°ΠΆΠ΅ΡΡΡ, ΡΡΠΎ ΠΎΠ½ Π±ΡΠ» ΠΏΠΎΠ΄Π½ΡΡ ΠΈΠ· Β«Π·Π΅ΠΌΠ»ΠΈΒ».
Π£ΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ ΠΈΠΌΠ΅Π΅Ρ ΡΡΡΠ΅ΠΊΡ ΡΠΎΠ»ΡΠΊΠ° Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ, ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°ΡΡΠ΅ΠΌ Π±ΠΎΠ»ΡΡΡΡ ΡΠ΅Π°Π»ΠΈΡΡΠΈΡΠ½ΠΎΡΡΡ. ΠΡΠ΅Π½Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ.
Un Π·Π°ΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π° Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ°Π·Π±ΠΈΡΠΎ Π½Π° ΡΠ΅ΡΠΊΡ ΡΠ΅ΡΠΎΠΊ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΠΎΠ²Π°ΡΡ Π²ΡΠ΅ΠΌΡ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ ΡΡΡΠ΅ΠΊΡΠ° ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅.
Un ΠΎΡΠ΅Π½Ρ ΠΌΠΎΠ΄Π½ΡΠΉ ΠΈ ΠΊΡΠ΅Π°ΡΠΈΠ²Π½ΡΠΉ ΡΡΡΠ΅ΠΊΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π° Π΄Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°. ΠΠ΅ ΠΏΡΠΎΠΏΡΡΡΠΈΡΠ΅ Π²ΡΡΡΠ΅ΡΡ Π² ΡΡΠΎΠΌ CSS.
Π’Π΅Π±Π΅ ΠΏΡΠΈΠ΄Π΅ΡΡΡ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΎ Π² ΡΠΎΡ ΠΌΠΎΠΌΠ΅Π½Ρ, ΠΊΠΎΠ³Π΄Π° Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΠΊΠΎΠ»Π΅ΡΠΎ ΠΌΡΡΠΈ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΡΡΡ Ρ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π° Π΄ΡΡΠ³ΠΎΠ΅ Ρ ΠΎΡΠ»ΠΈΡΠ½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π°. ΠΠ°Ρ Π²Π°ΡΡΠ²Π°ΡΡΠΈΠΉ.
ΠΠ°ΠΊ ΠΌΠ΅Π½ΡΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ
ΠΡ Π·Π΄Π΅ΡΡ: ΠΠ»Π°Π²Π½Π°Ρ β CSS β CSS ΠΡΠ½ΠΎΠ²Ρ β ΠΠ°ΠΊ ΠΌΠ΅Π½ΡΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ
Π― Π΄ΡΠΌΠ°Ρ, ΡΡΠΎ ΠΡ ΡΠ°ΡΡΠΎ Π²ΡΡΡΠ΅ΡΠ°Π»ΠΈ Π½Π° ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
ΡΠ°ΠΉΡΠ°Ρ
, ΠΊΠΎΠ³Π΄Π° ΠΡ Π½Π°Π²ΠΎΠ΄ΠΈΠ»ΠΈ ΠΌΡΡΠΊΠΎΠΉ Π½Π° ΠΊΠ°ΠΊΡΡ-Π½ΠΈΠ±ΡΠ΄Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ, ΠΈ ΠΎΠ½Π° ΠΌΠ΅Π½ΡΠ»Π°ΡΡ. Π‘Π°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ β ΡΡΠΎ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ. ΠΠΎΠΏΡΡΡΠΈΠΌ, ΠΏΠΎΡΠ»Π΅ ΡΡΠΎΠ³ΠΎ ΠΎΠ½Π° ΠΌΠ΅Π½ΡΠ»Π° ΡΠ²Π΅Ρ, ΠΊΠ°ΠΊ Π±Ρ Π΄Π΅Π»Π°ΡΡΡ Π°ΠΊΡΠΈΠ²Π½ΠΎΠΉ. ΠΠΎΡ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ ΠΌΠ΅Π½ΡΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ, ΠΡ ΡΠ·Π½Π°Π΅ΡΠ΅ ΠΈΠ· ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠΈ.
ΠΠ½ΠΎΠ³ΠΈΠ΅, ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ, Π±ΡΠ΄ΡΡ Π΄Π΅Π»Π°ΡΡ ΡΡΠΎ Π½Π° JavaScript, Ρ ΠΎΡΡ ΡΡΠΎ ΡΠΎΠ²Π΅ΡΡΠ΅Π½Π½ΠΎ Π½Π΅ΡΠ°Π·ΡΠΌΠ½ΠΎ. Π’Π°ΠΊΠΈΠ΅ Π²Π΅ΡΠΈ Π΄Π΅Π»Π°ΡΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS ΠΈ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° hover. ΠΠ°Π²Π°ΠΉΡΠ΅ Ρ ΠΠ°ΠΌΠΈ ΠΏΠΎΡΡΠ°Π²ΠΈΠΌ Π·Π°Π΄Π°ΡΡ.
Π£ Π½Π°Ρ Π΅ΡΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°. ΠΡ Ρ ΠΎΡΠΈΠΌ, ΡΡΠΎΠ±Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Ρ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ, ΠΎΠ½Π° ΠΈΠ·ΠΌΠ΅Π½ΡΠ»Π°ΡΡ. ΠΠΎΠ»Π΅Π΅ ΡΠΎΠ³ΠΎ, ΠΌΡ Ρ ΠΎΡΠΈΠΌ, ΡΡΠΎΠ±Ρ Π΅ΡΡ ΠΏΠΎΡΠ²Π»ΡΠ»Π°ΡΡ ΠΊΡΠ°ΡΠ½Π°Ρ ΡΠ°ΠΌΠΊΠ° Π²ΠΎΠΊΡΡΠ³ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ.
HTML-ΠΊΠΎΠ΄ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎΠΉ:
<div></div>
Π’Π΅ΠΏΠ΅ΡΡ CSS-ΠΊΠΎΠ΄:
.img {
background: url("image_1.jpg") no-repeat; // ΠΠΎΠ΄ΡΡΠ°Π²Π»ΡΠ΅ΠΌ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ
height: 100px; // ΠΡΡΠΎΡΠ° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ
width: 100px; // Π¨ΠΈΡΠΈΠ½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ
}
.img:hover {
background: url("image_2.jpg") no-repeat; // ΠΠΎΠ΄ΡΡΠ°Π²Π»ΡΠ΅ΠΌ ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ
border: 2px solid #f00; // Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ ΠΊΡΠ°ΡΠ½ΡΡ ΡΠ°ΠΌΠΊΡ
height: 120px; // ΠΡΡΠΎΡΠ° Π½ΠΎΠ²ΠΎΠΉ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ
width: 120px; // Π¨ΠΈΡΠΈΠ½Π° Π½ΠΎΠ²ΠΎΠΉ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ
}
ΠΠ»ΡΡΠ΅Π²ΠΎΠΉ ΠΎΡΠΈΠ±ΠΊΠΎΠΉ Π½ΠΎΠ²ΠΈΡΠΊΠΎΠ² ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΡΡΡΡΡΡΠ²ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ² width ΠΈ height. ΠΠ΅Π· Π½ΠΈΡ
ΠΏΡΡΡΠΎΠΉ Π±Π»ΠΎΠΊ div ΠΏΡΠΎΡΡΠΎ Π½Π΅ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡΡ, ΠΏΠΎΡΡΠΎΠΌΡ Π½Π΅ Π·Π°Π±ΡΠ²Π°ΠΉΡΠ΅ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ Π½Π°ΠΏΡΡΠΌΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ, ΠΈ ΠΎΠ½ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠΎΠ²ΠΏΠ°Π΄Π°ΡΡ Ρ ΡΠΈΡΠΈΠ½ΠΎΠΉ ΠΈ Π²ΡΡΠΎΡΠΎΠΉ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΡ ΠΏΠΎΠ΄ΡΡΠ°Π²Π»ΡΠ΅ΡΠ΅ Π² Π±Π»ΠΎΠΊ.
ΠΠ°Π½Π½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΊΠ»Π°ΡΡΠΈΡΠ΅ΡΠΊΠΈΠΌ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΡΡΠΎΡΠ½Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π±Π΅Π· ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ JavaScript, Π΄ΡΠΌΠ°Ρ, ΡΡΠΎ ΠΡ Π±ΡΠ΄Π΅ΡΠ΅ Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΅ΡΡ Π½Π΅ ΡΠ°Π·.
ΠΠΎΠ»Π½ΡΠΉ ΠΊΡΡΡ ΠΏΠΎ HTML, CSS ΠΈ ΠΏΠΎ Π²ΡΡΡΡΠΊΠ΅ ΡΠ°ΠΉΡΠΎΠ²: http://srs.myrusakov.ru/makeup
- Π‘ΠΎΠ·Π΄Π°Π½ΠΎ 04.06.2012 12:53:28
- ΠΠΈΡ Π°ΠΈΠ» Π ΡΡΠ°ΠΊΠΎΠ²
ΠΠΎΠΏΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»ΠΎΠ² ΡΠ°Π·ΡΠ΅ΡΠ°Π΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Ρ ΡΠΊΠ°Π·Π°Π½ΠΈΠ΅ΠΌ Π°Π²ΡΠΎΡΠ° (ΠΠΈΡ Π°ΠΈΠ» Π ΡΡΠ°ΠΊΠΎΠ²) ΠΈ ΠΈΠ½Π΄Π΅ΠΊΡΠΈΡΡΠ΅ΠΌΠΎΠΉ ΠΏΡΡΠΌΠΎΠΉ ΡΡΡΠ»ΠΊΠΎΠΉ Π½Π° ΡΠ°ΠΉΡ (http://myrusakov.ru)!
ΠΠΎΠ±Π°Π²Π»ΡΠΉΡΠ΅ΡΡ ΠΊΠΎ ΠΌΠ½Π΅ Π² Π΄ΡΡΠ·ΡΡ ΠΠΠΎΠ½ΡΠ°ΠΊΡΠ΅: http://vk.com/myrusakov.
ΠΡΠ»ΠΈ ΠΡ Ρ
ΠΎΡΠΈΡΠ΅ Π΄Π°ΡΡ ΠΎΡΠ΅Π½ΠΊΡ ΠΌΠ½Π΅ ΠΈ ΠΌΠΎΠ΅ΠΉ ΡΠ°Π±ΠΎΡΠ΅, ΡΠΎ Π½Π°ΠΏΠΈΡΠΈΡΠ΅ Π΅Ρ Π² ΠΌΠΎΠ΅ΠΉ Π³ΡΡΠΏΠΏΠ΅: http://vk. com/rusakovmy.
ΠΡΠ»ΠΈ ΠΡ Π½Π΅ Ρ
ΠΎΡΠΈΡΠ΅ ΠΏΡΠΎΠΏΡΡΡΠΈΡΡ Π½ΠΎΠ²ΡΠ΅ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Ρ Π½Π° ΡΠ°ΠΉΡΠ΅,
ΡΠΎ ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ΄ΠΏΠΈΡΠ°ΡΡΡΡ Π½Π° ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ: ΠΠΎΠ΄ΠΏΠΈΡΠ°ΡΡΡΡ Π½Π° ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ
ΠΡΠ»ΠΈ Ρ ΠΠ°Ρ ΠΎΡΡΠ°Π»ΠΈΡΡ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ Π²ΠΎΠΏΡΠΎΡΡ, Π»ΠΈΠ±ΠΎ Ρ ΠΠ°Ρ Π΅ΡΡΡ ΠΆΠ΅Π»Π°Π½ΠΈΠ΅ Π²ΡΡΠΊΠ°Π·Π°ΡΡΡΡ ΠΏΠΎ ΠΏΠΎΠ²ΠΎΠ΄Ρ ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠΈ, ΡΠΎ ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΡΡΠ°Π²ΠΈΡΡ ΡΠ²ΠΎΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ Π²Π½ΠΈΠ·Ρ ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΠΎΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠΉΡΠ΅ ΡΡΡ ΡΡΠ°ΡΡΡ Π΄ΡΡΠ·ΡΡΠΌ:
ΠΡΠ»ΠΈ ΠΠ°ΠΌ ΠΏΠΎΠ½ΡΠ°Π²ΠΈΠ»ΡΡ ΡΠ°ΠΉΡ, ΡΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΠ΅ ΡΡΡΠ»ΠΊΡ Π½Π° Π½Π΅Π³ΠΎ (Ρ ΡΠ΅Π±Ρ Π½Π° ΡΠ°ΠΉΡΠ΅, Π½Π° ΡΠΎΡΡΠΌΠ΅, Π² ΠΊΠΎΠ½ΡΠ°ΠΊΡΠ΅):
-
ΠΠ½ΠΎΠΏΠΊΠ°:
<a href=Β»https://myrusakov.ruΒ» target=Β»_blankΒ»><img src=Β»https://myrusakov.ru/images/button.gifΒ» alt=Β»ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ²ΠΎΠΉ ΡΠ°ΠΉΡΒ» /></a>ΠΠ½Π° Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π²ΠΎΡ ΡΠ°ΠΊ:
-
Π’Π΅ΠΊΡΡΠΎΠ²Π°Ρ ΡΡΡΠ»ΠΊΠ°:
<a href=Β»https://myrusakov.ruΒ» target=Β»_blankΒ»>ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ²ΠΎΠΉ ΡΠ°ΠΉΡ</a>ΠΠ½Π° Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π²ΠΎΡ ΡΠ°ΠΊ: ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ²ΠΎΠΉ ΡΠ°ΠΉΡ
- BB-ΠΊΠΎΠ΄ ΡΡΡΠ»ΠΊΠΈ Π΄Π»Ρ ΡΠΎΡΡΠΌΠΎΠ² (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΡΡΠ°Π²ΠΈΡΡ Π΅Ρ Π² ΠΏΠΎΠ΄ΠΏΠΈΡΠΈ):
[URL=Β»https://myrusakov.ruΒ»]ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ²ΠΎΠΉ ΡΠ°ΠΉΡ[/URL]
15 ΡΡΡΠ΅ΠΊΡΠΎΠ² Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ (ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΡΠΎΠ»ΡΠΊΠΎ CSS3) | XoZblog
ΠΠ΄ΡΠ°Π²ΡΡΠ²ΡΠΉΡΠ΅, ΡΠ²Π°ΠΆΠ°Π΅ΠΌΡΠ΅ ΡΠΈΡΠ°ΡΠ΅Π»ΠΈ XoZbloga! Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΏΠΎΠ΄Π³ΠΎΡΠΎΠ²Π»Π΅Π½Ρ 15 ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΡ
ΡΡΡΠ΅ΠΊΡΠΎΠ² Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ Π½Π° ΡΠ²ΠΎΠ΅ΠΌ ΡΠ°ΠΉΡΠ΅. ΠΠ°ΠΆΠ΄ΡΠΉ ΡΡΡΠ΅ΠΊΡ ΡΠΎΡΡΠΎΠΈΡ ΠΈΠ· HTML ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ ΠΈ ΡΡΠΈΠ»Π΅ΠΉ CSS. ΠΠ°ΠΌ ΠΎΡΡΠ°Π΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π² ΡΠ²ΠΎΠΉ ΠΈΡΡ
ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄. Π§ΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΈΡ
Π² Π΄Π΅ΠΉΡΡΠ²ΠΈΠΈ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΡΠΎΡΠΌΠΎΡΡ Π΄Π΅ΠΌΠΎ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ ΡΠΊΠ°ΡΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈΡΡ ΠΎΠ΄Π½ΠΈΠΊΠΎΠ² Π½Π΅ Π΄ΠΎΡΡΡΠΏΠ½ΠΎ
Π£Π²Π°ΠΆΠ°Π΅ΠΌΡΠΉ ΡΠΈΡΠ°ΡΠ΅Π»Ρ, XoZblog ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΈ ΡΠ°Π·Π²ΠΈΠ²Π°Π΅ΡΡΡ Π·Π° ΡΡΡΡ Π΄ΠΎΡ ΠΎΠ΄ΠΎΠ² ΠΎΡ Π½Π΅Π½Π°Π²ΡΠ·ΡΠΈΠ²ΠΎΠΉ ΡΠ΅ΠΊΠ»Π°ΠΌΡ. ΠΡΠ»ΠΈ Π½Π΅ Π·Π°ΡΡΡΠ΄Π½ΠΈΡ, Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΡΠΎΡ ΡΠ°ΠΉΡ Π² ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ AdBlock. Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ Π·Π° ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅!
Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ°
ΠΠ΅ΡΠ΅Π΄ ΡΠ΅ΠΌ, ΠΊΠ°ΠΊ ΠΏΡΠΈΡΡΡΠΏΠΈΡΡ ΠΊ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΉ, Π²ΠΎΡ ΠΊΡΡΠΎΡΠ΅ΠΊ CSS, ΠΊΠΎΡΠΎΡΡΠΉ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π±Π°Π·ΠΎΠ²ΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ»Π° Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.
1 | * { |
border-box ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π²ΡΡΠΎΡΠ° ΠΈ ΡΠΈΡΠΈΠ½Π° Π±Π»ΠΎΠΊΠΎΠ² Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ Π±ΡΠ΄ΡΡ Π²ΠΊΠ»ΡΡΠ°ΡΡ Π² ΡΠ΅Π±Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠ»Π΅ΠΉ ΠΈ Π³ΡΠ°Π½ΠΈΡ, Π° ΠΊΠ»Π°ΡΡ pic ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΠ±ΡΠΈΠΌ Π΄Π»Ρ Π²ΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. ΠΠ³ΡΠ°Π½ΠΈΡΠΈΠ²Π°Π΅Ρ Π²ΡΡΠΎΡΡ, ΡΠΈΡΠΈΠ½Ρ, Π·Π°Π΄Π°Π΅Ρ Π³ΡΠ°Π½ΠΈΡΡ ΠΈ ΡΠ΅Π½Ρ. Π ΡΡΠΎ ΡΠ°ΠΌΠΎΠ΅ Π²Π°ΠΆΠ½ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ (Ρ.Π΅. ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ) ΡΡΠΎΠ³ΠΎ Π±Π»ΠΎΡΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π²Π½ΡΡΡΠΈ, Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ Π½Π΅ Π²ΡΠΉΠ΄Π΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ overflow : hidden.
ΠΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ ΠΏΠ°Π½ΠΎΡΠ°ΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
ΠΠ°ΡΠ° ΠΏΠ΅ΡΠ²Π°Ρ Π³ΡΡΠΏΠΏΠ° ΡΡΡΠ΅ΠΊΡΠΎΠ² Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π² ΡΠ΅Π±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΡΡΠΊΠΎΠ² Ρ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
Π£Π²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠ΅
ΠΠ»Ρ Π½Π°ΡΠ°Π»Π° ΠΌΡ ΡΠ΄Π΅Π»Π°Π΅ΠΌ ΡΠ°ΠΊ, ΡΡΠΎ ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡ ΠΊΡΡΡΠΎΡ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π΅ΡΡΡ, ΠΎΡΡΠ°Π²Π°ΡΡΡ Π² ΠΏΡΠ΅Π΄Π΅Π»Π°Ρ ΡΠ²ΠΎΠΈΡ Π³ΡΠ°Π½ΠΈΡ. ΠΠΎΡ HTML:
1 | <div> |
ΠΠ°ΠΊ ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΈΠ΄Π΅ΡΡ Π·Π΄Π΅ΡΡ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ Π΄Π²Π° ΠΊΠ»Π°ΡΡΠ° pic ΠΈ grow. ΠΠ°Π·ΠΎΠ²ΡΠΉ pic ΠΊΠΎΡΠΎΡΡΠΉ Π·Π°Π΄Π°Π΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ Π³ΡΠ°Π½ΠΈΡΡ. Π’Π΅ΠΏΠ΅ΡΡ Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ, CSS.
1 | /*GROW*/ |
Π‘Π°ΠΌΠΎ ΠΏΠΎ ΡΠ΅Π±Π΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ 400Ρ
400px, Π½ΠΎ ΠΌΡ Π΅Π³ΠΎ ΠΏΠΎΠ΄Π³ΠΎΠ½ΡΠ΅ΠΌ ΠΏΠΎΠ΄ ΡΠ°Π·ΠΌΠ΅ΡΡ Π±Π»ΠΎΠΊΠ° 300x300px ΠΈ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ transition ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ, ΠΎΠ·Π½Π°ΡΠ°ΡΡΠ΅Π΅ ΡΡΠΎ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π±ΡΠ΄ΡΡ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡΡΡ ΠΏΠ»Π°Π²Π½ΠΎ Π² ΡΠ΅ΡΠ΅Π½ΠΈΠΈ ΠΎΠ΄Π½ΠΎΠΉ ΡΠ΅ΠΊΡΠ½Π΄Ρ, ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΠΏΡΠΎ transition. Π’Π°ΠΊ ΠΊΠ°ΠΊ Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΎΠ½ΠΎ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅ΡΡΡ ΠΊ ΠΈΡΡ
ΠΎΠ΄Π½ΡΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌ.
Π£ΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠ΅
ΠΡΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΡΠΎΡΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ. ΠΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΠΏΠΎΠ»Π½ΠΎΡΠ΅Π½Π½ΠΎΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ΅, Π° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΡΠΌΠ΅Π½ΡΡΠ°Π΅ΡΡΡ Π΄ΠΎ 300Ρ 300px. ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΡΠΎΠ·Π΄Π°Π΅ΡΡΡ ΡΡΡΠ΅ΠΊΡ ΡΠΆΠ°ΡΠΈΡ.
1 | <div> |
1 | /*SHRINK*/ |
ΠΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅
ΠΠ°Π½Π½ΡΠΉ ΡΡΡΠ΅ΠΊΡ Π½Π΅ ΠΌΠ°Π½ΠΈΠΏΡΠ»ΠΈΡΡΠ΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π½ΠΎ Π·Π°ΡΠΎ ΠΌΠ΅Π½ΡΠ΅Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ Π² Π±Π»ΠΎΠΊΠ΅. ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° ΡΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ Π² ΡΡΠΎΡΠΎΠ½Ρ.
1 | <div> |
ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ 600Ρ 300px.
1 | /*SIDEPAN*/ |
ΠΡΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΎΠ³ΠΎ ΠΆΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° transition ΠΌΡ ΠΏΠ»Π°Π²Π½ΠΎ ΠΌΠ΅Π½ΡΠ΅ΠΌ, Π½ΠΎ ΡΠΆΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ margin. ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΡΠΌΠ΅ΡΠ°Π΅ΠΌ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π²Π»Π΅Π²ΠΎ Π½Π° 200px.
ΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅
ΠΠ½Π°Π»ΠΎΠ³ΠΈΡΠ΅Π½ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌΡ ΠΈ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ Π±Ρ Π½Π΅ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡΡ. ΠΠΎ Π²ΡΠ΅ ΡΠ°ΠΊΠΈ ΡΠ»Π΅Π΄ΡΡΡ ΠΏΡΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΡΠ°ΠΊΠΎΠΉ ΡΡΡΠ΅ΠΊΡ, ΡΠΎΡΠ½Π΅Π΅ Ρ ΠΊΠ°ΠΊΠΈΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ.
1 | <div> |
ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ 300Ρ 600px.
1 | /*VERTPAN*/ |
Π’Π΅ΠΏΠ΅ΡΡ ΡΠΌΠ΅ΡΠ°Π΅ΠΌ Π²Π²Π΅ΡΡ Π½Π° 200px.
Π’ΡΠ°Π½ΡΡΠΎΡΠΌΠ°ΡΠΈΡ
ΠΠΎΠ²ΡΡΠ°Π΅ΠΌ ΡΠ»ΠΎΠΆΠ½ΠΎΡΡΡ ΡΠΎΠ·Π΄Π°Π²Π°Π΅ΠΌΡΡ
ΡΡΡΠ΅ΠΊΡΠΎΠ². ΠΠ°ΡΠ½Π΅ΠΌ Ρ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ Π½Π°ΠΊΠ»ΠΎΠ½Π°, Π° Π΄Π°Π»ΡΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅. ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π±ΡΠ΄Π΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ transform β Π΅ΡΠ΅ ΡΡΡΠ΅ΠΊΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ transform.
ΠΠ°ΠΊΠ»ΠΎΠ½
ΠΠ°ΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ. ΠΠ΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΏΠΎΠ²ΠΎΡΠΎΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ.
1 | <div> |
1 | /*TILT*/ |
ΠΡΠ΅ ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ, ΡΠ°ΠΊ ΡΡΠΎ ΠΏΠΎΠ²Π΅ΡΠ½ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° Π΄Π΅ΡΡΡΡ Π³ΡΠ°Π΄ΡΡΠΎΠ². ΠΡΠΎΡΡΠΎ ΠΈ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎ! ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΡΡΡΠ΅ΠΊΡ Π½Π°ΡΠ΅Π»Π΅Π½ Π½Π° ΡΠ°ΠΌ ΠΊΠ»Π°ΡΡ, Π° Π½Π΅ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅.
ΠΠΎΠ²ΠΎΡΠΎΡ
ΠΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π΅ Π½Π°ΡΠΈΠ½Π°Π΅Ρ Π²ΡΠ°ΡΠ°ΡΡΡΡ. ΠΠΎΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²ΡΠ°ΡΠ°Π΅ΡΡΡ, Π±Π»ΠΎΠΊ Π΄ΠΈΠ² ΡΡΠ°Π½ΡΡΠΎΡΠΌΠΈΡΡΠ΅ΡΡΡ Π² ΠΊΡΡΠ³. Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ Π²ΡΡ ΠΎΠ΄ΠΈΡ ΡΡΠΏΠ΅Ρ ΡΡΡΠ΅ΠΊΡ.
1 | <div> |
1 | /*MORPH*/ |
Π‘ΡΡΡ Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ Π΄Π»Ρ ΠΊΠ»Π°ΡΡΡ morph Π²ΡΠ°ΡΠ°Π΅ΡΡΡ Π½Π° 360 Π³ΡΠ°Π΄ΡΡΠΎΠ² ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ. Π ΡΡΠΎ ΠΆΠ΅ Π²ΡΠ΅ΠΌΡ, border-radius ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ 50%, Π² ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΡΠ΅Π³ΠΎ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΡΡ ΠΊΡΡΠ³.
Π€ΠΎΠΊΡΡΠΈΡΠΎΠ²ΠΊΠ°
ΠΠΎΡ Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΠΉ ΡΡΡΠ΅ΠΊΡ. ΠΠ΄Π½Π°ΠΊΠΎ Π²ΡΠ°ΡΠ΅Π½ΠΈΡ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π·Π°ΠΊΡΡΠ³Π»ΠΈΠΌ ΠΈ ΡΠ²Π΅Π»ΠΈΡΠΈΠΌ ΡΠΎΠ»ΡΠΈΠ½Ρ Π³ΡΠ°Π½ΠΈΡΡ.
1 | <div> |
1 | /*FOCUS*/ |
ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°, ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π΅ΠΌ ΡΠΎΠ»ΡΠΈΠ½Ρ Π³ΡΠ°Π½ΠΈΡΡ Ρ 10 Π΄ΠΎ 70px, ΠΈ ΠΊΠ°ΠΊ Π² ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ border-radius Π² 50%.
Π€ΠΈΠ»ΡΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ
ΠΠ° ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠΊ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠΈΠ»ΡΡΡΠΎΠ² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. Π ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΡ Π²ΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ², ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· ΠΊΠΎΡΠΎΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠ΅ΡΠΈΠΊΡΠΎΠ², ΡΡΠΎΠ±Ρ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΡΡ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΡΡ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, Π² ΡΠΈΠ»ΡΡΠ°Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π±ΡΠ΄Π΅ΠΌ ΠΏΡΠ΅ΡΠΈΠΊΡ-WebKit (Π΄Π»Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² Chrome ΠΈ Safari), ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π΄ΡΡΠ³ΠΈΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ, ΠΊ ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ ΠΈΡ (ΡΠΈΠ»ΡΡΡΡ) Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ.
Π Π°Π·ΠΌΡΡΠΈΠ΅
ΠΠ΅ΡΠ²ΡΠΉ ΡΡΡΠ΅ΠΊΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΡΠΎ ΡΠ°Π·ΠΌΡΡΠΈΠ΅. ΠΠ΄Π΅ΡΡ Ρ ΠΊΠΎΠ΄ΠΎΠΌ Π²ΡΠ΅ Π΅ΡΠ΅ ΠΏΡΠΎΡΠ΅, ΠΎΠ΄Π½Π° ΡΡΡΠΎΠΊΠ°.
1 | <div> |
1 | /*BLUR*/ |
ΠΠ°ΠΊ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΈΠ΄Π΅ΡΡ, ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ -webKit-filter, Ρ ΡΠ°Π·ΠΌΡΡΠΈΠ΅ΠΌ 5px.
Π§Π΅ΡΠ½ΠΎ-Π±Π΅Π»ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠΎΠ³ΠΎ ΡΠΈΠ»ΡΡΡΠ°, Π΄ΠΎΠ±ΡΠ΅ΠΌΡΡ ΡΡΡΠ΅ΠΊΡΠ° ΡΠ΅ΡΠ½ΠΎ-Π±Π΅Π»ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
1 | <div> |
1 | /*B&W*/ |
ΠΠ΄Π΅ΡΡ Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ» ΠΎΡΡΠ΅Π½ΠΊΠΈ ΡΠ΅ΡΠΎΠ³ΠΎ (grayscale) ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ 100%. ΠΡΠΎΡΠ΅Π½Ρ ΠΎΡΡΠ΅Π½ΠΊΠΎΠ² ΡΠ΅ΡΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ½ΠΈΠ·ΠΈΡΡ.
ΠΡΠ²Π΅ΡΠ»Π΅Π½ΠΈΠ΅
Π’Π΅ΠΏΠ΅ΡΡ ΠΏΠΎΠΈΠ³ΡΠ°Π΅ΠΌ ΡΡΠΊΠΎΡΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. Π‘Π½Π°ΡΠ°Π»Π° Π·Π°ΡΠ΅ΠΌΠ½ΠΈΠΌ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ, Π° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π²Π΅ΡΠ½Π΅ΠΌ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΡΡΠΊΠΎΡΡΠΈ.
1 | <div> |
1 | /*DARKEN*/ .brighten img { -webkit-filter: brightness(65%); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .brighten img:hover { |
ΠΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ ΡΡΠΊΠΎΡΡΡ Π΄Π΅Π»Π°Π΅ΠΌ 65%, Π° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ 145% Ρ. Π΅. ΡΡΡΠ΅ Π½Π° 45% ΠΎΡ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ.
Π‘Π΅ΠΏΠΈΡ
ΠΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΡΠ΅ΡΡΠΎ ΡΡΡΠ΅ΠΊΡ) ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄ ΡΠ²Π΅ΡΠ½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΡΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΡ ΡΠ΅ΠΏΠΈΡ.
1 | <div> |
1 | /*SEPIA*/ .sepia img { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .sepia img:hover { |
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ ΡΠΈΠ»ΡΡΡΠΎΠ² ΡΠ΅ΠΏΠΈΡ ΠΈ ΠΎΡΡΠ΅Π½ΠΊΠΈ ΡΠ΅ΡΠΎΠ³ΠΎ ΡΠΊΠ°Π·Π°Π½Ρ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ
, Π³Π΄Π΅ 100% ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΡΠΌ. ΠΡΠ»ΠΈ Π½Π΅ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ ΡΠΈΡΠ»ΠΎ ΡΠΎ 100% Π±ΡΠ΄ΡΡ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½Ρ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ.
ΠΠΎΠ½ΡΡΠ°ΡΡΠ½ΠΎΡΡΡ
Π’Π΅ΠΏΠ΅ΡΡ ΠΊΠΎΠ½ΡΡΠ°ΡΡΠ½ΠΎΡΡΡ. ΠΠ° ΠΌΠΎΠΉ Π²Π·Π³Π»ΡΠ΄ ΡΠ°ΠΌΡΠΉ ΠΊΠ»Π°ΡΡΠ½ΡΠΉ ΡΠΈΠ»ΡΡΡ, ΠΌΠΎΠΆΠ½ΠΎ ΡΠΏΡΠ°Π²Π»ΡΡΡ Π½Π°ΡΡΡΠ΅Π½Π½ΠΎΡΡΡΡ ΡΠ²Π΅ΡΠΎΠ² Π² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ.
1 | <div> |
1 | /*CONTRAST*/ .contrast img { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .contrast img:hover { |
Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠ°Ρ ΡΠ°Π·Π½ΠΈΡΠ° Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΡΠΎΠ³ΠΎ ΡΠΈΠ»ΡΡΡΠ°. ΠΠ±ΡΡΠ½ΡΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΊΠΎΠ½ΡΡΠ°ΡΡΠ½ΠΎΡΡΠΈ ΡΠ²Π»ΡΠ΅ΡΡΡ 100%. ΠΠΎΠ»ΡΡΠ΅ 100% ΡΠ²Π΅ΡΠ° Π½Π°ΡΡΡΠ΅Π½Π½Π΅ΠΉ, ΠΌΠ΅Π½ΡΡΠ΅ ΡΠ²Π΅ΡΠ° ΡΡΡΠΊΠ½Π΅ΡΡ.
ΠΡΡΠ΅Π½ΠΎΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΠ°Π½Π½ΡΠΉ ΡΠΈΠ»ΡΡΡ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ²Π΅ΡΠ° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ³Π»Π°.
1 | <div> |
1 | /*HUE_ROTATE*/ .hue-rotate img { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .hue-rotate img:hover { |
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΎΡΡΠ΅Π½ΠΊΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π·Π°Π΄Π°Π΅ΡΡΡ Π² Π³ΡΠ°Π΄ΡΡΠ°Ρ ΠΎΡ 0-360, Π³Π΄Π΅ 0 ΡΡΠΎ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅.
ΠΠ½Π²Π΅ΡΡΠΈΡ
ΠΡΠ΅ ΠΎΠ΄ΠΈΠ½ Webkit ΡΠΈΠ»ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ β ΡΡΠΎ ΠΈΠ½Π²Π΅ΡΡΠΈΡ.
1 | <div> |
1 | /*INVERT*/ .invert img { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .invert img:hover { |
ΠΠ°Π½Π½ΡΠΉ ΡΠΈΠ»ΡΡΡ ΠΈΠ½Π²Π΅ΡΡΠΈΡΡΠ΅Ρ ΡΠ²Π΅ΡΠ°. ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ Π·Π°Π΄Π°Π΅ΡΡΡ Π² % ΠΎΡ 0-100.
Π’Π°ΠΊΠΆΠ΅ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΠΈΡΡ ΡΠΈΠ»ΡΡΡΡ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΏΡΠ°Π²ΠΈΠ»Π΅. ΠΠΎΠ»ΡΡΠ°Π΅ΡΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΊΠΎΠΌΠΏΠ»Π΅ΠΊΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΡΠ΅ΡΠ½ΠΎ-Π±Π΅Π»ΠΎΠΉ ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΠΎΠ½ΡΡΠ°ΡΡΠ½ΠΎΡΡΠΈ:
1 | img { |
ΠΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ
ΠΠ°Π²Π΅ΡΠ½ΠΎΠ΅ ΡΠ°ΠΌΡΠΉ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΠΌΠ°Π½ΠΈΠΏΡΠ»ΡΡΠΈΠΈ Ρ ΡΠ²Π΅ΡΠ°ΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΠ°ΠΊ ΡΡΠΎ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΠΈ. Π’Π΅ΠΏΠ΅ΡΡ ΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS3. ΠΡΠ½Π΅Ρ Π΅Π³ΠΎ Π² ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΉ ΡΠ°Π·Π΄Π΅Π» Π² ΡΠ²ΡΠ·ΠΈ Ρ ΠΎΠ΄Π½ΠΎΠΉ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΡΡ, ΠΎ Π½Π΅ΠΉ Π½ΠΈΠΆΠ΅.
1 | <div> |
1 | /*OPACITY*/ .opacity img { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .opacity img:hover { |
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΠΈ Π² ΡΠΈΠ»ΡΡΡΠ΅ Π·Π°Π΄Π°Π΅ΡΡΡ ΠΎΠΏΡΡΡ ΡΠ°ΠΊΠΈ ΠΏΡΠΎΡΠ΅Π½ΡΠ°ΠΌΠΈ, Π³Π΄Π΅ 100% ΡΡΠΎ Π½Π΅ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎ, Π° 0% ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎ. ΠΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΠΈ Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ°ΠΊ ΠΎΠ±ΡΡΠ½ΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ CSS, Π° Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΊΠ°ΠΊ ΡΠΈΠ»ΡΡΡ. Π‘ΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ ΠΈ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠ°ΠΊΠΎΠΉ ΡΡΡΠ΅ΠΊΡ Π²ΠΎ Π²ΡΠ΅Ρ
Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
, Π΄Π°ΠΆΠ΅ Π² IE9+.
1 | img { |
ΠΡΠΈ ΡΠ°ΠΊΠΎΠΌ Π²Π°ΡΠΈΠ°Π½ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π±Π΅ΡΠ΅ΡΡΡ ΠΈΠ· ΠΈΠ½ΡΠ΅ΡΠ²Π°Π»Π° ΠΎΡ 1 Π΄ΠΎ 0.
ΠΡΠΎΡΠΌΠΎΡΡ Π΄Π΅ΠΌΠΎ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ ΡΠΊΠ°ΡΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈΡΡ ΠΎΠ΄Π½ΠΈΠΊΠΎΠ² Π½Π΅ Π΄ΠΎΡΡΡΠΏΠ½ΠΎ
Π£Π²Π°ΠΆΠ°Π΅ΠΌΡΠΉ ΡΠΈΡΠ°ΡΠ΅Π»Ρ, XoZblog ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΈ ΡΠ°Π·Π²ΠΈΠ²Π°Π΅ΡΡΡ Π·Π° ΡΡΡΡ Π΄ΠΎΡ ΠΎΠ΄ΠΎΠ² ΠΎΡ Π½Π΅Π½Π°Π²ΡΠ·ΡΠΈΠ²ΠΎΠΉ ΡΠ΅ΠΊΠ»Π°ΠΌΡ. ΠΡΠ»ΠΈ Π½Π΅ Π·Π°ΡΡΡΠ΄Π½ΠΈΡ, Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΡΠΎΡ ΡΠ°ΠΉΡ Π² ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ AdBlock. Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ Π·Π° ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅!
Π§ΡΠΎΠ±Ρ ΠΎΡΡΠ°Π²Π°ΡΡΡΡ Π² ΠΊΡΡΡΠ΅ ΡΠ²Π΅ΠΆΠΈΡ ΡΡΠ°ΡΠ΅ΠΉ ΠΈ ΡΡΠΎΠΊΠΎΠ² ΠΏΠΎΠ΄ΠΏΠΈΡΡΠ²Π°ΠΉΡΠ΅ΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ ΠΠΠΎΠ½ΡΠ°ΠΊΡΠ΅ ΠΈΠ»ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΠΉΡΠ΅ Π² ΠΊΡΡΠ³ΠΈ Π½Π° Google+. ΠΠ΅ Π·Π°Π±ΡΠ²Π°ΠΉΡΠ΅ ΠΎΡΡΠ°Π²Π»ΡΡΡ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ, ΡΠΏΠ°ΡΠΈΠ±ΠΎ!
Π§ΡΠΎΠ±Ρ ΠΎΡΡΠ°Π²Π°ΡΡΡΡ Π² ΠΊΡΡΡΠ΅ ΡΠ²Π΅ΠΆΠΈΡ ΡΡΠ°ΡΠ΅ΠΉ ΠΈ ΡΡΠΎΠΊΠΎΠ² ΠΏΠΎΠ΄ΠΏΠΈΡΡΠ²Π°ΠΉΡΠ΅ΡΡ Π½Π° Π΅ΠΆΠ΅Π½Π΅Π΄Π΅Π»ΡΠ½ΡΡ ΠΏΠΎΡΡΠΎΠ²ΡΡ ΡΠ°ΡΡΡΠ»ΠΊΡ ΠΈΠ»ΠΈ Π½Π° Π½ΠΎΠ²ΠΎΡΡΠ½ΡΡ Π»Π΅Π½ΡΡ RSS. Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ!
ΠΠ° ΡΡΠΈΠ»Π΅ β ΠΏΠΎΠ΄Π±ΠΎΡΠΊΠ° ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΡ CSS-ΡΠ²ΠΎΠΉΡΡΠ²
Π ΡΠΎΠ²ΡΠ΅ΒΠΌΠ΅Π½ΒΠ½ΠΎΠΌ Π²Π΅Π±Π΅ CSS Π½ΡΠΆΠ΅Π½ ΡΠΆΠ΅ Π½Π΅ ΡΠΎΠ»ΡΒΠΊΠΎ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΒΠ±Ρ ΠΎΡΠΎΡΠΌΒΠ»ΡΡΡ ΡΡΠΈΒΠ»ΠΈ Π·Π°Π³ΠΎΒΠ»ΠΎΠ²ΒΠΊΠΎΠ². Π 2019 Π³ΠΎΠ΄Ρ Π½Π° ΡΡΠΈΒΠ»ΡΡ
Π΄Π΅Π»Π°ΒΡΡ ΠΌΠ΅Π½Ρ, Π½Π°ΡΡΡΠ°ΒΠΈΒΠ²Π°ΒΡΡ Π°Π½ΠΈΒΠΌΠ°ΒΡΠΈΡ ΠΈ Π΄Π΅Π»Π°ΒΡΡ ΡΡΡΡ
ΒΠΌΠ΅ΡΒΠ½ΡΠ΅ ΡΠ°ΠΉΒΡΡ. Π‘Π΅Π³ΠΎΒΠ΄Π½Ρ β ΠΎΠ±Π·ΠΎΡ ΠΈΠ½ΡΠ΅ΒΡΠ΅ΡΒΠ½ΡΡ
CSS-ΡΠ²ΠΎΠΉΡΡΠ² ΠΈ ΠΈΡ
ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅.
ΠΠΈΠΏΠΊΠΈΠ΅ Π±Π»ΠΎΠΊΠΈ
ΠΡΠΈΒΠΌΠ΅Ρ: Codepen
Π§ΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΒΠ·ΡΒΠ΅ΠΌ: sticky
ΠΠ΅Π΄Π°Π²ΒΠ½ΠΎ Π² CSS ΠΏΠΎΡΠ²ΠΈΒΠ»ΠΈΡΡ Β«Π»ΠΈΠΏΒΠΊΠΈΠ΅Β» Π±Π»ΠΎΒΠΊΠΈ β ΠΎΠ½ΠΈ ΡΠΎΠ·Π΄Π°ΒΡΡ ΡΠ°ΠΊΠΈΠ΅ ΡΠ»Π΅ΒΠΌΠ΅Π½ΒΡΡ Π½Π° ΡΡΡΠ°ΒΠ½ΠΈΒΡΠ΅, ΠΊΠΎΡΠΎΒΡΡΠ΅ ΠΏΡΠΈ ΡΠΊΡΠΎΠ»ΒΠ»Π΅ ΠΎΡΡΠ°ΒΡΡΒΡΡ Π½Π° ΡΠ²ΠΎΒΡΠΌ ΠΌΠ΅ΡΡΠ΅. ΠΠΎ ΠΊΠ°ΠΊ ΡΠΎΠ»ΡΒΠΊΠΎ Π΄ΠΎ Π½ΠΈΡ Π΄ΠΎΠ΅Π·ΒΠΆΠ°ΒΡΡ Π΄ΡΡΒΠ³ΠΈΠ΅ Π±Π»ΠΎΒΠΊΠΈ, Π·Π°Π»ΠΈΠΏΒΡΠΈΠΉ ΡΠΎΠΆΠ΅ Π½Π°ΡΠΈΒΠ½Π°ΒΠ΅Ρ Π΄Π²ΠΈΒΠ³Π°ΡΡΒΡΡ. ΠΠΎΠ»ΡΒΡΠ°ΒΠ΅ΡΒΡΡ, ΡΡΠΎ ΠΎΠ½ Β«Π»ΠΈΠΏΒΠΊΠΈΠΉΒ» Π΄ΠΎ ΡΠ΅Ρ ΠΏΠΎΡ, ΠΏΠΎΠΊΠ° Π½Π΅ ΠΌΠ΅ΡΠ°ΒΠ΅Ρ Π΄ΡΡΒΠ³ΠΈΠΌ, β ΠΏΠΎΡΠΎΠΌ Π²Π΅Π΄ΡΡ ΡΠ΅Π±Ρ ΠΊΠ°ΠΊ ΠΎΠ±ΡΡΒΠ½ΡΠΉ Π±Π»ΠΎΠΊ. Π Π°Π½ΡΒΡΠ΅ Π΄Π»Ρ ΡΠ°ΠΊΠΎΒΠ³ΠΎ Π½ΡΠΆΠ΅Π½ Π±ΡΠ» JavaScript, Π° ΡΠ΅ΠΏΠ΅ΡΡ Π²ΠΎΠ½ Π΄ΠΎ ΡΠ΅Π³ΠΎ ΡΠ΅Ρ ΒΠ½ΠΈΒΠΊΠ° Π΄ΠΎΡΠ»Π°!
ΠΠΎΠΊΠ° ΠΏΠΎΠ»ΒΠ½ΠΎΒΡΡΡΡ ΡΡΠΎ ΡΠ°Π±ΠΎΒΡΠ°ΒΠ΅Ρ ΡΠΎΠ»ΡΒΠΊΠΎ Π² Π₯ΡΠΎΒΠΌΠ΅ ΠΈ Π‘Π°ΡΠ°ΒΡΠΈ, Π½ΠΎ Π΄Π»Ρ Π΄ΡΡΒΠ³ΠΈΡ Π±ΡΠ°ΒΡΒΠ·Π΅ΒΡΠΎΠ² ΠΌΠΎΠΆΒΠ½ΠΎ ΡΠΊΠ°ΒΠ·Π°ΡΡ, ΡΡΠΎ ΡΡΠΎ ΠΊΠ°ΠΊ Π±Ρ ΠΎΠ±ΡΡΒΠ½ΡΠΉ Π±Π»ΠΎΠΊ:
.sticky {
position: static; /* ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ ΠΏΠ΅ΡΠ΅Π΄ sticky */
position: sticky;
top: 0px; /* ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° */
}
ΠΠ°Π»Π΅ΡΠ΅Ρ Π² ΡΡΠΈΠ»Π΅ Pinterest
ΠΡΠΈΒΠΌΠ΅Ρ: Codepen
Π§ΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΒΠ·ΡΒΠ΅ΠΌ: ΠΎΠ±ΡΠΈΠΉ ΠΊΠΎΠ½ΒΡΠ΅ΠΉΒΠ½Π΅Ρ ΡΠΎ ΡΠ²ΠΎΠΉΒΡΡΠ²Π°ΒΠΌΠΈ column-width ΠΈ column-gap
Π§ΡΠΎΒΠ±Ρ ΡΠ΄Π΅ΒΠ»Π°ΡΡ ΡΠ°ΠΊΡΡ ΠΆΠ΅ ΡΠ΅ΡΒΠΊΡ, ΠΊΠ°ΠΊ Π² Pinterest, ΠΈΡΠΏΠΎΠ»ΡΒΠ·ΡΒΡΡ ΠΊΠΎΠ»ΠΎΠ½ΒΠΊΠΈ Ρ Ρ
ΠΈΡΒΡΠΎΒΡΡΡΡ: ΠΊΠ»Π°ΒΠ΄ΡΡ ΠΈΠ·ΠΎΠ±ΒΡΠ°ΒΠΆΠ΅ΒΠ½ΠΈΡ Π² ΠΎΠ±ΡΠΈΠΉ ΠΊΠΎΠ½ΒΡΠ΅ΠΉΒΠ½Π΅Ρ ΠΈ ΠΏΠΎΠ΄ΒΠΊΠ»ΡΒΡΠ°ΒΡΡ CSS. Π§ΡΠΎΒΠ±Ρ ΠΎΠ΄ΠΈΠ½ ΡΠ»Π΅ΒΠΌΠ΅Π½Ρ Π½Π΅ ΡΠ°Π·ΒΡΡΒΠ²Π°Π»ΒΡΡ ΠΌΠ΅ΠΆΒΠ΄Ρ Π΄Π²ΡΒΠΌΡ ΠΊΠΎΠ»ΠΎΠ½ΒΠΊΠ°ΒΠΌΠΈ, Π½ΡΠΆΒΠ½ΠΎ Π΄ΠΎΠ±Π°ΒΠ²ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΒΡΠ°ΒΠΆΠ΅ΒΠ½ΠΈΒΡΠΌ ΡΠ²ΠΎΠΉΒΡΡΠ²ΠΎ column-break-inside: avoid.
ΠΠ»Π°Π²Π½ΠΎΠ΅ ΠΊΠ°Π΄ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
ΠΡΠΈΒΠΌΠ΅Ρ: Codepen
Π§ΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΒΠ·ΡΒΠ΅ΠΌ: object-fit ΠΈ object-position
Π Π°Π½ΡΒΡΠ΅ ΠΎΠ±ΡΠ΅ΒΠ·Π°ΡΡ ΠΈΠ·ΠΎΠ±ΒΡΠ°ΒΠΆΠ΅ΒΠ½ΠΈΠ΅ Π±ΡΠ»ΠΎ Π½Π΅ΠΏΡΠΎΒΡΡΠΎ, Π½ΠΎ Π² Π½ΠΎΠ²ΠΎΠΌ CSS ΠΏΠΎΡΠ²ΠΈΒΠ»ΠΈΡΡ Π΄Π²Π° ΠΊΠ»Π°ΡΡΒΠ½ΡΡ ΡΠ²ΠΎΠΉΒΡΡΠ²Π° β object-fit ΠΈ object-position. ΠΠ½ΠΈ ΠΌΠ΅Π½ΡΒΡΡ ΡΠ°Π·ΒΠΌΠ΅ΒΡΡ ΠΈ ΠΏΠΎΠ»ΠΎΒΠΆΠ΅ΒΠ½ΠΈΠ΅ ΠΊΠ°ΡΒΡΠΈΠ½ΒΠΊΠΈ, Π½Π΅ ΡΡΠΎΒΠ³Π°Ρ ΡΠΎΠΎΡΒΠ½ΠΎΒΡΠ΅ΒΠ½ΠΈΡ ΡΡΠΎΒΡΠΎΠ½. ΠΠΎΠΆΒΠ½ΠΎ, ΠΊΠΎΠ½Π΅ΡΒΠ½ΠΎ, ΠΊΠ°Π΄ΒΡΠΈΒΡΠΎΒΠ²Π°ΡΡ ΠΊΠ°ΡΒΡΠΈΠ½ΒΠΊΡ ΠΈ Π² ΡΠ΅Π΄Π°ΠΊΒΡΠΎΒΡΠ΅, Π½ΠΎ Ρ CSS ΡΡΠΎ Π±ΡΠ΄Π΅Ρ ΠΏΠ»Π°Π²ΒΠ½ΠΎ ΠΈ ΡΡΡΠ΅ΡΠΈΡΠ½ΠΎ.
Π ΠΏΡΠΈΒΠΌΠ΅ΒΡΠ΅ ΠΏΠΎ ΡΡΡΠ»ΒΠΊΠ΅ Π²Ρ ΡΠ²ΠΈΒΠ΄ΠΈΒΡΠ΅, ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠ°Π±ΠΎΒΡΠ°ΒΠ΅Ρ: ΠΏΡΠΎΒΡΡΠΎ Π½Π°ΠΆΠΌΠΈΒΡΠ΅ Π½Π° ΡΠ΅ΠΊΒΠ±ΠΎΠΊΡ ΠΈ ΠΏΠΎΠΏΡΠΎΒΠ±ΡΠΉΒΡΠ΅ Π½Π΅ ΡΠ΄Π΅ΒΠ»Π°ΡΡ ΡΡΠΎ ΡΠ½ΠΎΠ²Π° π
Π£Π²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
ΠΡΠΈΒΠΌΠ΅Ρ: Codepen
Π§ΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΒΠ·ΡΒΠ΅ΠΌ: ΠΎΠ±ΠΎΒΡΠ°ΒΡΠΈΒΠ²Π°ΒΠ΅ΠΌ img Π² ΡΠ²ΠΎΠΉΒΡΡΠ²ΠΎ overflow ΡΠΎ Π·Π½Π°ΒΡΠ΅ΒΠ½ΠΈΒΠ΅ΠΌ hidden
ΠΠΎΠΏΡΒΠ»ΡΡΒΠ½ΡΠΉ ΠΈ ΠΏΡΠΎΒΡΡΠΎΠΉ ΠΏΡΠΈΒΡΠΌ, ΠΊΠΎΡΠΎΒΡΡΠΉ Π²ΠΈΠ·ΡΒΠ°Π»ΡΒΠ½ΠΎ Π²ΡΠ΄Π΅ΒΠ»ΡΒΠ΅Ρ ΠΊΠ°ΡΒΡΠΈΠ½ΒΠΊΠΈ Π½Π° ΡΡΡΠ°ΒΠ½ΠΈΒΡΠ΅. Π‘ΠΌΡΡΠ» Π΅Π³ΠΎ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΊΠ°ΡΒΡΠΈΠ½ΒΠΊΠ° ΡΠ»Π΅Π³ΒΠΊΠ° ΡΠ²Π΅ΒΠ»ΠΈΒΡΠΈΒΠ²Π°ΒΠ΅ΡΒΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅ΒΠ΄Π΅ΒΠ½ΠΈΠΈ Π½Π° Π½Π΅Ρ ΠΊΡΡΒΡΠΎΒΡΠ°, Π½ΠΎ ΠΎΡΡΠ°ΒΡΡΒΡΡ Π² ΠΏΡΠ΅ΠΆΒΠ½ΠΈΡ
Π³Π°Π±Π°ΡΠΈΡΠ°Ρ
.
Π’Π΅ΠΊΡΡ Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΎΠΉ Π² ΡΠ°ΠΌΠΊΠ΅
ΠΡΠΈΒΠΌΠ΅Ρ: Codepen
Π§ΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΒΠ·ΡΒΠ΅ΠΌ: display:grid ΠΈ grid-row.
ΠΡΠ±ΠΎΒΠΏΡΡΒΠ½ΠΎΠ΅ ΡΠ²ΠΎΠΉΒΡΡΠ²ΠΎ, ΠΊΠΎΡΠΎΒΡΠΎΠ΅ ΠΏΠΎΠ·ΒΠ²ΠΎΒΠ»ΡΒΠ΅Ρ Π±ΡΡΡΒΡΠΎ Π³Π΅Π½Π΅ΒΡΠΈΒΡΠΎΒΠ²Π°ΡΡ ΠΊΠ°ΡΒΡΠΈΠ½ΒΠΊΠΈ Ρ ΡΠ΅ΠΊΒΡΡΠΎΠΌ Π²Π½ΠΈΒΠ·Ρ ΠΈ ΡΠ°ΠΌΒΠΊΠΎΠΉ ΠΏΠΎ ΠΊΡΡΒΠ³Ρ. Π Π°ΠΌΒΠΊΠ° ΡΠΎΠΆΠ΅ ΡΠΌΠ½Π°Ρ: Π½Π° ΡΠ΅ΠΊΡΡ Π½Π΅ Π·Π°Π»Π΅ΒΠ·Π°ΒΠ΅Ρ, Π΅ΡΠ»ΠΈ Π½ΡΠΆΒΠ½ΠΎ β ΡΡΠ°ΒΠ½Π΅Ρ Π΄Π»ΠΈΠ½ΒΠ½Π΅Π΅ ΠΈΠ»ΠΈ ΠΊΠΎΡΠΎΒΡΠ΅, ΡΡΠΎΒΠ±Ρ Π½Π΅ ΠΌΠ΅ΡΠ°ΡΡ Π½Π°Π΄ΠΏΠΈΡΠΈ.
ΠΠ»Π°ΡΡΒΠ½Π°Ρ ΡΡΡΒΠΊΠ° Π΄Π»Ρ Π±ΡΡΡΒΡΠΎΒΠ³ΠΎ ΡΠΎΠ·Π΄Π°ΒΠ½ΠΈΡ ΡΠΈΡΒΠΌΠ΅Π½ΒΠ½ΡΡ ΠΊΠ°ΡΒΡΠΈΒΠ½ΠΎΠΊ Π² Π±ΠΎΠ»ΡΒΡΠΈΡ ΠΎΠ±ΡΡΠΌΠ°Ρ .
ΠΠ»Π°ΡΡΠΈΠΊΠ°: Ρ ΠΎΠ²Π΅Ρ
ΠΡΠΈΒΠΌΠ΅Ρ: Tympanus.net
Π§ΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΒΠ·ΡΒΠ΅ΠΌ: hover.
:hover β ΡΡΠΎ ΠΏΡΠ΅Π²ΒΠ΄ΠΎΒΠΊΠ»Π°ΡΡ, ΠΊΠΎΡΠΎΒΡΡΠΉ ΠΏΡΠΈΒΠΌΠ΅ΒΠ½ΡΒΠ΅ΡΒΡΡ ΠΊ ΠΎΠ±ΡΒΠ΅ΠΊΒΡΡ, Π΅ΡΠ»ΠΈ Π½Π° Π½Π΅Π³ΠΎ Π½Π°Π²Π΅ΒΠ΄ΡΠ½ ΠΊΡΡΒΡΠΎΡ ΠΌΡΡΠΈ. ΠΠΎΠΆΒΠ½ΠΎ ΡΠΊΠ°ΒΠ·Π°ΡΡ Β«ΠΏΡΠΈ Π½Π°Π²Π΅ΒΠ΄Π΅ΒΠ½ΠΈΠΈ ΠΏΠΎΠ΄ΒΠΊΡΠ°ΡΡ ΡΡΡΠ»ΒΠΊΡ ΠΊΡΠ°ΡΒΠ½ΡΠΌΒ» ΠΈΠ»ΠΈ Β«ΠΏΡΠΈ Π½Π°Π²Π΅ΒΠ΄Π΅ΒΠ½ΠΈΠΈ ΡΠ±Π΅ΒΡΠΈ ΠΏΠΎΠ΄ΒΡΡΡΒΠΊΠΈΒΠ²Π°ΒΠ½ΠΈΠ΅Β». ΠΠΎΡ ΡΡΠΎ Β«ΠΏΡΠΈ Π½Π°Π²Π΅ΒΠ΄Π΅ΒΠ½ΠΈΠΈΒ» ΠΈ Π΅ΡΡΡ ΠΏΡΠ΅Π²ΒΠ΄ΠΎΒΠΊΠ»Π°ΡΡ :hover.
ΠΡΠΎ Π½Π°ΡΡΠΎΠ»ΡΒΠΊΠΎ ΡΡΠ½ΒΠ΄Π°ΒΠΌΠ΅Π½ΒΡΠ°Π»ΡΒΠ½ΠΎΠ΅ ΡΠ²ΠΎΠΉΒΡΡΠ²ΠΎ CSS, ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΒΠ·ΡΒΠ΅ΡΒΡΡ ΠΏΡΠ°ΠΊΒΡΠΈΒΡΠ΅ΒΡΠΊΠΈ Π²Π΅Π·ΒΠ΄Π΅, Π³Π΄Π΅ Π΅ΡΡΡ ΠΈΠ½ΡΠ΅ΡΒΠ½Π΅Ρ ΠΈΠ»ΠΈ Π²Π΅Π±-ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ. ΠΠ΅Π· Π½Π΅Π³ΠΎ Π»ΡΠ±ΠΎΠΉ ΠΎΠ±Π·ΠΎΡ ΡΠ²ΠΎΠΉΡΡΠ² Π±ΡΠ΄Π΅Ρ Π½Π΅ΠΏΠΎΠ»ΒΠ½ΡΠΌ, ΠΏΠΎΡΠΎΒΠΌΡ ΡΡΠΎ Π±Π΅Π· ΠΎΠ±ΡΠ°ΒΠ±ΠΎΡΒΠΊΠΈ Π½Π°Π²Π΅ΒΠ΄Π΅ΒΠ½ΠΈΡ ΠΌΡΡΠΈ Π½Π° ΡΠ»Π΅ΒΠΌΠ΅Π½Ρ ΠΏΠΎΠ»ΠΎΒΠ²ΠΈΒΠ½Π° ΡΠ²ΠΎΠΉΡΡΠ² ΠΏΡΠΎΒΡΡΠΎ ΠΏΠ΅ΡΠ΅ΒΡΡΠ°ΒΠ½Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ.
ΠΠ»Π°Π²ΒΠ½Π°Ρ ΡΠΈΡΒΠΊΠ° Ρ ΠΎΠ²Π΅ΒΡΠ° β Π΅Π³ΠΎ ΡΠ½ΠΈΒΠ²Π΅ΡΒΡΠ°Π»ΡΒΠ½ΠΎΡΡΡ. ΠΠ° Π½Π΅Π³ΠΎ ΠΌΠΎΠΆΒΠ½ΠΎ ΠΏΠΎΠ²Π΅ΒΡΠΈΡΡ ΡΡΠΎ ΡΠ³ΠΎΠ΄ΒΠ½ΠΎ ΠΈ ΠΎΠ±ΡΠ°ΒΠ±Π°ΒΡΡΒΠ²Π°ΡΡ ΡΡΠΎ ΠΊΠ°ΠΊ ΡΠ³ΠΎΠ΄ΒΠ½ΠΎ. ΠΠ½ΠΎΒΠ³Π΄Π° Π½Π°ΠΌ ΠΊΠ°ΠΆΠ΅ΡΒΡΡ, ΡΡΠΎ Π΅ΡΠ»ΠΈ Π΅Π³ΠΎ ΠΎΡΠΊΠ»ΡΒΡΠΈΡΡ, ΡΠΎ ΠΏΠΎΠ»ΠΎΒΠ²ΠΈΒΠ½Π° ΠΈΠ½ΡΠ΅ΡΒΠ½Π΅ΒΡΠ° ΠΏΡΠΎΒΡΡΠΎ ΠΏΠ΅ΡΠ΅ΒΡΡΠ°ΒΠ½Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ.
10 ΡΠ°ΡΡΠΈΡΠ΅Π½Π½ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS ΠΈ JavaScript
ΠΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π΄ΠΎΠ»Π³ΠΎΠ΅ Π²ΡΠ΅ΠΌΡ Π±ΡΠ»ΠΈ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· ΡΠ°ΠΌΡΡ ΠΏΡΠΎΡΡΡΡ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΡΡΠΈ Π½Π° Π²Π΅Π±-ΡΠ°ΠΉΡ. Π§Π°ΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΎΠ½ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π΄Π»Ρ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΡ ΡΡΡΠ»ΠΎΠΊ ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ. ΠΠΎ ΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π²ΡΡ ΠΎΠ΄ΠΈΡΡ Π΄Π°Π»Π΅ΠΊΠΎ Π·Π° ΡΠ°ΠΌΠΊΠΈ ΠΎΡΠ½ΠΎΠ².
ΠΠ΄Π½Π° ΠΎΠ±Π»Π°ΡΡΡ, Π³Π΄Π΅ ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΡΠΌΠΈ, β ΡΡΠΎ ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌ. ΠΡΠ΄Ρ ΡΠΎ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΌΠ°ΠΊΠ΅Ρ ΠΊΠ°ΡΡΡ ΠΈΠ»ΠΈ ΠΌΠ°ΡΡΠΈΠ²Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π³Π΅ΡΠΎΡ, ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ ΠΌΠΎΠΆΠ΅Ρ ΠΈΠΌΠ΅ΡΡ ΠΎΠ³ΡΠΎΠΌΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅.
Π‘Π΅Π³ΠΎΠ΄Π½Ρ ΠΌΡ ΠΏΠΎΠΊΠ°ΠΆΠ΅ΠΌ Π²Π°ΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ²ΠΎΡΡΠ΅ΡΠΊΠΈΡ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ², Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΡΠΎΡΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΡ ΠΈΠ½ΡΠ΅Π³ΡΠΈΡΡΡΡ ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠ½ΠΈ ΠΏΡΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΡΡΡ, ΠΊΠ°ΠΊ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π΄ΡΠ°ΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΎΠΆΠΈΠ²ΠΈΡΡ Π½Π°ΡΠΈ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΠΏΡΠΎΠ΅ΠΊΡΡ.
ΠΠ°Π½Π΅Π»Ρ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΠ°
ΠΠ΅ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠΊΠ°ΡΠΈΠ²Π°Π½ΠΈΠΉ: Π±ΠΎΠ»Π΅Π΅ 1 000 000 Π²Π΅Π±-ΡΠ°Π±Π»ΠΎΠ½ΠΎΠ², ΡΠ΅ΠΌ, ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ², ΡΠ΅ΡΡΡΡΠΎΠ² Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅!
ΠΡΠ°ΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΠ»ΠΎΠΈ
ΠΡΠΎ ΡΠΌΠ½ΠΎΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ CSS ΠΈ JS Π΄ΡΠ±Π»ΠΈΡΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ Π½Π°ΠΊΠ»Π°Π΄ΡΠ²Π°Π΅Ρ ΠΈΡ Π΄ΡΡΠ³ Π½Π° Π΄ΡΡΠ³Π°. ΠΡΡΡΠ΄Π° ΡΠΈΠ»ΡΡΡΡ CSS ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡΡΡ ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.ΠΡΠΎΡ ΠΌΠ΅ΡΠΎΠ΄ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡ ΠΊ ΡΡΡΠ΅ΠΊΡΠ°ΠΌ ΠΊΠΈΠ½Π΅ΠΌΠ°ΡΠΎΠ³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΠΊΠ°ΡΠ΅ΡΡΠ²Π°, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ½Π°ΡΠ΅ Π±ΡΠ»ΠΎ Π±Ρ ΡΡΡΠ΄Π½ΠΎ Π΄ΠΎΡΡΠΈΡΡ.
ΠΡΡΡΡΡΠΉ ΠΈ ΠΌΠΎΡΠ½ΡΠΉ
Π ΡΡΠΎΠΉ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΠΈ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π·Π°ΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎ, ΡΡΠΎ ΠΎΠ½ΠΈ Π΄ΠΎΡΡΠ°Π²Π»ΡΡΡ ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½ΠΎΠ΅ ΡΠ΄ΠΎΠ²ΠΎΠ»ΡΡΡΠ²ΠΈΠ΅. ΠΠΎ ΡΡΠ° ΡΠΊΠΎΡΠΎΡΡΡ Π½Π΅ Π»ΠΈΡΠ°Π΅Ρ ΠΈΡ
ΡΠΈΠ»Ρ. ΠΡΠΎΠ±ΠΎ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΎΡΠΌΠ΅ΡΠΈΡΡ ΡΡΡΠ΅ΠΊΡΡ ΡΠΈΠ»ΡΡΡΠ° CSS3, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΠΎΡΡΠ΅Π½ΠΊΠ°Ρ
ΡΠ΅ΡΠΎΠ³ΠΎ ΠΈ ΡΠ΅ΠΏΠΈΡ Π² ΠΏΠΎΠ»Π½ΠΎΡΠ²Π΅ΡΠ½ΡΠ΅.
ΠΡΠ°ΡΠΈΠΊΠ° Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅
ΠΡΠ° ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΡ ΠΏΠ΅ΡΠ΅ΠΊΠΎΡΠ΅Π½Π½ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠ² Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°ΠΌΠΈ, ΡΠ΅ΡΠΊΠΎΠΉ ΡΠΈΠΏΠΎΠ³ΡΠ°ΡΠΈΠΊΠΈ ΠΈ Π±ΡΡΡΡΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΎΡΠ΅Π½Ρ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½Π°.ΠΡΠΎ ΡΠ°ΠΊΠΆΠ΅ Π½Π°ΠΏΠΎΠΌΠΈΠ½Π°Π΅Ρ Π²ΡΡΡΠΏΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠΈΡΡΡ ΠΊ ΡΠ΅Π»Π΅ΡΠΎΡ. Π£Π΄ΠΈΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ, Π½ΠΎ Π±ΠΎΠ»ΡΡΠ°Ρ ΡΠ°ΡΡΡ ΡΠ°Π±ΠΎΡΡ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS.
ΠΠΎΠΊΠ°ΠΆΠΈ ΡΠ²ΠΎΠΈ ΠΊΠ°ΡΡΡ
ΠΠΎΡ ΠΎΡΡΡΠ²ΠΎΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π°ΠΏΠΎΠΌΠΈΠ½Π°Π΅Ρ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ ΠΊΡΠΎ-ΡΠΎ ΡΠ°Π·Π²ΠΎΡΠ°ΡΠΈΠ²Π°Π΅Ρ ΡΡΠΊΡ Ρ ΠΈΠ³ΡΠ°Π»ΡΠ½ΡΠΌΠΈ ΠΊΠ°ΡΡΠ°ΠΌΠΈ Π½Π° Π²ΡΠ΅ΠΎΠ±ΡΠ΅Π΅ ΠΎΠ±ΠΎΠ·ΡΠ΅Π½ΠΈΠ΅. ΠΠΎ Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, ΠΏΠΎΡ ΠΎΠΆΠ΅, ΡΡΠΎ Π±ΡΠ΄Π΅Ρ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π΄Π»Ρ ΡΠΎΡΠΎΠ³Π°Π»Π΅ΡΠ΅ΠΈ. ΠΡΠΎ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΊΡΡΡΠΎ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ, Π½ΠΎ ΠΈ Π΄Π°Π΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ Π½Π΅ΠΊΠΎΡΠΎΡΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ.
ΠΠ·ΠΌΠ΅Π½ΡΡΡΠ°ΡΡΡ ΡΠ΅Π°Π»ΡΠ½ΠΎΡΡΡ
ΠΠ°Π²Π°ΠΉΡΠ΅, ΠΏΠΎΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠΈΡΡΠΉΡΠ΅ Ρ ΡΡΠΈΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠΌ ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠΈΡΠ΅, ΡΠΌΠΎΠΆΠ΅ΡΠ΅ Π»ΠΈ Π²Ρ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ ΡΠ΅ΡΠΊΠΎΠ΅ Π·ΡΠ΅Π½ΠΈΠ΅.ΠΠΎΠ³Π΄Π° Π²Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡΠ΅ ΠΊΡΡΡΠΎΡ Π½Π° ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠ°ΡΡΠΈ ΡΡΠΎΠ³ΠΎ Π·Π΄Π°Π½ΠΈΡ, Π±Π»ΠΎΠΊΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ ΠΈ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ Π²Π°ΡΠ΅Π³ΠΎ ΠΊΡΡΡΠΎΡΠ°. ΠΠ½ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΡΠΉ, Π·Π°ΠΏΡΡΠ°Π½Π½ΡΠΉ ΠΈ ΡΠΌΠΎΠΏΠΎΠΌΡΠ°ΡΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ. ΠΠΎΠΆΠ΅ΠΌ Π»ΠΈ ΠΌΡ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ ΡΠ½ΠΎΠ²Π°?
Π‘ΠΎΠ±Π΅ΡΠΈΡΡ Π²ΠΌΠ΅ΡΡΠ΅
Π₯ΠΎΡΠΈΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅ ΡΠΌΠΎΠΏΠΎΠΌΡΠ°ΡΠΈΡΠ΅Π»ΡΠ½ΡΡ
ΡΠ°Π·Π²Π»Π΅ΡΠ΅Π½ΠΈΠΉ? ΠΠΎΡ Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΏΡΠΈΠΌΠ΅Ρ ΠΎΡ ΠΠΈΠΌΠΈΡΡΡ ΠΠ°ΡΠΈΠ»ΠΎΠΏΡΠ»Ρ, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠ°ΠΊΠΆΠ΅ ΡΠΎΠ·Π΄Π°Π»Π° ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΡΠ΅Π°Π»ΡΠ½ΠΎΡΡΠΈ, ΠΎΠΏΠΈΡΠ°Π½Π½ΡΠΉ Π²ΡΡΠ΅. ΠΠ΄Π΅ΡΡ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΠΊΠ°ΠΊ ΡΠ°Π·Π΄Π΅Π»Π΅Π½Π½Π°Ρ Π½Π° ΡΠ΅ΡΠΊΡ. ΠΠ°ΡΠ΅Π½ΠΈΠ΅ Π±ΡΡΡΡΠΎ ΡΠΎΠ±ΠΈΡΠ°Π΅Ρ Π²ΡΠ΅ Π²ΠΎΠ΅Π΄ΠΈΠ½ΠΎ. Π₯ΠΎΡΡ ΠΎΠ½ Π½Π΅ ΡΠ°ΠΊΠΎΠΉ ΠΏΡΠΈΡ
ΠΎΠ΄Π΅Π»ΠΈΡΠ΅ΡΠΊΠΈΠΉ, Π½ΠΎ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ Π²ΠΏΠ΅ΡΠ°ΡΠ»ΡΡΡΠΈΠΉ.
Π§ΠΈΡΡΡΠΉ ΠΊΠ»Π°ΡΡ Ρ ΡΠΈΡΡΡΠΌ CSS
ΠΡΠ° ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π΄ΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, ΡΡΠΎ Π²Π°ΠΌ Π½Π΅ Π½ΡΠΆΠ½ΠΎ Π±ΡΡΡ ΡΡΠ΅Π·ΠΌΠ΅ΡΠ½ΡΠΌ, ΡΡΠΎΠ±Ρ ΠΏΡΠΎΠΈΠ·Π²Π΅ΡΡΠΈ ΡΠΈΠ»ΡΠ½ΠΎΠ΅ Π²ΠΏΠ΅ΡΠ°ΡΠ»Π΅Π½ΠΈΠ΅. ΠΠ΄Π΅ΡΡ Π΅ΡΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ ΡΡΠΈΠ»Π΅ΠΉ, Π½ΠΎ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· Π½ΠΈΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΠΈ ΡΠΈΠ»ΡΡΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°. Π Π½Π΅ Π±ΡΠ»ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΎ Π½ΠΈ ΠΎΠ΄Π½ΠΎΠΉ ΡΡΡΠΎΡΠΊΠΈ JavaScript.
ΠΠ»ΡΡ (ΡΠ°ΠΌΠΊΠΈ) ΠΊ Wild
ΠΡ ΠΏΠΎΠ΄ΠΎΡΠ»ΠΈ ΠΊ ΠΏΠ΅ΡΠ΅ΡΠ΅ΡΠ΅Π½ΠΈΡ Π΄ΡΠ°ΠΌΠ°ΡΠΈΠ·ΠΌΠ° ΠΈ ΠΊΡΠ°ΡΠΎΡΡ Ρ ΡΡΠΈΠΌ Π½Π΅Π²Π΅ΡΠΎΡΡΠ½ΡΠΌ CSS-ΡΡΡΠ΅ΠΊΡΠΎΠΌ Β«Π·Π°ΡΠ²ΠΎΡΠ°Β». ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΡΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΆΠΈΠ²ΠΎΡΠ½ΡΡ Π² ΠΎΡΡΠ΅Π½ΠΊΠ°Ρ ΡΠ΅ΠΏΠΈΠΈ ΡΠΎΠ·Π΄Π°Π΅ΡΡΡ ΡΠ²Π΅ΡΡ Π³Π»Π°Π΄ΠΊΠΈΠΉ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ ΠΊ ΠΏΠΎΠ»Π½ΠΎΡΠ²Π΅ΡΠ½ΠΎΠΌΡ.ΠΡΠΎ Π±ΡΠ»ΠΎ Π΄ΠΎΡΡΠΈΠ³Π½ΡΡΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΈΠ»ΡΡΡΠΎΠ² CSS, ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΠΊΠ°Π΄ΡΠΎΠ², ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΠΈ.
ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΠΎΠ»ΡΡΠ΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°
Π€ΠΎΡΠΎΠ³Π°Π»Π΅ΡΠ΅ΠΈ Π½Π°ΡΡΠΎΠ»ΡΠΊΠΎ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Ρ, Π½ΠΎ Π²Ρ Π½Π΅ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ ΠΌΠ½ΠΎΠ³ΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΡ
. ΠΠΎΡ ΠΏΠΎΡΡΡΡΠ°ΡΡΠ΅Π΅ ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅. ΠΠ°Π²Π΅Π΄ΠΈΡΠ΅ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π½Π° ΠΌΠΈΠ½ΠΈΠ°ΡΡΡΡ Π² ΡΠ΅ΡΠΊΠ΅, ΠΈ ΠΏΠΎΠ»Π½ΠΎΡΠ°Π·ΠΌΠ΅ΡΠ½Π°Ρ Π²Π΅ΡΡΠΈΡ Π·Π°ΠΉΠΌΠ΅Ρ Π²Π΅ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ. ΠΠΎ ΡΡΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Π° Π΄Π΅Π»Π°. ΠΠ°ΡΡΠΎΡΡΠ°Ρ ΠΊΡΡΡΠΈΠ·Π½Π° Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ ΠΈΠ·-Π·Π° ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Β«ΡΠ°Π·Π±ΠΈΠ²Π°Π΅ΡΡΡΒ» ΠΈ ΡΠΎΠ±ΠΈΡΠ°Π΅ΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ ΠΏΡΠΈ Π·Π°Π³ΡΡΠ·ΠΊΠ΅.
Π Π°ΡΠΊΡΡΡΠΈΠ΅ ΡΠ°ΡΠΊΠΎΠ»Π°
ΠΠ΄Π΅ΡΡ Ρ Π½Π°Ρ Π΅ΡΡΡ Π·Π°Π±Π°Π²Π½Π°Ρ ΡΠ΅Ρ Π½ΠΈΠΊΠ° Π΄Π»Ρ Π²ΡΡΠ²Π»Π΅Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠ° Π·Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ.Π ΡΡΠΎΠΌ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠΏΠΎΡΠΎΠ±Ρ Β«ΡΠ°Π·Π±ΠΈΡΡΒ» ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΠΏΠΎΠ»ΠΎΡΡ, ΡΠ΅ΠΌ ΡΠ°ΠΌΡΠΌ ΡΠ°ΡΡΠΈΡΠ°Ρ ΠΏΡΡΡ Π΄Π»Ρ ΡΠ΅ΠΊΡΠ΅ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡ. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ»ΠΎΠΆΠ½ΠΎ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Ρ Π½Π΅ Π·Π°Ρ ΠΎΡΠΈΡΠ΅ ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΠΎ ΠΏΡΠΈ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠΉ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π²Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΠ΅ ΡΠ²ΠΎΠ΅ΠΌΡ ΠΏΡΠΎΠ΅ΠΊΡΡ ΡΠ²ΠΎΡΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΡΡΡΡΡ.
Π£ Π½Π°Ρ Π΅ΡΡΡ Π΄ΡΠ°ΠΌΠ°
ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΡΡΠΊΠΈΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π½Π° Π²Π°Ρ ΡΠ°ΠΉΡ β ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΠΏΡΠΈΠ²Π»Π΅ΡΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ. ΠΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠ΅ Π²ΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ, ΡΡΠΎ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π΄ΠΎΡΡΠΈΡΡ ΠΆΠ΅Π»Π°Π΅ΠΌΡΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠΎΠ², Π½Π΅ ΠΏΠ΅ΡΠ΅ΡΡΠ΅ΡΠ΄ΡΡΠ²ΡΡ.ΠΠ°ΠΌ Π½ΠΈ Π² ΠΊΠΎΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅ Π½Π΅ Π½ΡΠΆΠ½ΠΎ ΡΡΠΎ-ΡΠΎ Π³ΡΠΎΠΌΠΊΠΎΠ΅ ΠΈ Π½Π΅ΠΏΡΠΈΡΡΠ½ΠΎΠ΅. Π‘ΠΊΠΎΡΠ΅Π΅, Π²ΡΠ΅ Π΄Π΅Π»ΠΎ Π² ΠΏΠ»Π°Π²Π½ΡΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π°Ρ ΠΈ ΡΠ±Π΅Π΄ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΡΠΏΠ΅ΡΡΡΡΠ΅ΠΊΡΠ°Ρ .
ΠΡΡΡΡ ΡΡΠΈ ΠΏΡΠΈΠΌΠ΅ΡΡ Π²Π°Ρ Π²Π΄ΠΎΡ
Π½ΠΎΠ²ΡΡ. ΠΠ°ΡΠ΅ΠΌ ΠΏΠΎΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠΈΡΡΠΉΡΠ΅, ΡΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π΄ΡΠ°ΠΌΠ°ΡΠΈΠ·ΠΌΠ° Π²Π°ΡΠΈΠΌ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌ.
12 Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ CSS Π΄Π»Ρ ΠΊΡΠ°ΡΠΈΠ²ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ ΠΏΡΠΎΡΡΠΎΠΉ ΠΈ ΡΡΠ½ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊΠ°Ρ ΡΠ°ΡΡΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΠΉ. β Π²Π°ΠΆΠ½Π°Ρ ΡΠ°ΡΡΡ UX-Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Π‘ΡΠ°ΡΡΠΉ, Π½ΠΎ Π·ΠΎΠ»ΠΎΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ β ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅Ρ ΡΠ΅ΠΊΡΡΠ° ΠΈ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠ½ΡΡΡ Π΅Π³ΠΎ.Π Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π³ΠΎΡΠ°Π·Π΄ΠΎ Π±ΠΎΠ»ΡΡΠ΅ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.
Π Π°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΡΠ΅ΠΏΠ΅ΡΡ ΠΌΠΎΠ³ΡΡ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΡΡΡΠ΅ΠΊΡΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π° ΠΈΠ»ΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΡΠΈ Π·Π°ΠΏΡΡΠΊΠ΅ ΡΠΎΠ±ΡΡΠΈΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ . ΠΡ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅ΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½Π½ΡΠ΅ ΡΠ»Π°ΠΉΠ΄Ρ, ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Ρ ΡΠ°Π·Π½ΠΎΠΉ ΡΠΊΠΎΡΠΎΡΡΡΡ, ΠΏΠΎΡΡΠ΅ΠΏΠ΅Π½Π½ΠΎΠ΅ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ ΠΈ ΠΈΡΡΠ΅Π·Π½ΠΎΠ²Π΅Π½ΠΈΠ΅, ΡΡΡΠ΅ΠΊΡΡ ΡΠ°ΡΠ½ΠΈΡΠ°, ΡΠ²Π΅ΡΠΎΠ²ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ, ΠΊΠΎΠ»Π΅Π±Π°Π½ΠΈΡ, ΠΎΡΡΠΊΠΎΠΊΠΈ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅.
Π ΡΡΠΎΠΉ ΠΏΠΎΠ΄Π±ΠΎΡΠΊΠ΅ Π±ΠΎΠ»Π΅Π΅ 250 ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, Π²Π΄ΠΎΡ Π½ΠΎΠ²ΡΡ Π²Π°Ρ. ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΠΊΠΎΠ΄ Ρ ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠ°.
ΠΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ ΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ CSS3 Π΄Π»Ρ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°ΠΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ ΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ CSS3 Π΄Π»Ρ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°
ΠΠΈΠ·Π°ΠΉΠ½Π΅ΡΡ ΠΈ Ρ
ΡΠ΄ΠΎΠΆΠ½ΠΈΠΊΠΈ ΠΈΠΌΠ΅ΡΡ Π΄ΠΎΠ»Π³ΡΡ ΠΈΡΡΠΎΡΠΈΡ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠΎΠ² Ρ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ΠΌ, ΡΡΡΠ΅ΠΊΡΠ°ΠΌΠΈ ΠΈ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌΠΈ Π²ΠΈΠ΄Π°ΠΌΠΈ ΠΈΠ»Π»ΡΠ·ΠΈΠΉ Ρ ΠΏΠΎΠΌΠΎΡΡΡ . .. ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅
ΠΡΡΠ΅ΠΊΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅
(16 ΡΡΡΠ΅ΠΊΡΠΎΠ²)ΠΠ° ΡΡΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ Π²Ρ Π½Π°ΠΉΠ΄Π΅ΡΠ΅ ΠΊΡΠ°ΡΠΈΠ²ΡΡ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΡ ΠΈΠ· 16 ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ ΠΏΠΎΠ΄ΠΏΠΈΡΡΠΌΠΈ. ΠΠΎΠ·ΡΠΌΠΈΡΠ΅ ΠΊΠΎΠ΄ HTML ΠΈ CSS Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΡΡΠ΅ΠΊΡΠ°, Π½Π°Π²Π΅Π΄Ρ ΠΊΡΡΡΠΎΡ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ Π½Π°ΠΆΠ°Π² ΠΠΎΠΊΠ°Π·Π°ΡΡ ΠΊΠΎΠ΄ .
ΠΠΎΠ΄ΠΏΠΈΡΡ ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ
(4 ΡΡΡΠ΅ΠΊΡΠ°)ΠΠΎΡ 4 ΠΊΠ»Π°ΡΡΠ½ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°ΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π·Π°ΠΏΡΡΠΊΠ°ΡΡΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. ΠΡΡΠ΅ΠΊΡΡ ΡΠΎΠ·Π΄Π°Π½Ρ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΎΠ² ΠΈ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠΉ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS3, Π° Π½Π΅ JavaScript, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ²ΡΡΠΈΡΡ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅.
iHover
(35 ΡΡΡΠ΅ΠΊΡΠΎΠ²)iHover β ΡΡΠΎ Π½Π°Π±ΠΎΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ CSS3. ΠΡΡΡ 20 ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π½Π° ΠΊΡΡΠΆΠΎΠΊ ΠΈ 15 ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π½Π° ΠΊΠ²Π°Π΄ΡΠ°Ρ. Π§ΡΠΎΠ±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΡΠ΅ΠΊΡΡ, Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ Π½Π°ΠΏΠΈΡΠ°ΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ HTML ΠΈ Π²ΠΊΠ»ΡΡΠΈΡΡ ΡΠ°ΠΉΠ»Ρ CSS.
Image Hover
(44 ΡΡΡΠ΅ΠΊΡΠ°) ΠΡΠ° Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ 44 ΡΡΡΠ΅ΠΊΡΠ°, ΡΠΎΠ·Π΄Π°Π½Π½ΡΡ
Π½Π° ΡΠΈΡΡΠΎΠΌ CSS. ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ· ΡΡΡΠ΅ΠΊΡΠΎΠ² Π²ΠΊΠ»ΡΡΠ°ΡΡ Π·Π°ΡΡΡ
Π°Π½ΠΈΠ΅, ΡΠΎΠ»ΡΠΊΠΈ, ΡΠΊΠΎΠ»ΡΠΆΠ΅Π½ΠΈΠ΅, ΠΏΠ΅ΡΠ»ΠΈ, ΡΠ°ΡΠΊΡΡΡΠΈΠ΅, ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, ΡΠ°Π·ΠΌΡΡΠΈΠ΅, ΠΏΠ΅ΡΠ΅Π²ΠΎΡΠ°ΡΠΈΠ²Π°Π½ΠΈΠ΅, ΡΠΊΠ»Π°Π΄ΠΊΠΈ ΠΈ ΡΡΠ°Π²Π½ΠΈ Π² Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ
Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡΡ
. Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΡΠ°ΡΡΠΈΡΠ΅Π½Π½Π°Ρ Π²Π΅ΡΡΠΈΡ ΠΈΠ· 216 ΡΡΡΠ΅ΠΊΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΊΡΠΏΠΈΡΡ Π·Π° 14 Π΅Π²ΡΠΎ.
ΠΠ΄Π΅ΠΈ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ
(30 ΡΡΡΠ΅ΠΊΡΠΎΠ²)ΠΡΠ° Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΠΎΠ·Π΄Π°Π½Π½Π°Ρ Codrop, Π΄Π°Π΅Ρ Π²Π°ΠΌ Π²Π΄ΠΎΡ Π½ΠΎΠ²Π΅Π½ΠΈΠ΅ ΠΏΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ ΠΏΠ»Π°Π²Π½ΡΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΎΠ² ΠΌΠ΅ΠΆΠ΄Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ ΠΈ ΠΈΡ ΠΏΠΎΠ΄ΠΏΠΈΡΡΠΌΠΈ.ΠΡΠ΅Π³ΠΎ 30 ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π° Π΄Π²ΡΡ Π½Π°Π±ΠΎΡΠ°Ρ Ρ ΡΡΠ΅Π±Π½ΡΠΌΠΈ ΠΏΠΎΡΠΎΠ±ΠΈΡΠΌΠΈ ΠΈ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΌ ΠΊΠΎΠ΄ΠΎΠΌ.
Hover CSS
(108 ΡΡΡΠ΅ΠΊΡΠΎΠ²)Hover CSS ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊ Π»ΡΠ±ΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΠΊΠ½ΠΎΠΏΠΊΠ΅, ΡΡΡΠ»ΠΊΠ΅ ΠΈΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΡΡΠ΅ΠΊΡΡ Π²ΠΊΠ»ΡΡΠ°ΡΡ 2D-ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ, ΡΠΎΠ½ΠΎΠ²ΡΠ΅ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ, Π³ΡΠ°Π½ΠΈΡΡ, ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ ΡΠ΅Π½ΠΈ ΠΈ ΡΠ²Π΅ΡΠ΅Π½ΠΈΡ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅. ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π΄ΠΎΡΡΡΠΏΠ½Π° Π½Π° CSS, Sass ΠΈ LESS.
ΠΠ½ΠΈΠΌΠ°ΡΠΈΠ·ΠΌ
(100+ ΡΡΡΠ΅ΠΊΡΠΎΠ²) ΠΠΌΠ΅Π΅ΡΡΡ Π±ΠΎΠ»Π΅Π΅ 100 Π°Π½ΠΈΠΌΠ°ΡΠΈΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ, Π΄Π΅ΡΠ°Π»ΠΈ, ΠΏΠΎΠ΄ΠΏΠΈΡΠΈ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΠΎΡΠΈΠ°Π»ΡΠ½ΡΡ
ΡΠ΅ΡΠ΅ΠΉ. ΠΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ CSS3.
Caption Hover Effect
(7 ΡΡΡΠ΅ΠΊΡΠΎΠ²)Π ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΠΈ 7 ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ². ΠΡΠ΅ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ Π²ΡΠ³Π»ΡΠ΄ΡΡ ΠΎΡΠ΅Π½Ρ ΠΊΡΠ°ΡΠΈΠ²ΠΎ ΠΈ ΠΏΠ»Π°Π²Π½ΠΎ. ΠΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ Π² ΡΠ°Π·Π΄Π΅Π» ΡΡΠ΅Π±Π½ΠΈΠΊΠ°, ΡΡΠΎΠ±Ρ ΡΠ·Π½Π°ΡΡ, ΠΊΠ°ΠΊ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΡΡΠΈ ΡΡΡΠ΅ΠΊΡΡ Π² ΡΠ²ΠΎΠ΅ΠΌ ΠΏΡΠΎΠ΅ΠΊΡΠ΅.
CSS Image Hover Effects
(15 ΡΡΡΠ΅ΠΊΡΠΎΠ²) ΠΠΎΠ»Π»Π΅ΠΊΡΠΈΡ ΠΏΡΠΎΡΡΡΡ
ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, ΡΠ°ΠΊΠΈΡ
ΠΊΠ°ΠΊ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, ΡΠΊΠΎΠ»ΡΠΆΠ΅Π½ΠΈΠ΅, ΠΏΠΎΠ²ΠΎΡΠΎΡ, ΡΠΊΠ°Π»Π° ΡΠ΅ΡΠΎΠ³ΠΎ, ΡΠ°Π·ΠΌΡΡΠΈΠ΅, Π½Π΅ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ Π±Π°Π·ΠΎΠ²ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΈ ΡΡΡΠ΅ΠΊΡΡ, Π΄ΠΎΠ±Π°Π²ΠΈΠ² ΠΊΠ»Π°ΡΡ CSS ΠΏΠ΅ΡΠ΅Π΄ ΡΠ΅Π³ΠΎΠΌ figure
.
3D-ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Ρ ΡΡΠ΅ΡΠΎΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ
ΠΡΠΎ ΡΡΠΏΠ΅Ρ ΠΊΡΡΡΠΎΠΉ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠ±Π½Π°ΡΡΠΆΠΈΡ Π²Π°ΡΠ΅ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π΅ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ ΠΌΡΡΠΈ. ΠΠΎΠ΄ΠΏΠΈΡΠΈ ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌ Π±ΡΠ΄ΡΡ ΠΎΡΠΊΡΡΠ²Π°ΡΡΡΡ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΈΠ· ΡΠ΅ΡΡΡΠ΅Ρ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΉ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΊΡΡΡΠΎΡΠ°.
ΠΠ»ΠΈΡΠΊΠΈ Ρ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌ
ΠΠ΄ΠΈΠ½ Π΄Π»Ρ ΠΌΠΎΠ·Π°ΠΈΡΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Ρ ΠΌΠ΅Π΄Π»Π΅Π½Π½ΡΠΌ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ, ΡΠ»Π°ΠΉΠ΄Π°ΠΌΠΈ, Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΠΌΠΈ ΠΎΠΊΠ½Π°ΠΌΠΈ, Π·Π°ΡΠ΅ΠΌΠ½Π΅Π½Π½ΡΠΌ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΈ ΠΏΡΠΎΡΠΈΠΌ.
SVG clip-Path Hover Effect
ΠΠΎΡΡΡΡΠ°ΡΡΠΈΠΉ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ΅Π½ΡΠ³Π΅Π½ΠΎΠ²ΡΠΊΠΎΠ³ΠΎ ΠΏΡΠΎΠΆΠ΅ΠΊΡΠΎΡΠ° Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ SVG clip-path
ΠΈ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄ΠΎΠ² CSS.ΠΡΠ΅ΠΊΡΠ°ΡΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π² Chrome, Opera ΠΈ Safari.
Image Hover Effects β Elementor Addon β ΠΏΠ»Π°Π³ΠΈΠ½ Π΄Π»Ρ WordPress
Image Hover Effects Addon Π΄Π»Ρ Elementor Page Builder β Π»ΡΡΡΠΈΠΉ Π² ΡΠ²ΠΎΠ΅ΠΌ ΠΊΠ»Π°ΡΡΠ΅ Π°Π΄Π΄ΠΎΠ½, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²Π°ΠΌ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡΠ°Π»ΡΠ½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π΄Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠ½ ΡΠ΄Π΅Π»ΡΠ΅Ρ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π΄Π΅ΡΠ°Π»ΡΠΌ, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°ΡΡ ΡΠ΅ΠΊΡΡ, ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΠΎΠ½, ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡ Π³ΡΠ°Π½ΠΈΡΡ ΠΈ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ ΡΡΠ΄ Π΄ΡΡΠ³ΠΈΡ
ΡΡΠ½ΠΊΡΠΈΠΉ. ΠΡΠΎΡ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ ΠΈΠΌΠ΅Π΅Ρ Π±ΠΎΠ»Π΅Π΅ 40 ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π½Π°ΡΠΈΠ½Π°Ρ ΠΎΡ Π·Π°ΡΡΡ
Π°Π½ΠΈΡ ΠΈ Π½Π°ΠΆΠ°ΡΠΈΡ Π΄ΠΎ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈ ΡΠ°Π·ΠΌΡΡΠΈΡ. Π’Π°ΠΊΠΆΠ΅ Π΄ΠΎΡΡΡΠΏΠ½Π° ΠΏΡΠ΅Π΄ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½Π°Ρ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΡ Π΄Π²ΡΡ
ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅ ΡΡΡΠ΅ΠΊΡΠΎΠ². ΠΠ½ ΡΠΎΠ·Π΄Π°Π΅Ρ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ Π΄Π»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°.
ΠΠΎΠ±Π°Π²ΡΡΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΈ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΊ ΡΠ²ΠΎΠ΅ΠΌΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ ΡΠ΅Π³ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°, Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ Π·Π½Π°ΡΠΊΠΈ, ΡΡΡΠ»ΠΊΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ ΠΈΠ»ΠΈ Π²Π΅Π±-ΡΠ°ΠΉΡ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅. ΠΡΡΠΊΠΈΠΉ ΡΠ°Π·, ΠΊΠΎΠ³Π΄Π° Π²Ρ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅ΡΠ΅ ΠΊΡΡΡΠΎΡ ΠΏΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΈ ΠΎΠΏΠΈΡΠ°Π½ΠΈΡ.
ΠΠ°Π΄ΡΡΡΠΎΠΉΠΊΠ° Π²ΠΈΠ΄ΠΆΠ΅ΡΠ° ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Π° Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΊΠ°ΠΊ Π½ΠΎΠ²ΠΈΡΠΊΠ°ΠΌΠΈ, ΡΠ°ΠΊ ΠΈ ΠΏΡΠΎΠ΄Π²ΠΈΠ½ΡΡΡΠΌΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌΠΈ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ ΡΡΡΠ΅ΠΊΡΠ° Π½Π°ΠΆΠ°ΡΠΈΠ΅ΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈΠ»ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ Π°ΡΡΠΈΠ±ΡΡΡ HTML ΠΈΠ»ΠΈ CSS.
Π₯Π°ΡΠ°ΠΊΡΠ΅ΡΠΈΡΡΠΈΠΊΠΈ
- ΠΡΠΎΡΡΠΎΡΠ° Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠ².
- 40+ ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°.
- ΠΡΠ°Π½ΠΈΡΡ ΠΊΡΡΠ³Π° ΠΈ ΠΊΠ²Π°Π΄ΡΠ°ΡΠ° ΠΈΠΌΠ΅ΡΡ Π²ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ.
- Π¦Π΅Π½ΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠ΅ΠΊΡΡ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ.
- Π£ΠΏΡΠ°Π²Π»ΡΠΉΡΠ΅ ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΊΠ°ΠΌΠΈ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ.
- Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ Ρ WPML
Π€ΠΎΠ½ : ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ ΡΠ²Π΅Ρ ΡΠΎΠ½Π° Π΄Π»Ρ ΡΡΡΠ΅ΠΊΡΠ°. ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠ±ΡΠ°ΡΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΡ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΠ½Π°.
ΠΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ : ΠΡΡΠΎΠ²Π½ΡΠΉΡΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΈ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ, ΠΏΠΎ ΡΠ΅Π½ΡΡΡ, ΡΠΏΡΠ°Π²Π° Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΌ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ.
ΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ : ΠΡΡΠΎΠ²Π½ΡΠΉΡΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΈ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΏΠΎ Π²Π΅ΡΡ Π½Π΅ΠΌΡ, ΡΡΠ΅Π΄Π½Π΅ΠΌΡ ΠΈΠ»ΠΈ Π½ΠΈΠΆΠ½Π΅ΠΌΡ ΠΊΡΠ°Ρ Ρ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠΌ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ.
Padding : Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ ΠΎΡΡΡΡΠΏ Π΄Π»Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΏΠΎΠ²Π΅ΡΡ ΡΡΡΠ΅ΠΊΡΠ°.
Π Π°Π΄ΠΈΡΡ Π³ΡΠ°Π½ΠΈΡΡ : ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΡ ΡΡΠ½ΠΊΡΠΈΡ, ΡΡΠΎΠ±Ρ ΠΎΠ±ΡΠ΅Π·Π°ΡΡ ΠΎΡΡΡΡΠ΅ ΠΊΡΠ°Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΡΠΎΠ±Ρ ΠΏΡΠΈΠ΄Π°ΡΡ Π΅ΠΌΡ Π±ΠΎΠ»Π΅Π΅ ΠΏΠ»Π°Π²Π½ΡΠΉ Π²ΠΈΠ΄.
ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ : Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ ΡΠ²Π΅Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°, ΠΊΠΎΡΠΎΡΡΠΉ Π΄ΠΎΠΏΠΎΠ»Π½ΡΠ΅Ρ ΡΠΎΠ½. ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΎΠΏΡΠΈΡ Β«Π’ΠΈΠΏΠΎΠ³ΡΠ°ΡΠΈΠΊΠ°Β», Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠ±ΡΠ°ΡΡ ΡΡΠΈΡΡ, ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°, ΡΠΎΠ»ΡΠΈΠ½Ρ, ΡΠ΅Π³ΠΈΡΡΡ, ΡΡΠΈΠ»Ρ (ΠΊΡΡΡΠΈΠ², ΠΏΠΎΠ»ΡΠΆΠΈΡΠ½ΡΠΉ ΡΡΠΈΡΡ ΠΈ Ρ. Π.)), ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ (ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅, ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈ Ρ. Π΄.), Π²ΡΡΠΎΡΡ ΡΡΡΠΎΠΊΠΈ ΠΈ ΠΌΠ΅ΠΆΠ±ΡΠΊΠ²Π΅Π½Π½ΡΠΉ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π» Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅.
ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ : Π’ΠΎΡΠ½ΠΎ ΡΠ°ΠΊ ΠΆΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠ±ΡΠ°ΡΡ ΡΠ²Π΅Ρ ΠΈ ΡΠΈΠΏΠΎΠ³ΡΠ°ΡΠΈΠΊΡ Π΄Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ ΠΎΠΏΠΈΡΠ°Π½ΠΈΡ Π² ΡΡΠΎΠΉ ΠΎΠΏΡΠΈΠΈ.
ΠΠ½Π°ΡΠΎΠΊ : ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ ΡΠ²Π΅Ρ Π·Π½Π°ΡΠΊΠ°, Π΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ Π·Π½Π°ΡΠΊΠΎΠΌ ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ.
ΠΠ°ΡΡΡΠΎΠΉΠΊΠΈ
Image Hover Effects Π΄Π»Ρ Elementor ΠΏΠΎΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ ΡΠΎ ΡΡΠΈΠ»ΡΠΌΠΈ CSS3, ΠΊΠΎΡΠΎΡΡΠ΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΠΏΠΎΡΡΡΡΠ°ΡΡΠΈΠ΅, Π½ΠΎ ΠΌΡΠ³ΠΊΠΈΠ΅ ΠΈ ΠΏΡΠΈΡΡΠ½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊ Π²Π°ΡΠΈΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌ.ΠΠΎΠ·Π²ΠΎΠ»ΡΡΠ΅ Π²Π°ΡΠΈΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌ ΠΏΠΎΡΡΠ΅ΠΏΠ΅Π½Π½ΠΎ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°ΡΡΡΡ ΠΈΠ»ΠΈ ΡΠΌΠ΅Π½ΡΡΠ°ΡΡΡΡ, ΡΠ΄Π²ΠΈΠ³Π°ΡΡΡΡ, ΠΏΠ΅ΡΠ΅Π²ΠΎΡΠ°ΡΠΈΠ²Π°ΡΡΡΡ, Π·Π°ΡΠ²ΠΎΡΡΡΡΡΡ, ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°ΡΡΡΡ, ΡΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡΡΡ, Π²ΡΠ°ΡΠ°ΡΡΡΡ ΠΈ Ρ. Π. ΠΠ΄Π½ΠΈΠΌ ΡΠ΅Π»ΡΠΊΠΎΠΌ ΠΌΡΡΠΈ. ΠΠΈΠΊΠ°ΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ΄ΠΈΡΠΎΠ²Π°Π½ΠΈΡ. ΠΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄Π΅Π»Π°ΡΡ Π²Π΅ΡΠΈ ΠΏΡΠΎΡΡΡΠΌΠΈ ΠΈ ΡΠ»Π΅Π³Π°Π½ΡΠ½ΡΠΌΠΈ. ΠΡΠ»ΠΈ Ρ Π²Π°Ρ Π΅ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΡΠΎ ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ ΡΡΠΈΠ»Ρ ΠΈ Π²ΡΡΠ°Π²ΠΈΡΡ Π΅Π³ΠΎ Π½Π° Π΄ΡΡΠ³ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. Π£ Π²Π°Ρ ΡΠ°ΠΊΠΆΠ΅ Π΅ΡΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π΄ΡΠ±Π»ΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. ΠΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΎΡ Image Hover Effects ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½Ρ ΠΈ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡ Π΄Π»Ρ ΠΎΡΠ΅Π½Ρ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΡ ΠΈ ΠΎΡΠ΅Π½Ρ Π±ΠΎΠ»ΡΡΠΈΡ ΡΡΡΡΠΎΠΉΡΡΠ². ΠΠ½ΠΈ ΡΠΎΠ·Π΄Π°Π½Ρ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π³ΠΈΠ±ΠΊΠΎΠ³ΠΎ ΠΈ Π½Π°Π΄Π΅ΠΆΠ½ΠΎΠ³ΠΎ CSS.
Seo Friendly
Π‘ ΡΠΎΡΠΊΠΈ Π·ΡΠ΅Π½ΠΈΡ SEO, Π±Π΅Π· Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΡΠ΅Π³ΠΎΠ² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ², Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² ΠΈ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠΉ ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌ Π½Π΅ ΠΎΠ±ΠΎΠΉΡΠΈΡΡ. Π’Π΅Π³ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² ΠΈ ΠΎΠΏΠΈΡΠ°Π½ΠΈΡ ΠΏΠΎΡΡΠΈ Π²ΡΠ΅Π³Π΄Π° Π²ΡΠ·ΡΠ²Π°ΡΡ ΡΠ΅Π»ΡΠΎΠΊ Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ, ΡΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΡΠ»ΠΎΠ²Π° Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°Ρ
ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°Ρ
ΠΌΠΎΠ³ΡΡ ΠΏΠΎΠΌΠΎΡΡ Π²Π°ΡΠ΅ΠΌΡ Π²Π΅Π±-ΡΠ°ΠΉΡΡ Π·Π°Π½ΡΡΡ Π±ΠΎΠ»Π΅Π΅ Π²ΡΡΠΎΠΊΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ Π² ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ°Ρ
ΠΏΠΎΠΈΡΠΊΠ°.
Image Hover Effects Π΄Π»Ρ Elementor ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π΄Π΅Π»Π°ΡΡ Π²ΡΠ΅ ΡΡΠΎ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅ Π²ΡΠ΅Π³ΠΎ Π·Π° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ΅ΠΊΡΠ½Π΄. ΠΡΠΎΡΡΠΎ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π²Π°ΡΠ΅Π³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΠΏΠΎΠ»Π΅ ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ ΡΠ΅Π³ (h2-H6, Π°Π±Π·Π°Ρ, Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½).ΠΠ°ΡΠ΅ΠΌ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ Π² ΠΏΠΎΠ»Π΅ ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅. ΠΠΎΡ ΠΈ Π²ΡΠ΅. Π’Π΅ΠΏΠ΅ΡΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΡΡΡΠΎΠΈΡΡ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ΅ΠΊΡΡΠ°, ΡΠ΄Π΅Π»Π°Π² Π΅Π³ΠΎ Π°ΠΊΠΊΡΡΠ°ΡΠ½ΡΠΌ ΠΈ ΡΠ΅ΡΠΊΠΈΠΌ, Π΄ΠΈΠΊΠΈΠΌ ΠΈ Ρ ΡΠ΄ΠΎΠΆΠ΅ΡΡΠ²Π΅Π½Π½ΡΠΌ, ΠΈΠ»ΠΈ Π²ΡΠ±ΡΠ°ΡΡ ΠΈΠ· ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²Π° Π΄ΡΡΠ³ΠΈΡ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ².
ΠΡΠ΅ ΠΎΠ΄Π½ΠΈΠΌ Π²Π°ΠΆΠ½ΡΠΌ ΡΠ°ΠΊΡΠΎΡΠΎΠΌ ΡΠ²Π»ΡΡΡΡΡ ΡΡΡΠ»ΠΊΠΈ Π½Π° ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈΠ»ΠΈ ΡΡΡΠ»ΠΊΠΈ Π΄Π»Ρ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΡ ΡΡΠ°ΡΠΈΠΊΠ°. Image Hover Effects ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΠ²ΡΠ·Π°ΡΡ Π²Π°ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Ρ ΡΠΊΠ°Π·Π°Π½Π½ΡΠΌ URL-Π°Π΄ΡΠ΅ΡΠΎΠΌ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ ΡΡΡΠ»ΠΊΡ, Π½Π° ΠΊΠΎΡΠΎΡΡΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΠΏΠ΅ΡΠ΅Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½Ρ Π²Π°ΡΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ (ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅), ΠΈ Π²ΡΡΠ°Π²ΠΈΡΡ Π΅Π΅ Π² ΠΏΠΎΠ»Π΅ ΠΏΠΎΠ΄ ΡΠ°Π·Π΄Π΅Π»ΠΎΠΌ Β«Π‘ΡΡΠ»ΠΊΠ° Π½Π°Β».
ΠΠ΄Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ
ΠΠ° Π»ΡΠ±ΠΎΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅ WordPress, ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΠ΅ΠΌ Elementor! ΠΡΠ΄Ρ ΡΠΎ ΡΠ°ΠΉΡ Π±Π»ΠΎΠ³ΠΎΠ², Π½ΠΎΠ²ΠΎΡΡΠ½ΠΎΠΉ ΡΠ°ΠΉΡ ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ ΡΠ°ΠΉΡ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΠΎΠΉ ΠΊΠΎΠΌΠΌΠ΅ΡΡΠΈΠΈ ΠΈΠ»ΠΈ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΠΎΠ³ΠΎ ΠΎΠ±ΡΡΠ΅Π½ΠΈΡ, Image Hover Effects ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π±Π΅Π·ΡΠΏΡΠ΅ΡΠ½ΠΎ. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π±ΠΎΠ»Π΅Π΅ 40 ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ, ΡΡΠΎΠ±Ρ ΡΠ²ΠΎΡΠΈΡΡ ΡΡΠ΄Π΅ΡΠ° Ρ Π²Π°ΡΠΈΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ. ΠΠΎ ΠΏΠΎΡΠ΅ΠΌΡ Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΎΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡΡΡ Π½Π° Π΄ΠΎΡΡΠΈΠ³Π½ΡΡΠΎΠΌ? ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ Π½Π°ΡΡ Π²Π΅ΡΡΠΈΡ Pro. ΠΠ΅ΡΡΠΈΡ Pro ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ Π±ΠΎΠ»Π΅Π΅ 150+ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, Π° ΡΠ°ΠΊΠΆΠ΅ ΡΡΠ΄ Π΄ΡΡΠ³ΠΈΡ
ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ².
Emage Hover Effects Π΄Π»Ρ Elementor (Pro)
- 150+ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ
- Basic β Advanced ΠΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
- ΠΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠΌΡ
- 9 ΡΠ΅Π½ΡΡΠΎΠ²ΠΎΠΊ ΠΎΠΏΡΠΈΠΉ
- ΠΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π½Π΅ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΡΠΉ ΡΡΡΠ΅ΠΊΡ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΠΈ
- ΠΠ°ΡΡΡΠΎΠΉΠΊΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΡΠ»ΠΎΠΊ, ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΡΠ²Π΅ΡΠΎΠ² ΠΈ ΡΠΈΠΏΠΎΠ³ΡΠ°ΡΠΈΠΊΠΈ
- Post Grid ΠΡΡΠ΅ΠΊΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
- ΠΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΏΠΎΠ»Ρ (Ρ Elementor Pro)
ΠΠΎΠ»Π΅Π·Π½ΡΠ΅ ΡΡΡΠ»ΠΊΠΈ
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ | Emage Hover Effects (Pro) | ΠΡΠΏΠΈΡΡ Emage Hover Effects
6 Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΡΠΊΠΈΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
Π‘ΡΠΈΡΠ°Π΅ΡΠ΅ Π»ΠΈ Π²Ρ, ΡΡΠΎ ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ»ΠΎΠΆΠ½Ρ ΠΈ Π΄ΠΎΡΠΎΠ³ΠΈ? Π ΡΡΠ°ΡΡΡΡ, Π²Ρ ΠΎΡΠΈΠ±Π°Π΅ΡΠ΅ΡΡ.Π‘Π΅Π³ΠΎΠ΄Π½Ρ Ρ Π½Π°Ρ Π΅ΡΡΡ Π΄Π»Ρ Π²Π°Ρ ΠΎΡΠΎΠ±ΠΎΠ΅ ΡΠ΄ΠΎΠ²ΠΎΠ»ΡΡΡΠ²ΠΈΠ΅: Π£ΡΠ΅Π±Π½ΠΈΠΊ ΠΏΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΌΡΡΠΈ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±Π΅Π· Π΅Π΄ΠΈΠ½ΠΎΠΉ ΡΡΡΠΎΡΠΊΠΈ ΠΊΠΎΠ΄Π° ! ΠΡΠ»ΠΈ ΡΠ°Π½ΡΡΠ΅ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ CSS Hero ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΡΠΈΡΡΠΎΠ² ΠΈ ΡΠ²Π΅ΡΠΎΠ² Π½Π° ΡΠ²ΠΎΠ΅ΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅, ΠΏΠΎΡΠ° ΠΏΡΠΎΡΠ²ΠΈΡΡ ΡΠ²ΠΎΠΈ ΡΡΠΏΠ΅ΡΡΠΏΠΎΡΠΎΠ±Π½ΠΎΡΡΠΈ. Π‘ΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΡΠΈ ΠΏΡΠΎΠ΄Π²ΠΈΠ½ΡΡΡΠ΅, Π΄ΠΎΡΡΠΎΠΉΠ½ΡΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΠ° ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ β ΡΡΠΎ Π»Π΅Π³ΠΊΠΈΠΉ Π²Π΅ΡΠ΅ΡΠΎΠΊ Ρ CSS Hero. Π§Π΅ΡΡΡΠ΅ ΠΈΠ»ΠΈ ΠΏΡΡΡ ΡΠ°Π³ΠΎΠ², ΠΈ Π²Ρ ΠΏΠΎΠ»ΡΡΠΈΡΠ΅ ΠΏΡΠ΅ΠΊΡΠ°ΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ, ΠΎΠ±ΠΎΠ³Π°ΡΠ°ΡΡΠΈΠΉ Π²Π°Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΎΠΏΡΡ.
ΠΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΎΠ·Π΄Π°ΡΡ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠ΅ ΠΌΠΈΠΊΡΠΎΠ²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ Π½Π° Π²Π°ΡΠ΅ΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅, Π° ΡΠ²Π»Π΅ΠΊΠ°Π΅Ρ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Π΅ΠΉ .ΠΠΈΠΊΡΠΎΠ²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΈΠ»ΠΈ ΡΠΎΠ½ΠΊΠΈΠ΅ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π° Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅ β Π²Π°ΠΆΠ½Π°Ρ ΡΠ΅Π½Π΄Π΅Π½ΡΠΈΡ Π² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅. ΠΠΈΠΊΡΠΎΠ²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΠΏΠΎΠ²ΡΡΠ°ΡΡ Π²ΠΎΠ²Π»Π΅ΡΠ΅Π½Π½ΠΎΡΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ ΠΈ ΡΠΏΠΎΡΠΎΠ±ΡΡΠ²ΡΡΡ ΠΏΠ»Π°Π²Π½ΠΎΠΌΡ ΠΏΠΎΠ²Π΅ΡΡΠ²ΠΎΠ²Π°Π½ΠΈΡ. Π, ΡΠ΅ΡΡΠ½ΠΎ Π³ΠΎΠ²ΠΎΡΡ, ΠΎΠ½ΠΈ ΡΠ°ΠΊΠΆΠ΅ Π΄Π΅Π»Π°ΡΡ Π²Π°Ρ ΡΠ°ΠΉΡ ΠΊΡΡΡΡΠΌ. ΠΠ½ΠΈ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΡΡΠΎΡΡ , ΠΏΠΎΡΡΠ°ΡΠΈΠ² Π½Π° ΡΡΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΌΠΈΠ½ΡΡ.
ΠΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ ΠΌΡ ΡΠ³Π»ΡΠ±ΠΈΠΌΡΡ Π² ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ, ΡΠ΄Π΅Π»Π°Π΅ΠΌ Π΅ΡΠ΅ ΠΏΠ°ΡΡ Π²Π΅ΡΠ΅ΠΉ. Π¨Π°Π³ΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ Π² ΡΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΎΠ½ΠΈ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Ρ, ΠΏΠΎΡΡΠΎΠΌΡ Π²Π°ΠΌ ΠΏΡΠΈΠ΄Π΅ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π· ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΡΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠΎΡΡΠΎΡΠ½ΠΈΡΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Normal ΠΈ Hover .ΠΠΈΠΆΠ΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½ ΡΠ½ΠΈΠΌΠΎΠΊ ΡΠΊΡΠ°Π½Π°, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΡΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΡΠ°ΡΡΡΠΎΠ².
ΠΠ½ΡΡΡΡΠΌΠ΅Π½Ρ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΡΠ°ΡΡΡΠ° Π³Π΅ΡΠΎΡ CSS
Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π²Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π΄Π»Ρ ΡΡΡΠ»ΠΎΠΊ, ΡΠΎΠ½Π°, ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ³ΠΎ Π΄ΡΡΠ³ΠΎΠ³ΠΎ, Π½ΠΎ Π² ΡΡΠΎΠΌ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠΈ Π±Π»ΠΎΠ³Π° ΠΌΡ ΡΠ΄Π΅Π»ΡΠ΅ΠΌ ΠΎΡΠΎΠ±ΠΎΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΡΡΡΠ΅ΠΊΡΠ°ΠΌ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
ΠΡΠ°ΠΊ, Π²Ρ Π·Π°ΠΏΡΡΡΠΈΠ»ΠΈ CSS Hero ΠΈ Π½Π°ΡΠ΅Π»ΠΈΠ»ΠΈΡΡ Π½Π° ΡΠ°Π·Π΄Π΅Π» ΠΈΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΡΠ΅ΠΊΠ»Π°ΠΌΠ½ΠΎΠ΅ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. Π ΡΠ΅ΠΏΠ΅ΡΡ Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΠ²Π΅ΡΠ΅Π»ΠΈΠΌΡΡ, ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡ ΠΊ Π½Π΅ΠΌΡ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΡ ΠΈ ΠΏΡΠΈΠΏΡΠ°Π²ΠΈΡ β Π²ΡΠ΅Π³ΠΎ Π·Π° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΎΡΡΡΡ ΡΠ°Π³ΠΎΠ².
ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠ²Π΅ΡΠΎΠ²
ΠΡΡΠ΅ΠΊΡΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΠ²Π΅ΡΠΎΠ²ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ Π΄Π²Π° ΡΠ»ΠΎΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΈ ΠΌΠΎΠ³ΡΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΏΠΎΡΡΡΡΠ°ΡΡΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡΡΡ ΠΏΠΈΠΊΡΠ΅Π»ΠΈ, Π½Π°Π»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ Π΄ΡΡΠ³ Π½Π° Π΄ΡΡΠ³Π°, ΡΠ°Π·Π½ΡΠΌΠΈ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ. Photoshop ΡΠ΄Π΅Π»Π°Π» ΡΠ΅ΠΆΠΈΠΌΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠ²Π΅ΡΠΎΠ² ΠΏΡΠΈΠ²ΡΡΠ½ΡΠΌΠΈ Π΄Π»Ρ Π²ΡΠ΅Ρ . ΠΠ΄Π½Π°ΠΊΠΎ Π²Π°ΠΌ Π½Π΅ Π½ΡΠΆΠ΅Π½ Photoshop Π΄Π»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² ΡΠΌΠ΅ΡΠΈΠ²Π°Π½ΠΈΡ ΡΠ²Π΅ΡΠΎΠ² ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌ Π½Π° Π²Π°ΡΠ΅ΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅ β Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±ΠΈΡΡΡΡ ΡΠΎΠ³ΠΎ ΠΆΠ΅ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS. ΠΡΠ΅Π²ΠΈΠ΄Π½ΡΠΌ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²ΠΎΠΌ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎ, ΡΡΠΎ CSS ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²ΡΠ·ΡΠ²Π°ΡΡ ΡΡΡΠ΅ΠΊΡ ΡΠΌΠ΅ΡΠΈΠ²Π°Π½ΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° , ΡΠΎΠ·Π΄Π°Π²Π°Ρ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎ ΠΎΡΠ΅Π»ΠΎΠΌΠ»ΡΡΡΠΈΠΉ, Π½ΠΎ ΠΈ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠΉ ΡΡΡΠ΅ΠΊΡ.
CSS Hero ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²Π°ΠΌ Π²Π΅ΡΠ΅Π»ΠΎ ΠΏΡΠΎΠ²Π΅ΡΡΠΈ Π²ΡΠ΅ΠΌΡ Ρ 15 ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌΠΈ ΡΠ΅ΠΆΠΈΠΌΠ°ΠΌΠΈ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠ²Π΅ΡΠΎΠ². ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ·Π½Π°ΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΎΠ± ΡΡΠΈΡ ΡΠ΅ΠΆΠΈΠΌΠ°Ρ ΠΈ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΡ Π½Π° Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅ Photoshop.
ΠΠΎΡ ΡΠ°Π³ΠΈ, ΡΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΡΠ°ΡΠΈΠ²ΡΠΉ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠ²Π΅ΡΠΎΠ²:
- ΠΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅. Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ ΡΠΎΠ½Π°. ΠΠ°Π³ΡΡΠ·ΠΈΡΠ΅ Π½ΠΎΠ²ΡΡ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡ ΠΈΠ»ΠΈ Π²ΡΠ±Π΅ΡΠΈΡΠ΅ ΠΎΠ΄Π½Ρ ΠΈΠ· ΠΌΠ΅Π΄ΠΈΠ°ΡΠ΅ΠΊΠΈ ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. (Π½Π΅ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π° Π΄Π»Ρ ΠΏΠΎΠΊΡΡΡΠΈΡ)
- ΠΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅. ΠΡΠ±Π΅ΡΠΈΡΠ΅ ΡΠ²Π΅Ρ ΡΠΎΠ½Π°.
- ΠΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅. ΠΡΠ±Π΅ΡΠΈΡΠ΅ ΡΠ΅ΠΆΠΈΠΌ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠΎΠ½Π°. ΠΠ»Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ ΠΎΠ²Π΅ΡΠ»Π΅ΠΉ , Π½ΠΎ Π²Π°ΠΌ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΠΏΡΠΈΠ΄Π΅ΡΡΡ Π½Π°ΠΉΡΠΈ ΡΠ²ΠΎΠΉ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΠΊΡΠ°ΡΠΈΠ²ΡΡ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΡ ΡΠ²Π΅ΡΠ° / ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
- Π‘ΡΠ°ΡΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ . Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ ΡΠΎΠ½Π°. Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ Π΄ΡΡΠ³ΠΎΠΉ ΡΠ²Π΅Ρ ΡΠΎΠ½Π° ΠΈ ΡΠ±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΡ ΡΠ²Π΅Ρ \ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΠΏΠΎΡΡΠ΄ΠΊΠ΅.
- ΠΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ . ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°. ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ (0,5 Ρ), ΡΡΠΎΠ±Ρ ΡΠ³Π»Π°Π΄ΠΈΡΡ ΡΡΡΠ΅ΠΊΡ.
ΠΠ°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΊΡΡΡΠΎΡΠ° Π΄Π»Ρ ΡΠΌΠ΅ΡΠΈΠ²Π°Π½ΠΈΡ ΡΠ²Π΅ΡΠΎΠ² β ΡΠ°Π³ΠΈ 1-3
ΠΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° β ΡΠ°Π³ 4
ΠΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠ° β ΡΠ°Π³ 5
Π£Π²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
Π‘ ΡΡΠΈΠΌ ΡΡΡΠ΅ΠΊΡΠΎΠΌ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡ ΠΊΡΡΡΠΎΡ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡ Π±ΡΠ΄Π΅Ρ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°ΡΡΡΡ, ΠΎΡΡΠ°Π²Π°ΡΡΡ Π² ΠΏΡΠ΅Π΄Π΅Π»Π°Ρ Π³ΡΠ°Π½ΠΈΡ ΡΠ°Π·Π΄Π΅Π»Π° ΠΈΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.ΠΡΠΎ ΡΠΎΠ·Π΄Π°Π΅Ρ Π·Π°Ρ Π²Π°ΡΡΠ²Π°ΡΡΠΈΠΉ ΡΡΡΠ΅ΠΊΡ ΠΏΠ»Π°Π²Π½ΠΎΠ³ΠΎ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΡ. Π£Π²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΏΡΠΈΡΡΠ³ΠΈΠ²Π°Π΅Ρ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Ρ ΠΈ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ°Π½ΡΠ°ΡΡΠΈΡΠ΅ΡΠΊΠΈ Π½Π° ΠΏΠ°Π½ΠΎΡΠ°ΠΌΠ½ΡΡ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡΡ , ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡΡ Π΅Π΄Ρ ΠΈ Π΄Π°ΠΆΠ΅ Π½Π° ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡΡ Π²Π°ΡΠ΅ΠΉ ΠΊΠΎΠΌΠ°Π½Π΄Ρ. ΠΠΎΡΡΠΈ Π»ΡΠ±ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΠΌΠΈ Π΄Π΅ΡΠ°Π»ΡΠΌΠΈ Π²ΡΠΈΠ³ΡΠ°Π΅Ρ ΠΎΡ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΡ, ΠΏΠΎΡΡΠΎΠΌΡ Π²Π°ΠΌ ΠΏΡΠΈΠ΄Π΅ΡΡΡ ΠΏΠΎΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°ΡΡ Ρ Π½ΠΈΠΌ. ΠΠΎΡ Π³Π΄Π΅ Π²ΡΠ΅ ΡΠ°ΠΌΠΎΠ΅ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎΠ΅, Π²Π΅ΡΠ½ΠΎ?
ΠΠΎ ΡΡΡΠΏΠ΅Π½ΡΠΊΠ°ΠΌ:
- ΠΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΡΠ°ΡΡΡ. Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ ΡΠΎΠ½Π°. ΠΠ°Π³ΡΡΠ·ΠΈΡΠ΅ ΠΈΠ»ΠΈ Π²ΡΠ±Π΅ΡΠΈΡΠ΅ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡ ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅.
- ΠΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΡΠ°ΡΡΡ. Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π° Π½Π° 100% 100%.
- ΠΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΡΠ°ΡΡΡ. Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ½Π° Π½Π° ΠΏΠΎ ΡΠ΅Π½ΡΡΡ .
- Π‘ΡΠ°ΡΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ . Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ ΡΠΎΠ½Π°. Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ Π΄ΡΡΠ³ΠΎΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π° β Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, 120% 120%. ΠΠ°ΠΌ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ Π²Π²Π΅ΡΡΠΈ ΡΡΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π²ΡΡΡΠ½ΡΡ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΡΠΎΡΠ½ΡΠ΅ ΠΏΡΠΎΡΠ΅Π½ΡΡ Π½Π΅ Π±ΡΠ΄ΡΡ Π΄ΠΎΡΡΡΠΏΠ½Ρ Π² ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅ΠΌΡΡ ΠΌΠ΅Π½Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠΎΠ½Π°.
- ΠΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ . ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°. ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ (0,5 Ρ), ΡΡΠΎΠ±Ρ ΡΠ³Π»Π°Π΄ΠΈΡΡ ΡΡΡΠ΅ΠΊΡ.
Π£Π²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° β ΡΠ°Π³ΠΈ 1-3
Π£Π²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° β ΡΠ°Π³ 4
Π£Π²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° β ΡΠ°Π³ 5
ΠΠ½ΡΡΡΠ΅Π½Π½ΡΡ ΡΠ΅Π½Ρ ΠΏΠ°ΡΠ΅Π½ΠΈΡ
Π ΠΏΠΎΠΊΠ°Π·Π°Π½Π½ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΡΡΠΎΡ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΏΡΠΈΠ΄Π°Π΅Ρ ΠΎΠ±ΡΠ΅ΠΌ ΠΏΠ»ΠΎΡΠΊΠΎΠΌΡ ΠΊΡΠ°ΡΠ½ΠΎΠΌΡ ΡΠ²Π΅ΡΡ. ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Ρ ΠΎΡΠΎΡΠΈΠΌ ΡΡΡΠ΅ΠΊΡΠΎΠΌ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π½Π° Π΄ΠΎΠΌΠ°ΡΠ½Π΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅, Π³Π΄Π΅ Ρ Π²Π°Ρ Π΅ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΠΎΠ»Π±ΡΠΎΠ² Π±ΠΎΠΊ ΠΎ Π±ΠΎΠΊ ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠ½ΡΡΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΌΡΡΠΈ ΠΎΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΡΠΎΠ»Π±ΡΠ° ΠΊ Π΄ΡΡΠ³ΠΎΠΌΡ.
ΠΡΠΈ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΠΊ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡΠΌ ΡΡΡΠ΅ΠΊΡ Π²Π½ΡΡΡΠ΅Π½Π½Π΅ΠΉ ΡΠ΅Π½ΠΈ ΡΠΎΠ·Π΄Π°Π΅Ρ ΠΊΡΠ°ΡΠΈΠ²ΡΡ Π²ΠΈΠ½ΡΠ΅ΡΠΊΡ.ΠΠΎΠ½Π΅ΡΠ½ΠΎ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΠ±ΡΠ°ΡΠΈΡΡ ΡΡΠΎΡ ΡΡΡΠ΅ΠΊΡ ΠΈ ΠΎΡΡΠ°Π²ΠΈΡΡ Π²ΠΈΠ½ΡΠ΅ΡΠΊΡ Π½Π° ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡΡ Π² Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ, Π° Π·Π°ΡΠ΅ΠΌ ΡΠ΄Π΅Π»Π°ΡΡ ΠΈΡ ΡΡΠΊΠΈΠΌΠΈ ΠΈ ΡΠ΅ΡΠΊΠΈΠΌΠΈ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡ Π½Π° Π½ΠΈΡ ΠΊΡΡΡΠΎΡ. Π ΡΡΠΎΠΌ ΠΏΡΠ΅Π»Π΅ΡΡΡ Π²ΡΠ΅Ρ ΡΡΠΈΡ ΡΡΡΠ΅ΠΊΡΠΎΠ²: ΠΊΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ Π²Ρ ΠΏΠΎΠΉΠΌΠ΅ΡΠ΅, Π½Π°ΡΠΊΠΎΠ»ΡΠΊΠΎ Π»Π΅Π³ΠΊΠΎ ΠΈΡ ΡΠΎΠ·Π΄Π°ΡΡ, ΠΎΡΠΊΡΠΎΠ΅ΡΡΡ ΡΠ»ΡΠ·Π° Π΄Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ²ΠΎΡΡΠ΅ΡΡΠ²Π°, ΠΈ Π²Ρ ΠΎΡΠΊΡΠΎΠ΅ΡΠ΅ Π΄Π»Ρ ΡΠ΅Π±Ρ ΠΏΠΎΠΈΡΡΠΈΠ½Π΅ Ρ ΡΠ΄ΠΎΠΆΠ΅ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΠΈ.
Π¨Π°Π³ΠΈ ΠΊ ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π²Π½ΡΡΡΠ΅Π½Π½Π΅ΠΉ ΡΠ΅Π½ΠΈ:
- ΠΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΡΠ°ΡΡΡ . Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ ΡΠΎΠ½Π°. Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ ΡΠ²Π΅Ρ ΡΠΎΠ½Π°. Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ rgba (255,71,71,1) (ΡΠ΅ΡΡΠ½Π°Π΄ΡΠ°ΡΠ΅ΡΠΈΡΠ½ΡΠΉ ΠΊΠΎΠ΄ # ff4747).ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ ΠΈ Π²ΡΡΠ°Π²ΠΈΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΈΠ»ΠΈ Π²ΡΠ±ΡΠ°ΡΡ ΡΠ²Π΅Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ° Π²ΡΠ±ΠΎΡΠ° ΡΠ²Π΅ΡΠ°.
- Π‘ΡΠ°ΡΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ . ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°. Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ ΡΠ΅Π½Ρ Π±Π»ΠΎΠΊΠ° Π½Π° ΡΡΠΎ-ΡΠΎ Π²ΡΠΎΠ΄Π΅: 2px 2px 50px 2px # 332323 inset. ΠΡΠΈ ΡΠΈΡΠ»Π° ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡ ΡΠΎΠ±ΠΎΠΉ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ Π΄Π»Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ, Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ, ΡΠ°Π΄ΠΈΡΡΠ° ΡΠ°Π·ΠΌΡΡΠΈΡ, ΡΠ°Π΄ΠΈΡΡΠ° ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½ΠΈΡ ΠΈ ΡΠ²Π΅ΡΠ° ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΡΡΠ½ΡΡΡ Π·Π° ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»ΠΈ ΠΈ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊ ΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΡΠ΅Π½Ρ Π±Π»ΠΎΠΊΠ° Π² ΡΠ΅Π°Π»ΡΠ½ΠΎΠΌ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ, ΠΈΠ»ΠΈ, Π΅ΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠ°Π²ΠΈΡΡΡ ΡΠ΅Π½Ρ Π² Π½Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²Π²Π΅ΡΡΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π²ΡΡΡΠ½ΡΡ. Π Π°ΡΠΊΡΡΠ²Π°ΡΡΠΈΠΉΡΡ ΡΠΏΠΈΡΠΎΠΊ ΡΠ΅Π½ΠΈ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠ° ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ Π½Π΅ΠΊΠΎΡΠΎΡΡΠΌΠΈ ΠΎΠ±ΡΠΈΠΌΠΈ Π½Π°ΡΡΡΠΎΠΉΠΊΠ°ΠΌΠΈ ΡΠ΅Π½ΠΈ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠ°, Π½ΠΎ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ ΡΠ΅ΡΠ½ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΡΠ΅Π½ΠΈ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠ° ΠΏΠΎΠ΄ ΡΠΏΠΈΡΠΊΠΎΠΌ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΡ Π½Π°ΡΡΡΠΎΠ΅ΠΊ.
- ΠΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ . ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°. ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ (0,5 Ρ), ΡΡΠΎΠ±Ρ ΡΠ³Π»Π°Π΄ΠΈΡΡ ΡΡΡΠ΅ΠΊΡ.
ΠΠ½ΡΡΡΠ΅Π½Π½ΡΡ ΡΠ΅Π½Ρ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ β ΡΠ°Π³ 1
ΠΠ½ΡΡΡΠ΅Π½Π½ΡΡ ΡΠ΅Π½Ρ ΠΏΠ°ΡΠ΅Π½ΠΈΡ β ΡΠ°Π³ 2
ΠΡΡΠ΅ΠΊΡ Π²Π½ΡΡΡΠ΅Π½Π½Π΅ΠΉ ΡΠ΅Π½ΠΈ β ΡΠ°Π³ 3
ΠΠ½Π΅ΡΠ½ΡΡ ΡΠ΅Π½Ρ ΠΏΠ°ΡΠ΅Π½ΠΈΡ
ΠΡΡΠ΅ΠΊΡ Π²Π½Π΅ΡΠ½Π΅ΠΉ ΡΠ΅Π½ΠΈ ΡΠΎΠ·Π΄Π°Π΅Ρ ΠΈΠ»Π»ΡΠ·ΠΈΡ ΠΎΠ±ΡΠ΅ΠΌΠ°, ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π° ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ ΠΈ Π΅Π³ΠΎ ΡΠΎΠ½ΠΎΠΌ. ΠΠ°ΠΊ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, Π²Π½Π΅ΡΠ½ΡΡ ΡΠ΅Π½Ρ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°Π΅Ρ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΊ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΡΠΎ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ, ΠΊΠΎΠ³Π΄Π° Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π΅ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΈΠ»ΠΈ ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π² Π³Π°Π»Π΅ΡΠ΅Π΅ ΠΈΠ»ΠΈ ΡΠ΅ΡΠΊΠ΅.ΠΠ°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π²Π½Π΅ΡΠ½Π΅ΠΉ ΡΠ΅Π½ΠΈ ΠΏΠΎΡΡΠΈ Π·Π°ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Β«ΡΠ°Π³Π½ΡΡΡ Π²ΠΏΠ΅ΡΠ΅Π΄Β» ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ. Π’Π°ΠΊΠΆΠ΅ Ρ ΠΎΡΠΎΡΠΎ ΡΠΌΠΎΡΡΠΈΡΡΡ Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ.
- ΠΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΡΠ°ΡΡΡ . Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ ΡΠΎΠ½Π°. Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ ΡΠ²Π΅Ρ ΡΠΎΠ½Π°. Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π²Ρ Π²ΠΈΠ΄ΠΈΡΠ΅ rgba (71,105,255,1).
- Π‘ΡΠ°ΡΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ . ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°. Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ box-shadow ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ ΡΠ°ΠΊ: 10px 10px 30px 5px #aaa. Π¦ΠΈΡΡΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡ ΡΠ΅ ΠΆΠ΅ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ, ΡΡΠΎ ΠΈ Π² ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π²ΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ΅, Π° #aaa β ΡΡΠΎ ΠΏΡΠΎΡΡΠΎ Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΡΠΏΠΎΡΠΎΠ± Π²Π²ΠΎΠ΄Π° ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΠΎ ΡΠ²Π΅ΡΠ΅ ΡΠ΅Π½ΠΈ (ΠΈΠ»ΠΈ, ΠΎΠΏΡΡΡ ΠΆΠ΅, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ° Π²ΡΠ±ΠΎΡΠ° ΡΠ²Π΅ΡΠ°).ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅: ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠ΅ΡΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, Blur, Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ ΠΏΠ΅ΡΠ²ΡΠ΅ Π΄Π²Π° Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΡΠ΅Π½Ρ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ°ΡΡΠΈΡΡΠ΅ΡΡΡ Π΄ΠΎ ΠΏΡΠΎΡΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΡΠΎ Π΄Π°Π΅Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΡΠΎ Π²ΡΠ΅Ρ ΡΡΠΎΡΠΎΠ½.
- ΠΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ . ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°. ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ (0,5 Ρ), ΡΡΠΎΠ±Ρ ΡΠ³Π»Π°Π΄ΠΈΡΡ ΡΡΡΠ΅ΠΊΡ.
ΠΠ½Π΅ΡΠ½ΡΡ ΡΠ΅Π½Ρ β ΡΠ°Π³ 1
ΠΠ½Π΅ΡΠ½ΡΡ ΡΠ΅Π½Ρ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ β ΡΠ°Π³ 2
ΠΠ½Π΅ΡΠ½ΡΡ ΡΠ΅Π½Ρ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ β ΡΠ°Π³ 3
ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°
ΠΡΠΎ ΠΎΡΠ΅Π½Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΉ ΠΈ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.ΠΠ½ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΡ ΠΈΠ»ΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ. ΠΠ»Ρ Π΅Π³ΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π²ΡΠ΅, ΡΡΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ, β ΡΡΠΎ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΠΈΡΠΎΠΊΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Ρ ΠΈΡΡΠΎΡΡΠ΅ΠΉ CSS Hero Π² Π²Π°ΡΠ΅ΠΌ ΡΡΠΊΠ°Π²Π΅.
- ΠΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΡΠ°ΡΡΡ. Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ ΡΠΎΠ½Π°. ΠΠ°Π³ΡΡΠ·ΠΈΡΠ΅ ΠΈΠ»ΠΈ Π²ΡΠ±Π΅ΡΠΈΡΠ΅ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡ ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. Π£Π±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ Π²Π°ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΠΈΡΠΎΠΊΠΎΠ΅, Ρ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΡΠΎΡΠΎΠ½ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ 2: 1 ΠΈΠ»ΠΈ 3: 1.
- ΠΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΡΠ°ΡΡΡ. Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ½Π° Π² Π»Π΅Π²ΠΎΠ΅ ΡΠ΅Π½ΡΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅.
- Π‘ΡΠ°ΡΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ. Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ ΡΠΎΠ½Π°.Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ Π΄ΡΡΠ³ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ½Π° β Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΡΠ°Π²ΡΠΉ ΡΠ΅Π½ΡΡ. ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ Π½Π°ΡΡΡΠΎΠ΅ΠΊ, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΡΡΠΎ Π»ΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
- ΠΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅. ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°. ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ (2 ΡΠ΅ΠΊΡΠ½Π΄Ρ Π² ΠΏΠΎΡΡΠ΄ΠΊΠ΅), ΡΡΠΎΠ±Ρ ΡΠ³Π»Π°Π΄ΠΈΡΡ ΡΡΡΠ΅ΠΊΡ.
ΠΠ°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° β ΡΠ°Π³ΠΈ 1-2
ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° β ΡΠ°Π³ 3
ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° β ΡΠ°Π³ 4
ΠΠ΅ΡΡ Hover
ΠΡΠΎ Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΊΡΡΡΠΎΠΉ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ. ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ Π±ΠΎΠ»ΡΡΠ΅, Π½ΠΎ, Π² ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ ΡΡΡΠ΅ΠΊΡΠ° ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ , ΠΎΠ½ΠΎ Π²ΡΡ ΠΎΠ΄ΠΈΡ Π·Π° Π³ΡΠ°Π½ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.ΠΠ·-Π·Π° ΡΡΠΎΠ³ΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ±Π΅Π΄ΠΈΡΡΡΡ, ΡΡΠΎ Π²Π°ΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π΅ ΡΠ»ΠΈΡΠΊΠΎΠΌ Π±Π»ΠΈΠ·ΠΊΠΎ Π΄ΡΡΠ³ ΠΊ Π΄ΡΡΠ³Ρ, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΈ Π½Π΅ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°Π»ΠΈΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π½ΠΈΡ . Π§Π΅ΠΌ Π±ΠΎΠ»ΡΡΠ΅ Π²Π°ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΡΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°, ΡΠ΅ΠΌ Π±ΠΎΠ»ΡΡΠ΅ ΠΏΡΡΡΠΎΠ³ΠΎ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π° Π΅ΠΌΡ ΠΏΠΎΡΡΠ΅Π±ΡΠ΅ΡΡΡ. ΠΠ»Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΌΡ Π²ΡΠ±ΡΠ°Π»ΠΈ ΠΌΠ°ΡΡΡΠ°Π±Π½ΡΡ ΡΠΊΠ°Π»Ρ (1.1), ΠΊΠΎΡΠΎΡΠ°Ρ Π·Π°ΠΌΠ΅ΡΠ½Π°, Π½ΠΎ Π½Π΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½ΡΠ΅ΡΡΡ Π½Π° Π΄ΡΡΠ³ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
- Π‘ΡΠ°ΡΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ. ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°. Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° transform Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π±ΠΎΠ»ΡΡΠ΅ (1.1).
- ΠΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅. ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°. ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ (2 ΡΠ΅ΠΊΡΠ½Π΄Ρ Π² ΠΏΠΎΡΡΠ΄ΠΊΠ΅), ΡΡΠΎΠ±Ρ ΡΠ³Π»Π°Π΄ΠΈΡΡ ΡΡΡΠ΅ΠΊΡ.
ΠΡΡΠ΅ΠΊΡ Π·Π°Π²ΠΈΡΠ°Π½ΠΈΡ ΡΠΊΠ°Π»Ρ β ΡΠ°Π³ 1
ΠΠ°ΡΠ΅Π½ΠΈΠ΅ Π²Π΅ΡΠΎΠ² β ΡΠ°Π³ 2
ΠΡΡΠ΅ΠΊΡΡHover Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΠΌΠ½ΠΎΠ³ΠΎ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΡ ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅ β ΠΈ ΠΈΡ Π½Π° ΡΠ΄ΠΈΠ²Π»Π΅Π½ΠΈΠ΅ Π»Π΅Π³ΠΊΠΎ ΡΠΎΠ·Π΄Π°ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS Hero . ΠΡ Π½Π°Π΄Π΅Π΅ΠΌΡΡ, ΡΡΠΎ Π²Π°ΠΌ ΠΏΠΎΠ½ΡΠ°Π²ΠΈΠ»ΠΈΡΡ ΡΡΠΈ ΡΡΡΠ΅ΠΊΡΡ, ΠΈ Π²Ρ ΠΏΠΎΠ»ΡΡΠΈΡΠ΅ ΡΠ΄ΠΎΠ²ΠΎΠ»ΡΡΡΠ²ΠΈΠ΅ ΠΎΡ ΠΈΡ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ.
ΠΡΠ»ΠΈ Ρ Π²Π°Ρ Π΅ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈ ΡΠΎΠ³ΠΎ ΠΆΠ΅ ΠΊΠ»Π°ΡΡΠ° (ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΡΠ΅ΠΊΠ»Π°ΠΌΠ½ΠΎΠ΅ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠ΅) Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅, Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½Π½ΡΠ΅ ΠΊ ΠΎΠ΄Π½ΠΎΠΌΡ ΠΈΠ· Π½ΠΈΡ , Π±ΡΠ΄ΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°Π½Ρ Π΄Π»Ρ Π΄ΡΡΠ³ΠΈΡ , ΡΡΠΎ ΡΡΠΊΠΎΠ½ΠΎΠΌΠΈΡ Π²Π°ΡΠ΅ Π²ΡΠ΅ΠΌΡ. ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ»ΠΈΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΊ Π½Π΅ΠΊΠΎΡΠΎΡΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΊΠ»Π°ΡΡΠ° (Π½ΠΎ Π½Π΅ ΠΊΠΎ Π²ΡΠ΅ΠΌ), Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°Π·Π½Π°ΡΠΈΡΡ ΡΡΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ΠΊΠ»Π°ΡΡ CSS Custom ΠΈ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΠΈΡ ΠΏΠΎ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΡΡΠΈ.
ΠΠ°ΠΊΠΎΠΉ ΠΈΠ· ΡΡΠΈΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π²Π°ΠΌ Π±ΠΎΠ»ΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ Π½ΡΠ°Π²ΠΈΡΡΡ? ΠΠΎΠ΄Π΅Π»ΠΈΡΠ΅ΡΡ ΡΠ²ΠΎΠΈΠΌΠΈ ΠΌΡΡΠ»ΡΠΌΠΈ Π½ΠΈΠΆΠ΅.
Pure CSS Images Zoom Effect
ΠΠ΅Π΄Π°Π²Π½ΠΎ Ρ ΡΠ΅ΡΠΈΠ» ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠΈΡΡ ΡΠ²ΠΎΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ jquery Π½Π° ΠΎΠ΄Π½ΠΎΠΌ ΠΈΠ· ΠΌΠΎΠΈΡ ΡΠ°ΠΉΡΠΎΠ² Π½Π° ΡΠΊΠ²ΠΈΠ²Π°Π»Π΅Π½ΡΠ½ΠΎΠ΅ ΡΠΈΡΡΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ css, ΠΈ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΡ Π±ΡΠ»ΠΈ ΠΏΠΎΡΡΡΡΠ°ΡΡΠΈΠΌΠΈ: Ρ ΠΌΠ΅Π½Ρ ΡΠ°ΠΊΠΎΠΉ ΠΆΠ΅ ΡΡΡΠ΅ΠΊΡ, Π½ΠΎ Ρ Π±ΠΎΠ»Π΅Π΅ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ, Π±Π΅Π· javascript , ΠΈ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π½ΡΡΠ΅ ΠΊΠΎΠ΄Π°.Π ΡΡΠΎΠΌ ΡΡΠΎΠΊΠ΅ Ρ ΠΏΠΎΠ΄Π΅Π»ΡΡΡ ΠΊΠΎΠ΄ΠΎΠΌ css ΠΈ html, ΠΊΠΎΡΠΎΡΡΠΉ Ρ Π½Π°ΠΏΠΈΡΠ°Π», ΡΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌ ΡΡΡΠ΅ΠΊΡ ΠΏΠ»Π°Π²Π½ΠΎΠ³ΠΎ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°.
ΠΠΎΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ: ΠΏΡΠΎΡΡΠΎ Π½Π°Π²Π΅Π΄ΠΈΡΠ΅ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
Π ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠ½ΠΊΡΠΈΡ CSS Transitions, ΡΡΠΎΠ±Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΠ»Π°Π²Π½ΠΎ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π»ΠΈΡΡ ΠΈ ΡΠΌΠ΅Π½ΡΡΠ°Π»ΠΈΡΡ.
Π‘Π»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄ css Π±ΡΠ΄Π΅Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π·Π°Π²ΠΈΡΠ°Π½ΠΈΡ, Π² Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ ΠΌΡ Π²ΡΠ±Π΅ΡΠ΅ΠΌ, ΠΊ ΠΊΠ°ΠΊΠΈΠΌ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄, Π° Π² ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ Π·Π°Π²ΠΈΡΠ°Π½ΠΈΡ β ΠΎΠΊΠΎΠ½ΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΡΠ°ΠΊΠΆΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅ΡΡ Π²ΡΡΠΎΠΊΠΈΠΉ z-ΠΈΠ½Π΄Π΅ΠΊΡ. ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° Π΄ΡΡΠ³ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
.zit { ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅; ΡΠΈΡΠΈΠ½Π°: 100 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; Π²ΡΡΠΎΡΠ°: 80 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; ΡΠ»Π΅Π²Π°: 0px; Π²Π΅ΡΡ : 0px; Π³ΡΠ°Π½ΠΈΡΠ°: ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΡΠ΅ΡΠ½ΡΠΉ 1px; / * ΠΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ CSS3 ΠΊ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌ width, height, top ΠΈ left * / ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄: ΡΠΈΡΠΈΠ½Π° 0.ΠΠ΅Π³ΠΊΠΎΡΡΡ 3Ρ, Π»Π΅Π³ΠΊΠΎΡΡΡ Π²ΡΡΠΎΡΡ 0,3Ρ, Π»Π΅Π³ΠΊΠΎΡΡΡ Π²Π»Π΅Π²ΠΎ 0,3Ρ, Π»Π΅Π³ΠΊΠΎΡΡΡ Π²Π΅ΡΡ Π° 0,3Ρ; -webkit-transition: Π»Π΅Π³ΠΊΠΎΡΡΡ ΠΏΠΎ ΡΠΈΡΠΈΠ½Π΅ 0,3 Ρ, ΠΏΠΎ Π²ΡΡΠΎΡΠ΅ 0,3 Ρ, Π²Π»Π΅Π²ΠΎ 0,3 Ρ, ΡΠ²Π΅ΡΡ Ρ 0,3 Ρ; -o-ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄: ΡΠΈΡΠΈΠ½Π° 0,3 Ρ, Π²ΡΡΠΎΡΠ° 0,3 Ρ, ΡΠ»Π΅Π²Π° 0,3 Ρ, Π²Π΅ΡΡ 0,3 Ρ; -moz-transition: Π»Π΅Π³ΠΊΠΎΡΡΡ ΠΏΠΎ ΡΠΈΡΠΈΠ½Π΅ 0,3 Ρ, ΠΏΠΎ Π²ΡΡΠΎΡΠ΅ 0,3 Ρ, Π²Π»Π΅Π²ΠΎ 0,3 Ρ, ΡΠ²Π΅ΡΡ Ρ 0,3 Ρ; } .zit: Π½Π°Π²Π΅ΡΡΠΈ { ΡΠΈΡΠΈΠ½Π°: 150 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; Π²ΡΡΠΎΡΠ°: 120 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; ΡΠ»Π΅Π²Π°: -25px; Π²Π΅ΡΡ : -25 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; z-ΠΈΠ½Π΄Π΅ΠΊΡ: 9999; } .ZoomIt ul { ΡΡΠ½ΠΎ: ΠΎΠ±Π°; } .ZoomIt li { ΡΠΈΡΠΈΠ½Π°: 102 ΠΏΠΈΠΊΡ; Π²ΡΡΠΎΡΠ°: 82 ΠΏΠΈΠΊΡ; ΠΌΠ°ΡΠΆΠ°: 4 ΠΏΠΈΠΊΡΠ΅Π»Ρ; ΠΏΠ»ΡΡΡ Π½Π°Π»Π΅Π²ΠΎ; ΠΏΠ΅ΡΠ΅Π»ΠΈΠ²: Π²ΠΈΠ΄ΠΈΠΌΡΠΉ; Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π±Π»ΠΎΠΊ; }ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ°Π·, ΠΊΠΎΠ³Π΄Π° Ρ Π΄ΡΠ±Π»ΠΈΡΡΡ ΡΡΡΠΎΠΊΡ Β«ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π°Β» ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡ ΠΏΡΠ΅ΡΠΈΠΊΡΡ -webkit- ΠΈ -moz- -o-, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠ΅ Π΄Π»Ρ Π΄ΡΡΠ³ΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² (Mozilla, Chrome, Opera,β¦)
Π ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ΅ html Π»ΡΠ±ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ (ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ) Ρ ΠΈΠΌΠ΅Π½Π΅ΠΌ ΠΊΠ»Π°ΡΡΠ° Β«zitΒ» Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅ΡΡ ΡΡΡΠ΅ΠΊΡ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ:
ΠΡΠΎΡ ΠΊΠΎΠ΄ Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π² ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΡ Π²Π΅ΡΡΠΈΡΡ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ², ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ IE10, firefox, chrome, opera β¦
Π― Ρ
ΠΎΡΠ΅Π» Π±Ρ ΡΡΠ»ΡΡΠ°ΡΡ Π²Π°ΡΠΈ ΠΌΡΡΠ»ΠΈ ΠΈ ΠΈΠ΄Π΅ΠΈ, ΠΏΠΎΡΡΠΎΠΌΡ Π½Π΅ ΡΡΠ΅ΡΠ½ΡΠΉΡΠ΅ΡΡ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°ΡΡ.
Π Π΅ΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠ°Π²ΠΈΡΡΡ ΡΡΠΎΡ ΡΡΠΎΠΊ, ΠΏΠΎΠ΄Π΅Π»ΠΈΡΠ΅ΡΡ ΠΈΠΌ, ΡΠΏΠ°ΡΠΈΠ±ΠΎ.
ΠΡΡΡΠΈΠ΅ CSS-ΡΡΡΠ΅ΠΊΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΡΠΎΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ
ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²ΠΎΡ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ CSS.ΠΡΠΎ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ ΡΠΎΠΊΡΠ°ΡΠΈΡΡ Π²ΡΠ΅ΠΌΡ ΠΏΡΠ΅Π±ΡΠ²Π°Π½ΠΈΡ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Π΅ΠΉ. ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΠΎΠ±ΡΠ΄ΡΡ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Π΅ΠΉ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΡΡΠΎ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ Π²Π°Ρ ΡΠ°ΠΉΡ, ΠΈ ΡΠ΄Π΅Π»Π°ΡΡ Π²Π°ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Π±ΠΎΠ»Π΅Π΅ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ½ΠΎΠΉ. ΠΡΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ²ΡΡΠ°Π΅Ρ ΡΠ΅ΠΏΡΡΠ°ΡΠΈΡ Π²Π°ΡΠ΅Π³ΠΎ Π±ΡΠ΅Π½Π΄Π°.
ΠΡΠ° ΡΡΠ°ΡΡΡ ΠΏΠΎΠΊΠ°ΠΆΠ΅Ρ Π²Π°ΠΌ 20 ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ CSS. ΠΡΠ΅ ΠΎΠ½ΠΈ Π»Π΅Π³ΠΊΠΈΠ΅, ΠΏΡΠΎΡΡΡΠ΅ ΠΈ ΡΠ΄ΠΎΠ±Π½ΡΠ΅ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ. ΠΠ°ΠΆΠ΅ ΠΏΡΠΈ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΡ Π·Π½Π°Π½ΠΈΡΡ Javascript ΠΈ CSS Π½Π°ΡΡΡΠΎΠΈΡΡ ΡΡΠΈ ΡΡΡΠ΅ΠΊΡΡ Π½Π΅ΡΠ»ΠΎΠΆΠ½ΠΎ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°ΡΡ Ρ ΠΌΠ°ΠΊΠ΅ΡΠ°ΠΌΠΈ ΠΈ Π²ΡΡΡΠ½ΠΈΡΡ, ΡΡΠΎ Π»ΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ Π²Π°Ρ.
ΠΡΠΎΡΡΡΠ΅ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΈ ΠΏΠΎΠ½ΡΡΠ½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ CSS
ΠΠ½ΠΎΠΏΠΊΠ° Fun
ΠΡΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ CSS ΠΎΠ±Π»Π°Π΄Π°ΡΡ ΠΊΠ»Π°ΡΡΠ½ΡΠΌ ΡΡΡΠ΅ΠΊΡΠΎΠΌ Π°ΡΡΡ ΡΠ΅ΠΊΡΡΠ° ΠΈ ΡΠ²Π΅ΡΠΎΠ² ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½ΠΈΡ ΠΊΡΡΡΠΎΡΠ°. ΠΡΠΎ ΡΠ΄Π΅Π»Π°Π΅Ρ Π²Π°Ρ Π΄ΠΈΠ·Π°ΠΉΠ½ Π±ΠΎΠ»Π΅Π΅ ΠΆΠΈΠ²ΡΠΌ ΠΈ ΠΏΠΎΠ½ΡΠ°Π²ΠΈΡΡΡ ΡΠ΅ΠΌ, ΠΊΡΠΎ ΠΏΠΎΡΠ΅ΡΠ°Π΅Ρ Π²Π°Ρ ΡΠ°ΠΉΡ.
ΠΠ½ΠΎΠΏΠΊΠ° Twitter Π΄Π»Ρ ΡΠΊΡΡΡΠΎΠΉ Π΄Π²Π΅ΡΠΈ
ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ, ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΌΠΎΠ³ΡΡ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°ΡΡ Ρ Π²Π°ΡΠΈΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ. ΠΡ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΏΠΎΡ ΠΎΠΆΠ΅Π΅ Π½Π° Π·Π½Π°ΡΠΎΠΊ Twitter.ΠΠΎΠ³Π΄Π° Π²Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡΠ΅ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π½Π° Π½Π΅Π³ΠΎ, ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΡΡΡΡΠΊΡΡΡΠ°, ΠΏΠΎΡ ΠΎΠΆΠ°Ρ Π½Π° ΡΠΊΡΡΡΡΡ Π΄Π²Π΅ΡΡ, ΠΏΠΎΠΊΠ° ΠΎΠ½Π° ΡΠ΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΠΊΠ½ΠΎΠΏΠΊΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ.
ΠΠ½ΠΎΠΏΠΊΠ° Cool Beans 60 ΠΊΠ°Π΄ΡΠΎΠ² Π² ΡΠ΅ΠΊΡΠ½Π΄Ρ
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΡΠΎΡΡΠΎ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠ±ΡΠ°ΡΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π»ΠΈ ΡΡΠ°Π½ΡΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΠΈ Π½Π΅ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ Π΄Π»Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠΎΠ±ΡΠΈΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΡΠ»Π΅Π΄ΡΡΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Β«will change: transformΒ».
CSS3 ΠΡΡΠ΅ΠΊΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ Ρ FontAwesome
ΠΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠ° ΡΠ²ΡΠ·Π°Π½Π° Ρ FontAwesome Ρ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΌΠΈ Π²Π°ΡΠΈΠ°Π½ΡΠ°ΠΌΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π°.ΠΡΠΎΡ CSS3 ΠΈΠΌΠ΅Π΅Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ CSS, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ ΡΡΡΠ΅Π»ΠΊΡ Π²ΠΌΠ΅ΡΡΠΎ ΡΠ΅ΠΊΡΡΠ°. ΠΠ½ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΡΡΡΠ΅Π»ΠΊΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅, ΠΈΠ·Π²Π΅ΡΡΠ½ΡΡ ΠΊΠ°ΠΊ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠΉ ΡΠ΄Π²ΠΈΠ³.
Π‘ΠΎΠ·Π΄Π°Π²Π°ΠΉΡΠ΅ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΈ Π²ΡΡΠΎΠΊΠΎΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π²Π΅Π±-ΡΠ°ΠΉΡΡ Π±Π΅Π· Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΡ ΠΊΠΎΠ΄Π°
WoW Π²Π°ΡΠΈΡ
ΠΊΠ»ΠΈΠ΅Π½ΡΠΎΠ², ΡΠΎΠ·Π΄Π°Π²Π°Ρ ΠΈΠ½Π½ΠΎΠ²Π°ΡΠΈΠΎΠ½Π½ΡΠ΅ ΠΈ ΡΡΠΈΠΌΡΠ»ΠΈΡΡΡΡΠΈΠ΅ Π²Π΅Π±-ΡΠ°ΠΉΡΡ
Π±ΡΡΡΡΠΎ, Π±Π΅Π· ΠΎΠΏΡΡΠ° ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ. Slider Revolution ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²Π°ΠΌ,
, ΠΏΡΠΈΠ²Π»Π΅ΡΡ ΠΊ Π²Π°ΠΌ ΠΏΠΎΡΠΎΠΊ ΠΊΠ»ΠΈΠ΅Π½ΡΠΎΠ² Π·Π° ΠΌΠΎΠ΄Π½ΡΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ².
ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ Π·Π½Π°ΡΠΎΠΊ CSS Button Hover
ΠΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΡΡΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ β ΡΡΠΎ 3D-Π°Π½ΠΈΠΌΠ°ΡΠΈΡ, ΠΎΡΠ½ΠΎΠ²Π°Π½Π½Π°Ρ Π½Π° CSS ΠΈ HTM.ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π² ΡΠ°Π·Π΄Π΅Π»Π΅ ΠΏΡΠΈΠ·ΡΠ²Π° ΠΊ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π΅Π³ΠΎ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠΌ ΠΈ ΠΏΠΎΠ±ΡΠ΄ΠΈΡΡ Π»ΡΠ΄Π΅ΠΉ ΠΊΡΠΏΠΈΡΡ Π²Π°Ρ ΠΏΡΠΎΠ΄ΡΠΊΡ ΠΈΠ»ΠΈ ΡΡΠ»ΡΠ³Ρ. ΠΠΎΠΆΠ½ΠΎ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΡ ΡΠ°ΡΡΡ Π²Π½ΡΡΡΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ.
ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° Ρ ΡΠ°Π΄ΡΠΆΠ½ΡΠΌ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌ
ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΡΡΡ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ²Π΅ΡΠΎΠ²ΠΎΠΉ ΡΡΡΠ΅ΠΊΡ ΡΠ°Π΄ΡΠΆΠ½ΠΎΠ³ΠΎ ΡΠΎΠ½Π°. ΠΡΠΎΡ ΡΡΡΠ΅ΠΊΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ΅Π½ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΠ΄ΠΈΡΠΎΠ²Π°Π½ΠΈΡ CSS ΠΈ HTML. ΠΠ½ Π½ΡΠ°Π²ΠΈΡΡΡ Π±ΠΎΠ»ΡΡΠ΅ΠΌΡ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Ρ Π»ΡΠ΄Π΅ΠΉ, Π½Π°ΡΠ»Π°ΠΆΠ΄Π°ΡΡΡ ΠΏΠ»Π°Π²Π½ΡΠΌ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ΠΌ Ρ Π²Π°ΡΠΈΠΌ ΡΠ°ΠΉΡΠΎΠΌ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠ±ΠΈΡΠ°ΡΡ ΠΈΠ· ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΠΎΡΡΠ΅Π½ΠΊΠΎΠ² ΠΈ ΡΠ²Π΅ΡΠΎΠ²ΠΎΠΉ ΠΏΠ°Π»ΠΈΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ.
ΠΡΠΊΠΈΠ΄Π½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°
Π‘ΠΌΠ΅ΡΡ Sass Button Border Hover Effect
ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ CSS ΠΏΠΎΡΠ²ΠΈΡΡΡ ΡΡΡΠ΅ΠΊΡ ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ.
ΠΠΎΠ»Π»Π΅ΠΊΡΠΈΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ
ΠΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΈΠΌΠ΅Π΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ CSS, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ ΠΏΠΎΠ½ΡΠ°Π²ΠΈΡΡΡΡ Π²Π°ΡΠΈΠΌ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»ΡΠΌ, Π² ΡΠΎΠΌ ΡΠΈΡΠ»Π΅ ΡΠ²Π΅ΡΠΎΠ²ΡΠ΅ ΡΠ΄Π²ΠΈΠ³ΠΈ, Π·Π°Π»ΠΈΠ²ΠΊΠΈ ΠΈ ΡΡΡΠ΅ΠΊΡΡ ΠΊΠΎΠ½ΡΡΡΠ°.
ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ CSS-ΠΌΠ°ΡΠΊΠΈ
ΠΡΠΎΡ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ Π·Π°ΠΏΡΡΠΊΠ° ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΊΠ°Π΄ΡΠ°, ΡΡΠΎ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ΅Π»ΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ° Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΡΠΎΠΉ ΡΠΏΡΠ°ΠΉΡΠΎΠ²ΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ.
CSS Fizzy Button
CSS ΠΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΌΠΈ ΡΡΠ½ΠΊΡΠΈΡΠΌΠΈ
ΠΡΠΎΠ·ΡΠ°ΡΠ½Π°Ρ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½Π°Ρ ΠΏΡΠ³ΠΎΠ²ΠΈΡΠ°
ΠΡΠ»ΠΈΡΠ½ΠΎΠΉ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΡΡ ΡΡΡΠ΅ΠΊΡΠ° Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΡΡΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΠ²Π»ΡΠ΅ΡΡΡ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΠ°Ρ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° Ρ Π³ΡΠ°Π½ΠΈΡΠ°ΠΌΠΈ. ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΡΠ΅ΠΊΡΡΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΠΈΡ Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ. ΠΠΎΠ³Π΄Π° Π²Ρ Π½Π°ΠΆΠΈΠΌΠ°Π΅ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΈΠ»ΠΈ Π½Π°Π²ΠΎΠ΄ΠΈΡΠ΅ ΠΊΡΡΡΠΎΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ, ΡΠ²Π΅Ρ ΠΈ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ ΡΠ΅ΠΊΡΡΠ° ΠΌΠ΅Π½ΡΡΡΡΡ Π½Π° ΡΠ°Π·Π½ΡΠ΅ ΡΠ²Π΅ΡΠ° Π½Π° Π½Π΅ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΠΌ ΡΡΠΎΠ²Π½Π΅.
ΠΠ΅ΡΠ΅Π²ΠΎΡΠΎΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ CSS Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΉ ΡΠΈΡΠΈΠ½ΠΎΠΉ
ΠΡΠΎ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°.ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΡΡΡΠΎΠΈΡΡ Π΅Π³ΠΎ ΡΠ΅ΠΊΡΡΡ Π½Π° Π»ΠΈΡΠ΅Π²ΠΎΠΉ ΠΈ ΠΎΠ±ΠΎΡΠΎΡΠ½ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Π°Ρ . ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Ρ Π²Π°Ρ Π΅ΡΡΡ ΡΠ»ΠΎΠ²ΠΎ Β«ΠΠΎΠ΄Π°Β» Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠ΅ΠΊΡΡΠ° ΡΠΏΠ΅ΡΠ΅Π΄ΠΈ, Π½ΠΎ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΡΠ΅ΠΊΡΡ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΡ Π½Π° Β«ΠΠΎΠ΄Π½ΡΠΉΒ».
ΠΡΡΠ΅ΠΊΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ Ρ Box-Shadow
ΠΡΠΎ ΠΈΠ΄Π΅Π°Π»ΡΠ½Π°Ρ ΠΎΡΠ½ΠΎΠ²Π½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΎΠ³ΠΎ ΡΠΈΠΏΠ°.
Iconic Button FX
ΠΠ°ΠΆΠ΄ΡΠΉ Π·Π½Π°ΡΠΎΠΊ ΡΡΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈΠΌΠ΅Π΅Ρ ΡΠ²ΠΎΠΉ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ ΡΡΡΠ΅ΠΊΡ ΠΏΠΎΠ΄ΠΏΠΈΡΠΈ ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ ΠΈΠ»ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°. Π₯ΠΎΡΡ Π²Ρ Π½Π΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π²ΡΠ΅ Π΄ΠΎΡΡΡΠΏΠ½ΡΠ΅ Π·Π½Π°ΡΠΊΠΈ Π½Π° ΡΠ²ΠΎΠ΅ΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΊΠ»ΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ.ΠΠ°ΠΊΠΎΠΉ Π±Ρ ΡΡΠΈΡΡ Π·Π½Π°ΡΠΊΠΎΠ² Π²Ρ Π½ΠΈ Π²ΡΠ±ΡΠ°Π»ΠΈ Π΄Π»Ρ ΡΠ΅ΠΊΡΡΠ°, ΠΎΠ½ΠΈ ΠΏΠΎΠ΄ΠΎΠΉΠ΄ΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ. ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Iconic Button FX β ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± Π½Π°ΡΡΡΠΎΠΈΡΡ Π²Π°Ρ ΡΠ°ΠΉΡ.
ΠΠ»Π°ΡΡΠΈΡΠ½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° Ρ ΡΡΡΠ΅ΠΊΡΠΎΠΌ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ
ΠΡΡΠ΅ΠΊΡ ΡΠ°ΡΡΡΠΆΠ΅Π½ΠΈΡ ΠΈΠ»ΠΈ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΡ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠ±ΡΠ°ΡΡ ΠΎΠ΄Π½Ρ ΠΈΠ· Π΄Π²ΡΡ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΡΡΡΠΎΠΊ Π²Π²Π΅ΡΡ ΠΈ Π²Π½ΠΈΠ· Π΄ΠΎ ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠΉ ΡΠ°ΡΡΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ.
ΠΠ°Π³ΡΡΠ·ΡΠΈΠΊ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS | Bootstrap 4 | SCSS
ΠΠ½ΠΎΠΏΠΊΠ° CSS 100 Π΄Π½Π΅ΠΉ β 045
ΠΠΎΠ³Π΄Π° Π²Ρ Π½Π°ΠΆΠΈΠΌΠ°Π΅ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΈΠ»ΠΈ Π½Π°Π²ΠΎΠ΄ΠΈΡΠ΅ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ, ΡΠ²Π΅Ρ ΠΊΠΎΠ½ΡΡΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΈΠ½ΡΠ΅Π½ΡΠΈΠ²Π½ΡΠΌ, ΠΏΠΎΠΊΠ° ΠΎΠ½Π° Π΄Π²ΠΈΠΆΠ΅ΡΡΡ ΠΏΠΎ Π΅Π΅ Π³ΡΠ°Π½ΠΈΡΠ°ΠΌ.
ΠΠ°ΡΠΈΡΠ΅Π½Π½ΡΠ΅ ΠΏΡΠ³ΠΎΠ²ΠΈΡΡ
ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΡ Π΄ΠΈΠ°Π³ΠΎΠ½Π°Π»ΡΠ½ΡΡ ΠΎΠ΄ΠΈΠ½Π°ΡΠ½ΡΡ ΡΠ°ΠΌΠΊΡ.
Π’ΠΎΠ½ΠΊΠΈΠ΅ ΠΏΡΠ³ΠΎΠ²ΠΈΡΡ
ΠΠ½ΠΎΠΏΠΊΠ° ΠΌΠ°Π½Ρ
ΠΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΏΡΠΎΡΡΠ° ΠΈ ΠΏΠΎΠ½ΡΡΠ½Π°. Π Π°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» Π²ΡΠ΅Π³ΠΎ 80 ΡΡΡΠΎΠΊ CSS ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π΄Π΅ΡΡΡΠΊΠΎΠ² ΡΡΡΠΎΠΊ HTML. ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ ΡΠΎΠ·Π΄Π°Π΅ΡΡΡ ΡΠΎΠ½ΠΎΠ²Π°Ρ Π·Π°Π»ΠΈΠ²ΠΊΠ° Π΄Π»Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠΉ ΠΆΠΈΠ΄ΠΊΠΎΠΉ ΡΠΎΡΠΌΡ.
ΠΠΈΠΏΠΊΠ°Ρ ΠΏΡΠ³ΠΎΠ²ΠΈΡΠ°
ΠΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠ° Ρ ΡΡΡΠ΅ΠΊΡΠΎΠΌ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ CSS ΠΏΠΎΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ Ρ ΡΠΈΠ»ΡΡΡΠ°ΠΌΠΈ SVG.
ΠΠ½ΠΎΠΏΠΊΠ° CSS Ρ ΡΡΡΠ΅ΠΊΡΠΎΠΌ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ
ΠΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½Ρ ΠΏΡΠΎΡΡΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ CSS, ΡΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΡΠΉ ΠΈ ΡΠΎΠ½ΠΊΠΈΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½. ΠΠΎΠ³Π΄Π° Π½Π°Π΄ Π½ΠΈΠΌ ΠΏΠ°ΡΠΈΡ, Ρ Π½Π΅Π³ΠΎ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΠΈΡΡΠ΅Π·Π°ΡΡΠ°Ρ Π°ΡΡΠ°.
ΠΠ½ΠΎΠΏΠΊΠΈ ΡΠΎ Π·Π½Π°ΡΠΊΠ°ΠΌΠΈ
ΠΠΎΠ»ΡΡΠ΅ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ CSS Ρ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ
ΠΡΡΠ΅ΠΊΡ ΠΊΠ»ΠΈΠΊΠ° Π½Π° ΡΠΈΡΡΠΎΠΌ CSS
ΠΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π»Π΅Π³ΠΊΠΎ ΠΊΠ»ΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠ΅ΡΠ΅Π½Π΅ΡΡΠΈ ΡΡΡΠ΅ΠΊΡΡ Π½Π° ΡΡΠΎ ΡΠ³ΠΎΠ΄Π½ΠΎ. ΠΡΡΠ΅ΠΊΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΏΠΎΡ ΠΎΠΆΠΈ Π½Π° ΡΠ°Π±ΡΠ»ΡΡΠΈΡ ΠΈΠ»ΠΈ Π²ΡΠ±ΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΡΡΠ°Π½ΠΈΡΡ.ΠΠΎΡΠ»Π΅ ΡΠ΅Π»ΡΠΊΠ° Π·Π½Π°ΡΠΊΠΎΠ² ΡΠ΅Π»Π΅Π²ΡΡ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠΎΠ² ΠΎΠ½ΠΈ Π² ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΌ ΠΈΡΠΎΠ³Π΅ Π·Π°Π³ΠΎΡΠ°ΡΡΡΡ.
ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ Ρ ΠΊΡΠ±ΠΈΡΠ΅ΡΠΊΠΈΠΌ ΠΠ΅Π·ΡΠ΅
ΠΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ Π²Ρ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΠ΅ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ, ΡΠ΅ΠΊΡΡ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ ΡΠ²Π΅Ρ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΡΡΡΠΎΠΈΡΡ ΡΠ²Π΅Ρ ΡΠ΅ΠΊΡΡΠ° ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ ΡΠΎ ΡΠ²ΠΎΠΈΠΌΠΈ ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠ΅Π½ΠΈΡΠΌΠΈ. Π₯ΠΎΡΡ ΡΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΏΡΠΎΡΡΠ°, ΠΎΠ½Π° ΡΠ΄Π΅Π»Π°Π΅Ρ Π²Π°ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½Π΅Π΅ ΠΈ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½Π΅Π΅.
ΠΡΠΎΡΡΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ CSS
ΠΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΈΠΌΠ΅Π΅Ρ ΡΡΡΠ΅ΠΊΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ²Π΅ΡΠ° ΠΏΡΠΈ ΡΠ°Π·Π΄Π΅Π»Π΅Π½ΠΈΠΈ Π½Π° X-ΠΎΠ±ΡΠ°Π·Π½ΡΡ ΡΠΎΡΠΌΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°.Π’Π΅ΠΊΡΡ ΡΠ°ΠΊΠΆΠ΅ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π΅ΡΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΡΡΡΠ΅ΠΊΡΠΎΠΌ ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠΡΠΎ ΡΠ»ΡΡΡΠ°Π΅Ρ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈ ΠΌΠ°ΠΊΠ΅Ρ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ° ΠΈ Π΄Π΅Π»Π°Π΅Ρ Π²Π°ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΆΠΈΠ²ΠΎΠΉ.
ΠΠ½ΠΎΠΏΠΊΠ° Ρ ΡΠ°ΠΌΠΊΠΎΠΉ
ΠΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΡΡΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π΄Π΅Π»Π°Π΅Ρ Π΅Π΅ Π·Π°Π±Π°Π²Π½ΠΎΠΉ.
ΠΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS
ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ CSS + SVG
ΠΠ΅ΡΠΌΠΎΡΡΡ Π½Π° ΡΠΎ, ΡΡΠΎ ΡΡΠΎ Π²ΡΠ΅Π³ΠΎ Π»ΠΈΡΡ ΠΎΠ΄Π½Π° Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°, Π΅Π΅ ΡΡΡΠ΅ΠΊΡ Π²ΠΏΠ΅ΡΠ°ΡΠ»ΡΠ΅Ρ ΠΈ Π²Π΅Π»ΠΈΠΊΠΎΠ»Π΅ΠΏΠ΅Π½. ΠΡ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅ ΡΡΡΠ΅ΠΊΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π·Π°Π»ΠΈΡΠΎΠΉ ΡΠ²Π΅ΡΠΎΠΌ ΠΎΡ Π±ΠΎΠΊΠΎΠ²ΡΡ ΡΡΠΎΡΠΎΠ½ ΠΊ ΡΠ΅ΡΠ΅Π΄ΠΈΠ½Π΅, Π² ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ ΠΊΠΎΠ½ΡΡΡ ΠΈΠΌΠ΅Π΅Ρ ΠΊΠΎΠ½ΡΡΠ°ΡΡΠ½ΡΠΉ ΡΠ²Π΅Ρ.
ΠΠ½ΠΎΠΏΠΊΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ
ΠΠ½ΠΎΠΏΠΊΠ° Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΠ°Ρ Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΌΠ΅ΡΠ°Π½Π½ΠΎΠ³ΠΎ ΡΠ΅ΠΆΠΈΠΌΠ° ΡΠΌΠ΅ΡΠΈΠ²Π°Π½ΠΈΡ CSS.
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠΎΠ½Π°
ΠΠ½ΠΎΠΏΠΊΠ° ΠΈΠΌΠ΅Π΅Ρ ΠΎΠ΄ΠΈΠ½ ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΡΠ²Π΅Ρ, Π° Π³ΡΠ°Π½ΠΈΡΠ° ΠΈΠΌΠ΅Π΅Ρ Π΄ΡΡΠ³ΠΎΠΉ ΡΡΠΈΠ»Ρ ΠΈ ΡΠ²Π΅Ρ. Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΡΠ²Π΅Ρ ΡΠΎΠ½Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π½Π° Π΄ΡΡΠ³ΠΎΠΉ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π΅Π΅ Π³ΡΠ°Π½ΠΈΡΠ΅ΠΉ.
ΠΡΠΎ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌΡΠΉ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ CSS Π΄Π»Ρ Π²Π°ΡΠΈΡ ΡΡΡΠ°Π½ΠΈΡ Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΎΠΉ AJAX. ΠΠ°ΠΌ Π½Π΅ Π½ΡΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅Π·Π°Π³ΡΡΠΆΠ°ΡΡ Π²ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΡΡ Π±Π΅ΡΠΊΠΎΠ½Π΅ΡΠ½ΡΡ ΡΠ°Π·Π±ΠΈΠ²ΠΊΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ, ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»ΠΈ ΠΌΠΎΠ³ΡΡ ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ Π²ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π²ΠΎ Π²ΡΠ΅ΠΌΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ Π½ΠΎΠ²ΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ.ΠΠ΅Π΄ΠΎΡΡΠ°ΡΠΊΠΎΠΌ ΡΡΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎ, ΡΡΠΎ ΠΎΠ½Π° ΠΈΠΌΠ΅Π΅Ρ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΠΎΠ΅ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅.
ΠΡΠΎΡΡΠ°Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ CSS
ΠΠΈΠ·Π°ΠΉΠ½ ΡΡΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π±ΠΎΠ»ΡΡΠ΅ ΡΠΊΠΎΠ»ΡΠ·ΠΈΡ ΠΏΠΎ ΡΠ²Π΅ΡΡ Ρ ΡΠ°Π·Π½ΡΡ ΡΡΠΎΡΠΎΠ½. ΠΠ½ ΡΠ°ΠΊΠΆΠ΅ Π·Π°ΠΏΠΎΠ»Π½ΡΠ΅Ρ ΠΏΡΠ³ΠΎΠ²ΠΈΡΡ ΠΎΡ ΡΠ΅Π½ΡΡΠ° ΠΊ ΠΊΡΠ°Ρ. ΠΡΠ»ΠΈ Π²Ρ ΠΈΡΠ΅ΡΠ΅ ΠΏΡΠΎΡΡΠΎΠΉ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ CSS, ΡΡΠΎ ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ Π²ΡΠ±ΠΎΡ.
ΠΡΡΠ΅ΠΊΡ ΡΠ²Π΅ΡΠ΅Π½ΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
Π‘ΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΏΡΠ³ΠΎΠ²ΠΈΡΡ
ΠΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΈΠΌΠ΅Π΅Ρ ΡΡΡΠ΅ΠΊΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°.
CSS-ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
ΠΡΠΎ ΡΠΈΡΡΠΎ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ CSS. ΠΠΎΠ³Π΄Π° Π²Ρ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΠ΅ ΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΊ ΡΠ²ΠΎΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅, Π²Π°ΡΠ° ΡΡΡΠ°Π½ΠΈΡΠ° Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅ΡΡ ΡΠΊΡΡΡΡΠ΅ Π·Π½Π°ΡΠΊΠΈ. ΠΠ½ΠΈ ΠΏΠΎΡΠ²ΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Ρ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΠ΅ ΠΊΡΡΡΠΎΡ Π² ΡΠ°Π·Π΄Π΅Π» ΠΊΠ½ΠΎΠΏΠΎΠΊ.
CSS3 ΠΠ½ΠΎΠΏΠΊΠΈ
ΠΡΡΠ΅ΠΊΡ ΡΡΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ β ΡΠ΅Π½Ρ ΠΈ ΠΊΡΡΡΠΎΠΉ ΡΡΡΠ΅ΠΊΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π°. ΠΠΎΠ³Π΄Π° Π²Ρ Π½Π°ΠΆΠΈΠΌΠ°Π΅ΡΠ΅ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ, ΠΊΠ°ΠΆΠ΅ΡΡΡ, ΡΡΠΎ ΠΎΠ½Π° ΠΎΡΡΡΠ²Π°Π΅ΡΡΡ ΠΎΡ ΡΠΊΡΠ°Π½Π°, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ ΡΠ΅ΠΊΡΡ ΠΈΠ»ΠΈ Π·Π½Π°ΡΠΊΠΈ.
ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ-ΠΏΡΠΈΠ·ΡΠ°ΠΊΠ°
ΠΠΈΠΊΠΎΠ»Π° ΠΠΎΠΏΠΎΠ²ΠΈΡ ΡΠΎΠ·Π΄Π°Π» ΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ Π²ΡΡΡΡΠ΅Π»Π° Dribbble.
ΠΠΎΠ»ΡΡΠ΅ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ CSS
ΠΡΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ CSS Ρ ΡΡΡΠ΅ΠΊΡΠ°ΠΌΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, ΠΏΡΠΎΡΡΡ ΠΈ ΡΠ΄ΠΎΠ±Π½Ρ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ. Π§ΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠΌΠΈ, Π½Π΅ Π½ΡΠΆΠ½ΠΎ ΠΈΠ·ΡΡΠ°ΡΡ ΡΠ»ΠΎΠΆΠ½ΠΎΠ΅ ΠΊΠΎΠ΄ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅. ΠΠ½ ΡΠ΄Π΅Π»Π°Π΅Ρ Π²ΡΡ ΡΠ°Π±ΠΎΡΡ Π·Π° Π²Π°Ρ.
ΠΠ½ΠΎΠΏΠΊΠ° CSS Ρ ΡΡΡΠ΅ΠΊΡΠΎΠΌ ΡΠ²Π΅ΡΠ΅Π½ΠΈΡ
ΠΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΈΠΌΠ΅Π΅Ρ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ ΡΠ²Π΅ΡΠ΅Π½ΠΈΡ. ΠΠΎΠΌΠ΅ΡΡΠΈΡΠ΅ ΠΊΡΡΡΠΎΡ Π² Π²Π΅ΡΡ Π½ΡΡ ΡΠ°ΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΏΠΎΡΠ²ΠΈΡΡΡ 3D-ΡΡΡΠ΅ΠΊΡ ΡΠΎ ΡΠ²Π΅ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΎΡΡΠ΅Π½ΠΊΠ° ΡΠ°Π΄ΡΠ³ΠΈ.
ΠΠ½ΠΎΠΏΠΊΠΈ + Svg Trianglify
ΠΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΏΡΠΎΡΡΠ° Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ.ΠΠ½ ΠΈΠΌΠ΅Π΅Ρ ΠΊΡΠ°ΡΠΎΡΠ½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ SVG Ρ ΠΏΡΠΎΡΡΡΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ. ΠΠΎΠ»Π΅Π΅ ΡΠΎΠ³ΠΎ, Ρ Π½Π΅Π³ΠΎ ΠΏΠ»Π°Π²Π½ΡΠΉ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ ΠΎΡΠ½ΠΎΠ²Π°Π½ Π½Π° CSS ΠΈ Javascript. ΠΡΡΠ΅ΠΊΡΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π° ΠΏΠΎΡΠ²ΡΡΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°.
ΠΡΠΏΠ»ΡΠ²Π°ΡΡΠ°Ρ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠ° CSS
ΠΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½Ρ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΠ΅ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΡ ΠΎΠΏΡΠΈΡ Π² Π²Π°ΡΠ΅ΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠ΅. ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ²ΠΎΠΉ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΏΠ»Π°Π³ΠΈΠ½ ΠΈΠ»ΠΈ ΠΏΠ΅ΡΡΡ Π΄Π»Ρ ΠΊΠ»ΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ CSS Tooltip Hovers. ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΡΠ΅ΠΊΡΡ Π² ΡΠ΅Π³Π΅ HTML ΠΏΠΎΡΠ²ΠΈΡΡΡ ΡΡΡΠ΅ΠΊΡ Π·Π°ΡΡΡ Π°Π½ΠΈΡ, Π½Π°ΠΏΠΎΠΌΠΈΠ½Π°ΡΡΠΈΠΉ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΡΡ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΡ.
Π’ΡΠΈ ΠΏΡΠΎΡΡΡΡ ΡΡΡΠ΅ΠΊΡΠ° Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ CSS
ΠΡΠΈ ΡΡΠΈ ΡΡΡΠ΅ΠΊΡΠ° Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ CSS ΠΈΠΌΠ΅ΡΡ ΠΊΠ»Π°ΡΡΠ½ΡΠΉ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄, ΡΠ»ΡΡΡΠ°ΡΡΠΈΠΉ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°.
ΠΠ½ΠΎΠΏΠΊΠ° Β«Click MeΒ»
Π ΡΡΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠ΅ ΠΏΠΎΡΠ²ΠΈΡΡΡ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ / ΡΠ΅Π»ΡΠΊΠ° CSS.
ΠΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΡΠΎΡΠΎ
ΠΡΠΎ ΠΏΡΠΎΡΡΠΎΠΉ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΠ½ ΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π½Π° ΠΏΡΠΎΡΡΡΡ Π³Π°Π»Π΅ΡΠ΅Ρ ΠΌΠΈΠ½ΠΈΠ°ΡΡΡ. ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ° Β«ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅Β» ΠΏΠΎΡΠ²ΡΡΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡ.
ΠΡΡΠ΅ΠΊΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ
ΠΠΎΠ³Π΄Π° Π²Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΠ΅ ΡΡΠΎΡ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π½Π° ΡΠ²ΠΎΡ ΡΡΡΠ°Π½ΠΈΡΡ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΡΡΡΠΎΠΈΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ ΡΠΎ ΡΠ²ΠΎΠΈΠΌΠΈ ΠΏΠΎΡΡΠ΅Π±Π½ΠΎΡΡΡΠΌΠΈ ΠΈ ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠ΅Π½ΠΈΡΠΌΠΈ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅Π½ΠΈ Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠ΅. ΠΠΎΠΌΠΈΠΌΠΎ box-shadow, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ border-radius ΠΈ letter-spacing Π΄Π»Ρ ΡΠ±Π°Π»Π°Π½ΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΡΡΠ΅ΠΊΡΠ° ΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π½Π° ΡΠ²ΠΎΠ΅ΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅.
ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ
ΠΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΈΠΌΠ΅Π΅Ρ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΡΠ°Π΄ΡΠ³ΠΈ.
Π‘ΡΠΈΠ»ΡΠ½ΡΠ΅ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ CSS Π΄Π»Ρ Π±Π»ΠΎΠ³Π΅ΡΠΎΠ²
ΠΡΠΎ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΡΠΉ Π²ΡΠ±ΠΎΡ Π΄Π»Ρ Π±Π»ΠΎΠ³Π΅ΡΠΎΠ².ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠ±ΠΈΡΠ°ΡΡ ΠΈΠ· ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ. ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠ²Π΅Ρ, ΠΏΡΠΎΠ²ΠΎΠ΄ΠΈΠΌΡΠΉ ΠΏΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ΅ ΡΠ»Π΅Π²Π° Π½Π°ΠΏΡΠ°Π²ΠΎ, ΡΠΏΡΠ°Π²Π° Π½Π°Π»Π΅Π²ΠΎ ΠΈΠ»ΠΈ ΡΠ²Π΅ΡΡ Ρ Π²Π½ΠΈΠ·. ΠΠ½ΠΈ Π²ΡΠ΄Π΅Π»ΡΡΡ ΠΊΠΎΠ½ΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π΄Π»Ρ Π»ΡΡΡΠ΅Π³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°.
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ CSS, ΠΎΠ½Π° ΠΈΠΌΠ΅Π΅Ρ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΠΊΠ°ΠΆΠ΄ΡΡ Π³ΠΈΠΏΠ΅ΡΡΡΡΠ»ΠΊΡ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΏΠ΅ΡΠ° Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠ±ΡΠ°ΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠΎΠ±ΡΡΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°.
CSS-ΡΡΡΠ΅ΠΊΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π²Ρ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅, ΡΡΠΎ ΠΎΠ±ΡΠΈΠ΅ ΡΡΡΠ΅ΠΊΡΡ β ΡΡΠΎ ΡΠ΅Π½Ρ, ΠΏΡΠ»ΡΡ, ΡΠ³Π»ΠΎΠ²ΠΎΠΉ ΡΠΎΠ½ ΠΈ Π½Π΅ΠΎΠ½.
ΠΠ½ΠΎΠΏΠΊΠ° ΡΠ°ΡΠΊΡΠ°ΡΠΊΠΈ ΠΏΡΠ·ΡΡΠ΅ΠΉ
ΠΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠ° Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ CSS ΠΈΠΌΠ΅Π΅Ρ ΡΡΡΠ΅ΠΊΡ ΠΎΠΊΡΠ°ΡΠΊΠΈ ΠΏΡΠ·ΡΡΡΠΊΠΎΠ².
ΠΡΡΠ΅ΠΊΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ ΠΎΡΠΏΡΠ°Π²ΠΊΠΈ CSS
ΠΠ½ΠΈΠΌΠΈΡΡΠΉΡΠ΅ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Β«: beforeΒ» ΠΈ Β«: afterΒ», ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΠ±Π΅Π΄ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΎΡΠΏΡΠ°Π²ΠΊΠΈ CSS.
ΠΡΠ»ΠΈ Π²Π°ΠΌ ΠΏΠΎΠ½ΡΠ°Π²ΠΈΠ»Π°ΡΡ ΡΡΠ° ΡΡΠ°ΡΡΡ ΠΎΠ± ΡΡΡΠ΅ΠΊΡΠ°Ρ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ CSS, Π²Π°ΠΌ ΡΠ°ΠΊΠΆΠ΅ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΏΡΠΎΡΠΈΡΠ°ΡΡ Π΅Π΅:
ΠΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ²Π΅Π»ΠΈΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π² WordPress
ΠΡ Ρ ΠΎΡΠΈΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Amazon, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°ΡΡΠ΅Π΅ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π² WordPress? ΠΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ Π²ΠΈΠ΄Π΅ΡΡ Π΄Π΅ΡΠ°Π»ΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠ½ΠΈ Π½Π΅ ΡΠ²ΠΈΠ΄ΡΡ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°.Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡ ΠΏΠΎΠΊΠ°ΠΆΠ΅ΠΌ Π²Π°ΠΌ, ΠΊΠ°ΠΊ Π»Π΅Π³ΠΊΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ²Π΅Π»ΠΈΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π² WordPress.
ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΡ Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ WordPress
ΠΠ΅ΡΠ²ΠΎΠ΅, ΡΡΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ, ΡΡΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΈ Π°ΠΊΡΠΈΠ²ΠΈΡΠΎΠ²Π°ΡΡ ΠΏΠ»Π°Π³ΠΈΠ½ WP Image Zoom. ΠΠ»Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΡΠΌ. ΠΠ°ΡΠ΅ ΠΏΠΎΡΠ°Π³ΠΎΠ²ΠΎΠ΅ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΏΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Π° WordPress.
ΠΠΎΡΠ»Π΅ Π°ΠΊΡΠΈΠ²Π°ΡΠΈΠΈ Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΡΠ΅ΡΠΈΡΡ ΡΡΡΠ°Π½ΠΈΡΡ WP Image Zoom Π² Π°Π΄ΠΌΠΈΠ½ΠΊΠ΅ WordPress. ΠΡΡΡΠ΄Π° Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΏΡΠ°Π²Π»ΡΡΡ Π½Π°ΡΡΡΠΎΠΉΠΊΠ°ΠΌΠΈ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π²Π°ΡΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.
ΠΠ° Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ ΠΠ±ΡΠΈΠ΅ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΊΠ»ΡΡΠΈΡΡ ΡΠ°ΠΊΠΈΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ, ΠΊΠ°ΠΊ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΡΠΎΠ΄ΡΠΊΡΠΎΠ² WooCommerce, ΠΌΠΈΠ½ΠΈΠ°ΡΡΡ, ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ², ΡΡΡΠ°Π½ΠΈΡ Π²Π»ΠΎΠΆΠ΅Π½ΠΈΠΉ, ΡΡΡΠ°Π½ΠΈΡ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΠΉ ΠΈ Ρ. Π. ΠΡΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²Π°ΠΌ ΡΠ΄Π°Π»ΠΈΡΡ Π»Π°ΠΉΡΠ±ΠΎΠΊΡ, ΡΡΠΎΠ±Ρ Π²Π°ΡΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΌΠΎΠ³Π»ΠΈ ΠΏΠ»Π°Π²Π½ΠΎ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
ΠΡΠ»ΠΈ Π²Ρ Π½Π΅ ΡΠ΄Π°Π»ΡΠ΅ΡΠ΅ Π»Π°ΠΉΡΠ±ΠΎΠΊΡ Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΠΊΡΡΡΠΈΡΡ Π²Π½ΠΈΠ· Π΄Π»Ρ Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠΈΡ Π½Π°ΡΡΡΠΎΠ΅ΠΊ, ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ Π²ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π²Π½ΡΡΡΠΈ Π»Π°ΠΉΡΠ±ΠΎΠΊΡΠ°.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌΡΠ΅ Π»Π°ΠΉΡΠ±ΠΎΠΊΡΡ, ΡΡΠΎΠ±Ρ ΡΠ±Π΅Π΄ΠΈΡΡΡΡ, ΡΡΠΎ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎ Π²Π½ΡΡΡΠΈ Π»Π°ΠΉΡΠ±ΠΎΠΊΡΠ°.
ΠΠΎ Π·Π°Π²Π΅ΡΡΠ΅Π½ΠΈΠΈ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠ² Π½Π° ΡΡΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ Π½Π΅ Π·Π°Π±ΡΠ΄ΡΡΠ΅ Π½Π°ΠΆΠ°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π‘ΠΎΡ ΡΠ°Π½ΠΈΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ .
ΠΠ°ΡΠ΅ΠΌ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΠΉΡΠΈ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΡ Zoom Settings . Π£ Π½Π΅Π³ΠΎ Π΅ΡΡΡ 4 ΠΏΡΠΎΡΡΡΡ ΡΠ°Π³Π°, ΡΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ²Π΅Π»ΠΈΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊ Π²Π°ΡΠΈΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌ.
ΠΠΎ-ΠΏΠ΅ΡΠ²ΡΡ , Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π²ΡΠ±ΡΠ°ΡΡ ΡΠΎΡΠΌΡ Π»ΠΈΠ½Π·Ρ Π΄Π»Ρ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠ±ΡΠ°ΡΡ ΠΊΡΡΠ³Π»ΡΡ, ΠΊΠ²Π°Π΄ΡΠ°ΡΠ½ΡΡ ΠΈΠ»ΠΈ ΡΠΎΡΠΌΡ Π»ΠΈΠ½Π·Ρ ΠΎΠΊΠ½Π° ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ.
ΠΡΠ±ΡΠ°Π² ΠΎΠ±ΡΠ΅ΠΊΡΠΈΠ², ΠΏΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ ΠΊ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌΡ ΡΠ°Π³Ρ ΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Ρ Π²ΡΠ±ΡΠ°Π½Π½ΡΠΌ ΠΎΠ±ΡΠ΅ΠΊΡΠΈΠ²ΠΎΠΌ, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊ ΠΎΠ½ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ.Π ΠΏΠ»Π°Π³ΠΈΠ½Π΅ Π΅ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΠΏΡΠΎΠ²Π΅ΡΠΊΠΈ ΡΠ²ΠΎΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²Π΅ΡΠ½ΡΡΡΡΡ ΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΡΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΡΠ΅Π°Π»ΡΠ½ΠΎΠΌ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ ΠΏΠΎΡΠ»Π΅ Π²Π½Π΅ΡΠ΅Π½ΠΈΡ Π»ΡΠ±ΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π² ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΡ Π½ΠΈΠΆΠ΅.
ΠΠ° ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΡΠ°Π³Π΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠ±ΡΠ°ΡΡ ΡΠΈΠΏ ΠΊΡΡΡΠΎΡΠ°, ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΡΡΠ΅ΠΊΡ Π·Π°ΠΌΠ΅Π΄Π»Π΅Π½ΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, Π²ΠΊΠ»ΡΡΠΈΡΡ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΈΠ»ΠΈ ΡΠ΅Π»ΡΠΊΠ΅ ΠΌΡΡΠΈ ΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΡΡΠΎΠ²Π΅Π½Ρ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ. ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ· ΡΡΠΈΡ ΡΡΠ½ΠΊΡΠΈΠΉ Π΄ΠΎΡΡΡΠΏΠ½Ρ ΡΠΎΠ»ΡΠΊΠΎ Π² ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ ΠΏΠ»Π°Π³ΠΈΠ½Π°.
Π’Π΅ΠΏΠ΅ΡΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΉΡΠΈ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΡ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠΈ Lens Π΄Π»Ρ ΡΠ°ΠΊΠΈΡ Π½Π°ΡΡΡΠΎΠ΅ΠΊ, ΠΊΠ°ΠΊ ΡΠ°Π·ΠΌΠ΅Ρ Π»ΠΈΠ½Π·Ρ, ΡΠ²Π΅Ρ Π»ΠΈΠ½Π·Ρ, ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ Π³ΡΠ°Π½ΠΈΡΡ Π»ΠΈΠ½Π·Ρ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅.ΠΡΠΈ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ Π΄Π΅ΠΉΡΡΠ²ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π² ΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, Π΅ΡΠ»ΠΈ Π²Ρ Π²ΡΠ±ΡΠ°Π»ΠΈ ΠΊΡΡΠ³ΠΎΠ²ΡΡ ΠΈΠ»ΠΈ ΠΊΠ²Π°Π΄ΡΠ°ΡΠ½ΡΡ Π»ΠΈΠ½Π·Ρ Π½Π° ΡΠ°Π³Π΅ 1.
ΠΠ°ΡΠ΅ΠΌ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΉΡΠΈ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΡ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠΈ Zoom Window . ΠΡΠ° Π²ΠΊΠ»Π°Π΄ΠΊΠ° Π΄ΠΎΡΡΡΠΏΠ½Π°, ΡΠΎΠ»ΡΠΊΠΎ Π΅ΡΠ»ΠΈ Π²Ρ Π²ΡΠ±ΡΠ°Π»ΠΈ Zoom Window Lens Π½Π° ΡΠ°Π³Π΅ 1.
ΠΡΡΡΠ΄Π° Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ ΠΎΠΊΠ½Π° ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΎΡ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π³ΡΠ°Π½ΠΈΡΡ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅.
ΠΠ°ΠΊΠΎΠ½Π΅Ρ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ ΡΠ΅ΠΊΡΡ ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ Π²ΡΠ±ΡΠ°ΡΡ ΡΠ°Π·ΠΌΠ΅Ρ, ΡΠ²Π΅Ρ ΠΈ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ°.
ΠΠ΅ Π·Π°Π±ΡΠ΄ΡΡΠ΅ Π½Π°ΠΆΠ°ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ Π‘ΠΎΡ ΡΠ°Π½ΠΈΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ , ΡΡΠΎΠ±Ρ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ ΡΠ²ΠΎΠΈ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ. ΠΡ Π²ΡΠ΅Π³Π΄Π° ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊ ΡΠ²Π΅Π»ΠΈΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΡΡΠ΅ΠΊΠ»ΠΎ Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ Π² Π²Π°ΡΠ΅ΠΌ Π±Π»ΠΎΠ³Π΅ Ρ ΡΡΠΈΠΌΠΈ Π½Π°ΡΡΡΠΎΠΉΠΊΠ°ΠΌΠΈ.
ΠΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠ΅ Π²ΡΡΠ΅ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡ ΡΠ²Π΅Π»ΠΈΡΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²Π°ΡΠΈΡ ΠΏΡΠΎΠ΄ΡΠΊΡΠΎΠ² WooCommerce. Π§ΡΠΎΠ±Ρ Π²ΠΊΠ»ΡΡΠΈΡΡ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π² ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡΡ ΠΈ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ°Ρ WordPress, Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ.
ΠΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΡ Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π² ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡΡ ΠΈ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ°Ρ
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠ²Π΅Π»ΠΈΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π΅ Π²ΠΊΠ»ΡΡΠ΅Π½ΠΎ Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π² Π²Π°ΡΠΈΡ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡΡ ΠΈ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ°Ρ .ΠΠ°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ Π²ΡΡΡΠ½ΡΡ ΠΏΠΎΡΠ»Π΅ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΊ Π²Π°ΡΠ΅ΠΌΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΡ.
ΠΠΎΡΠ»Π΅ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ ΡΡΡΠ°Π½ΠΈΡΡ ΠΏΡΠΎΡΡΠΎ ΡΠ΅Π»ΠΊΠ½ΠΈΡΠ΅ Π΅Π³ΠΎ, ΡΡΠΎΠ±Ρ Π²ΡΠ±ΡΠ°ΡΡ, Π° Π·Π°ΡΠ΅ΠΌ ΡΠ΅Π»ΠΊΠ½ΠΈΡΠ΅ Π·Π½Π°ΡΠΎΠΊ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΡ Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ². ΠΡΠΎΡ Π·Π½Π°ΡΠΎΠΊ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΊ Π²Π°ΡΠ΅ΠΌΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
ΠΠΎΡΠ»Π΅ ΡΡΠΎΠ³ΠΎ ΠΏΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ ΠΊ ΠΏΡΠ±Π»ΠΈΠΊΠ°ΡΠΈΠΈ, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊ Π΄Π»Ρ Π²ΡΠ±ΡΠ°Π½Π½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²ΠΊΠ»ΡΡΠ΅Π½Π° ΡΡΠ½ΠΊΡΠΈΡ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΡ. ΠΠ°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΠ²ΡΠΎΡΡΡΡ ΡΡΠΎΡ ΡΠ°Π³ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ°Π·, ΠΊΠΎΠ³Π΄Π° Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΡΡΠ΅ΠΊΡ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ.
ΠΡ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π²ΡΡΠΎΠΊΠΎΠΊΠ°ΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΡΡΠΎΠ±Ρ ΡΡΠ½ΠΊΡΠΈΡ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π²ΡΠ³Π»ΡΠ΄Π΅Π»Π° Π²Π΅Π»ΠΈΠΊΠΎΠ»Π΅ΠΏΠ½ΠΎ.ΠΠ°ΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΎΠ±ΡΡΠ½ΠΎ ΠΈΠΌΠ΅ΡΡ Π±ΠΎΠ»ΡΡΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ°ΠΉΠ»Π° ΠΈ Π΄ΠΎΠ»ΡΡΠ΅ Π·Π°Π³ΡΡΠΆΠ°ΡΡΡΡ, ΡΡΠΎ ΠΏΠΎΠ²Π»ΠΈΡΠ΅Ρ Π½Π° ΡΠΊΠΎΡΠΎΡΡΡ ΠΈ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°. Π§ΡΠΎΠ±Ρ ΡΠ΅ΡΠΈΡΡ ΡΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ, Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄Π»Ρ ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ°, ΠΏΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ Π·Π°Π³ΡΡΠΆΠ°ΡΡ ΠΈΡ Π² WordPress.
ΠΡ Π½Π°Π΄Π΅Π΅ΠΌΡΡ, ΡΡΠΎ ΡΡΠ° ΡΡΠ°ΡΡΡ ΠΏΠΎΠΌΠΎΠ³Π»Π° Π²Π°ΠΌ ΡΠ·Π½Π°ΡΡ, ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°ΡΡΠ΅Π΅ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π² WordPress. ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π½Π°ΡΡ ΡΡΠ°ΡΡΡ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ ΠΈΡΠΏΡΠ°Π²ΠΈΡΡ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΡΠ΅ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ Π² WordPress.
ΠΡΠ»ΠΈ Π²Π°ΠΌ ΠΏΠΎΠ½ΡΠ°Π²ΠΈΠ»Π°ΡΡ ΡΡΠ° ΡΡΠ°ΡΡΡ, ΡΠΎ ΠΏΠΎΠ΄ΠΏΠΈΡΠΈΡΠ΅ΡΡ Π½Π° Π½Π°Ρ ΠΊΠ°Π½Π°Π» YouTube Π΄Π»Ρ Π²ΠΈΠ΄Π΅ΠΎΡΡΠΎΠΊΠΎΠ² ΠΏΠΎ WordPress.ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΠΉΡΠΈ Π½Π°Ρ Π² Twitter ΠΈ Facebook.