ΠΡΡΠ΅ΠΊΡΡ css ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π±Π»ΠΎΠΊ: CSS: Hover — ΡΡΡΠ΅ΠΊΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
24.06.2023
Π Π°Π·Π½ΠΎΠ΅
33 css hover ΡΡΡΠ΅ΠΊΡΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ, ΠΎ ΠΊΠΎΡΠΎΡΡΡ Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ Π·Π½Π°ΡΡ
0 β 4
ΠΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ hover ΡΡΡΠ΅ΠΊΡΠΎΠ² CSS ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΡΡΡΠ»ΠΊΡ ΠΈΠ»ΠΈ ΡΠ΅ΠΊΡΡ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΡΡ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ² CSS.
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ Ρ ΡΠΎΠ±ΡΠ°Π» ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² CSS3, ΠΏΡΠΎΡΠ²Π»ΡΡΡΠΈΡ ΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΈΡ Π½Π° ΡΠ²ΠΎΠ΅ΠΌ ΡΠ°ΠΉΡΠ΅ ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΈΡ Π²Π΅Π±-ΠΏΡΠΎΠ΅ΠΊΡΠ°Ρ . ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ, ΡΡΠΎ Ρ Π΄Π»Ρ Π²Π°Ρ ΠΏΡΠΈΠ³ΠΎΡΠΎΠ²ΠΈΠ».
- 10 Stylish Hover Effects
- Direction-aware Hover Effect
- Wacom Hover Effect
- CSS3 Hover Effects
- Hover Animation from UNIQLO
- Button Hover Effects
- 10 Stunning Hover Effects
- CSS3 Hover Effects 2
- Bounce on Hover
- 8-bit Hovers
- Simple Title Hover Effect
- Flip Down Effect
- Curiosity Award
- Image Hover Effect
- Hover Animation
- Hover Me Brother
- Nautilus SCSS HAML Hover Effects
- SVG Border Hover Effect 1
- Hover Search Map Icon
- Social Icon Pane
- Product Item Additions Info
- Animated Envelope
- Back to Top
- Fancy Hover
- Reminders Icon Hover Effect
- Circle Image Hover
- Safari Icon Hover Effect
- Simple Button Hover
- 3D Photo Effect Fold
- 3D Thumb Image Hover Effect
ΠΠ°ΠΊ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΠ· Π½Π°Π·Π²Π°Π½ΠΈΡ, ΡΡΠΎ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΡ ΠΈΠ· 10 Π½Π΅Π²Π΅ΡΠΎΡΡΠ½ΠΎ ΡΡΠΈΠ»ΡΠ½ΡΡ
ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ.
ΠΠΎΠ³Π΄Π° Π²Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡΠ΅ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π½Π° ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, CSS hover ΡΡΡΠ΅ΠΊΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π° ΠΊΡΡΡΠΎΡΠΎΠΌ ΠΈ ΡΠΎΠ·Π΄Π°Π΅Ρ ΡΠ΄ΠΈΠ²ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ 3D ΠΏΡΠ΅Π·Π΅Π½ΡΠ°ΡΠΈΠΈ.
ΠΡΠΎ ΡΠΆΠ΅ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΈΠ·Π±ΠΈΡΡΠΉ ΡΡΡΠ΅ΠΊΡ, Π½ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π»ΡΠ΄ΠΈ Π²ΡΠ΅ ΡΠ°Π²Π½ΠΎ Ρ ΡΠ΄ΠΎΠ²ΠΎΠ»ΡΡΡΠ²ΠΈΠ΅ΠΌ Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ. ΠΡΠ΅Π·Π΅Π½ΡΠ°ΡΠΈΡ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΡΠΎΡΡΠΎΠΉ, Π½ΠΎ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΠΎΠΉ.
ΠΡΠ»ΠΈ Π²Ρ ΠΈΡΠ΅ΡΠ΅ ΠΊΡΡΠ³ΠΎΠ²ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, Π·Π΄Π΅ΡΡ Π²Ρ Π½Π°ΠΉΠ΄Π΅ΡΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΡ . Π ΠΎΠ±ΡΠ΅ΠΉ ΡΠ»ΠΎΠΆΠ½ΠΎΡΡΠΈ Π΄ΠΎΡΡΡΠΏΠ½ΠΎ 12 ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ CSS hover ΡΡΡΠ΅ΠΊΡΠΎΠ² ΡΠ°ΠΌΠΊΠΈ.
ΠΡΠΎ Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ. ΠΠ½ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ Π΄Π»Ρ ΠΌΠΈΠ½ΠΈΠ°ΡΡΡ ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΈΡ ΡΠΈΠΏΠΎΠ² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.
Π Π²ΠΎΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²ΠΏΠ΅ΡΠ°ΡΠ»ΡΡΡΠΈΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π΄Π»Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ. ΠΡΠ΅ ΠΎΠ½ΠΈ ΠΏΡΠ΅ΠΊΡΠ°ΡΠ½ΠΎ ΠΏΠΎΠ΄ΠΎΠΉΠ΄ΡΡ Π΄Π»Ρ ΡΠ°ΠΉΡΠΎΠ² Π»ΡΠ±ΠΎΠ³ΠΎ ΡΠΈΠΏΠ°.
ΠΡΠ΅ ΠΎΠ΄ΠΈΠ½ Π½Π°Π±ΠΎΡ ΠΈΠ· 10 hover ΡΡΡΠ΅ΠΊΡΠΎΠ² CSS Π΄Π»Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ. ΠΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΠΈΠ· Π½ΠΈΡ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ Π²ΠΏΠ΅ΡΠ°ΡΠ»ΡΡΡΠΈΠ΅.
ΠΡΠΎ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΡ, ΡΠΎΡΡΠΎΡΡΠ°Ρ ΠΈΠ· ΡΠ΅ΡΡΡΠ΅Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. ΠΠΌΠ΅ΡΡΠ΅ Ρ ΡΡΡΠ΅ΠΊΡΠΎΠΌ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π΅Π³ΠΎ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΈ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅.
ΠΡΠΎ Π·Π°Π±Π°Π²Π½ΡΠΉ ΠΈ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. ΠΡΡΠ³Π»Π°Ρ ΡΠ°ΠΌΠΊΠ° ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΊ Π°Π²Π°ΡΠ°ΡΠΊΠ°ΠΌ ΡΡΠ°ΡΡΠ½ΠΈΠΊΠΎΠ² ΠΊΠΎΠΌΠ°Π½Π΄Ρ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΠΉ.
ΠΡΠΎΡ ΡΡΠΈΠ»ΡΠ½ΡΠΉ Π²ΠΈΠ½ΡΠ°ΠΆΠ½ΡΠΉ hover ΡΡΡΠ΅ΠΊΡ CSS Π²ΡΠ·ΠΎΠ²Π΅Ρ Π² Π²Π°Ρ ΡΡΠ²ΡΡΠ²ΠΎ Π½ΠΎΡΡΠ°Π»ΡΠ³ΠΈΠΈ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ, ΡΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ΅ΡΡΠΎ ΡΡΠΈΠ»Ρ Π΄Π»Ρ ΡΠ°ΠΉΡΠ°.
ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΡΠΎΡ ΡΡΡΠ΅ΠΊΡ Π²ΡΠ²ΠΎΠ΄ΠΈΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ Π½Π° ΡΠΎΠ½Π΅ Ρ Π½ΠΈΠ·ΠΊΠΎΠΉ Π½Π΅ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡΡ.
ΠΡΠΎ Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΏΡΠΎΡΡΠΎΠΉ, Π½ΠΎ ΠΎΡΠ΅Π½Ρ ΠΊΡΠ°ΡΠΈΠ²ΡΠΉ CSS hover ΡΡΡΠ΅ΠΊΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΎΠ½ Π²ΡΠ²ΠΎΠ΄ΠΈΡ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΈ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΌΠ°ΡΡ-ΡΡΡΠ΅ΠΊΡΠ° ΠΏΠ΅ΡΠ΅Π»ΠΈΡΡΡΠ²Π°Π½ΠΈΡ.
ΠΠΎΠΊΠ° Π²Ρ Π½Π΅ Π½Π°Π²Π΅Π΄Π΅ΡΠ΅ ΠΊΡΡΡΠΎΡ ΠΌΡΡΠΈ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π²Ρ Π½Π΅ ΠΏΠΎΠΉΠΌΠ΅ΡΠ΅ ΠΊΡΠ°ΡΠΎΡΡ ΡΡΠΎΠ³ΠΎ ΡΡΡΠ΅ΠΊΡΠ°. Π‘Π»ΡΡΠ°ΠΉΠ½ΡΠ΅ Π»ΠΈΠ½ΠΈΠΈ ΠΊΡΠ°ΡΠΈΠ²ΠΎ ΠΏΡΠ΅Π²ΡΠ°ΡΠ°ΡΡΡΡ Π² Π»ΠΎΠ³ΠΎΡΠΈΠΏ, Π° Π·Π°ΡΠ΅ΠΌ ΠΎΠ½ ΡΠ°ΡΠΊΡΠ°ΡΠΈΠ²Π°Π΅ΡΡΡ ΡΠ²Π΅ΡΠ°ΠΌΠΈ.
ΠΡΠΎ Π½Π΅Π²Π΅ΡΠΎΡΡΠ½ΡΠΉ CSS hover ΡΡΡΠ΅ΠΊΡ ΡΠ°ΠΌΠΊΠΈ Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. Π‘ΠΏΠΎΡΠΎΠ±, Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΎΠ΄Π½ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΡΠ²Π»ΡΠ΅ΡΡΡ Π½Π° ΡΠΎΠ½Π΅ Π΄ΡΡΠ³ΠΎΠ³ΠΎ, Π½Π΅Π²Π΅ΡΠΎΡΡΠ΅Π½!
ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠ΅ Π½Π΅ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΠΈ Ρ ΡΠΎΠΊΡΡΠΈΡΠΎΠ²ΠΊΠΎΠΉ Π½Π° ΡΡΡΠ»ΠΊΠ΅.
ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΡΡΠΎ ΠΈ Π½Π΅ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ hover ΡΡΡΠ΅ΠΊΡ CSS, Π½ΠΎ Π·Π°Π±Π°Π²Π½ΡΠΉ. ΠΡΠΎΡΡΠΎ Π½Π°Π²Π΅Π΄ΠΈΡΠ΅ ΠΊΡΡΡΠΎΡ ΠΌΡΡΠΈ Π½Π° ΡΠΎΠ»Π½ΡΠ΅Π·Π°ΡΠΈΡΠ½ΡΠ΅ ΠΎΡΠΊΠΈ, ΠΈ Π½Π°ΡΠ½Π΅ΡΡΡ ΠΌΠ°Π³ΠΈΡ.
ΠΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄
ΠΡΠΎ ΠΊΡΠ΅Π°ΡΠΈΠ²Π½ΡΠΉ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, Π΄ΠΎΡΡΡΠΏΠ½ΡΠΉ Π² Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ Π²Π°ΡΠΈΠ°ΡΠΈΡΡ . Π Π½ΠΈΡ ΠΏΡΠ΅Π΄Π»Π°Π³Π°ΡΡΡΡ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ Π΄Π»Ρ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.
ΠΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄
ΠΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ Π΄Π»Ρ ΡΠ΅ΠΊΡΡΠ°, ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. ΠΠΎΡΡΠ΅ΠΏΠ΅Π½Π½ΠΎΠ΅ Π²ΠΎΡΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΠ°ΠΌΠΊΠΈ — ΡΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ.
ΠΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄
ΠΠ°ΠΌ Π½ΡΠΆΠ΅Π½ CSS hover ΡΡΡΠ΅ΠΊΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π΄Π»Ρ ΠΏΠ°Π½Π΅Π»ΠΈ ΠΏΠΎΠΈΡΠΊΠ° ΠΈΠ»ΠΈ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΊΠ°ΡΡΡ? ΠΡΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΎΠ½. ΠΠ³ΠΎ Π±Π΅ΡΡΠΎΠ²Π½ΡΠ΅ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΡ — ΡΠΏΠ»ΠΎΡΠ½ΠΎΠ΅ ΡΠ΄ΠΎΠ²ΠΎΠ»ΡΡΡΠ²ΠΈΠ΅ Π΄Π»Ρ Π³Π»Π°Π·.
ΠΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄
ΠΡΠΎΡ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ, ΡΡΠΎΠ±Ρ Π² Π½Π°ΡΠ°Π»Π΅ ΡΠΊΡΡΡΡ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΡΠΎΡΠΈΠ°Π»ΡΠ½ΡΡ ΠΌΠ΅Π΄ΠΈΠ°, Π° Π·Π°ΡΠ΅ΠΌ Π²ΡΠ²Π΅ΡΡΠΈ ΠΈΡ , ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡ Π½Π° Π½ΠΈΡ ΠΊΡΡΡΠΎΡ ΠΌΡΡΠΈ.
ΠΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄
ΠΡΠΎ ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»Π΅Π½ΠΈΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΠΎ ΡΠΎΠ²Π°ΡΠ°Ρ Π² ΠΈΠ½ΡΠ΅ΡΠ½Π΅Ρ-ΠΌΠ°Π³Π°Π·ΠΈΠ½Π΅. ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΠ΄ΡΠΊΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΡΠ°ΡΠΈΠ²ΠΎΠ³ΠΎ ΡΡΡΠ΅ΠΊΡΠ° ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ Π½Π΅ΠΌ.
ΠΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄
ΠΠ΄Π΅Π°Π»ΡΠ½ΡΠΉ CSS hover ΡΡΡΠ΅ΠΊΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π΄Π»Ρ ΡΠ°Π·Π΄Π΅Π»Π° «Π‘Π²ΡΠ·Π°ΡΡΡΡ Ρ Π½Π°ΠΌΠΈ». ΠΠ½ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΠΊΠΎΠ½ΡΠ°ΠΊΡΠ½ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ Π² ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅ΠΌΡΡ ΠΊΠΎΠ½Π²Π΅ΡΡΠ΅, Π½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°Π²Π΅Π΄Π΅Ρ ΠΊΡΡΡΠΎΡ ΠΌΡΡΠΈ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅.
ΠΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄
ΠΡΠΎΡ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π΄Π»Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ «ΠΠ²Π΅ΡΡ » ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΡΡ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»ΡΠΌ ΠΊΡΠ°ΡΠΈΠ²ΡΠΉ, Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ.
ΠΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄
ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΎΠ½ΠΎ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π΅ΡΡΡ, Π½ΠΎ ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΡΠΏΠΎΡΠΎΠ± Π΅Π³ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
ΠΡΠΎΡ hover ΡΡΡΠ΅ΠΊΡ CSS Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΊΡΠ°ΡΠΈΠ²ΡΠ΅ ΡΡΠΈΠ»ΠΈ.
ΠΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π΄Π»Ρ ΠΊΡΡΠ³ΠΎΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. Π ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΠΈ ΠΏΡΠΈΡΡΡΡΡΠ²ΡΠ΅Ρ ΡΠ΅ΡΡΡΠ΅ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΡΠΈΠ»Ρ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ.
ΠΡΠΎΡ CSS hover ΡΡΡΠ΅ΠΊΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π²ΠΎΡΡΠΎΠ·Π΄Π°Π΅Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΈΠΊΠΎΠ½ΠΎΠΊ Safari. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°ΠΌΠ΅Π½ΠΈΡΡ Π·Π½Π°ΡΠΎΠΊ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΈΠ»ΠΈ Π»ΠΎΠ³ΠΎΡΠΈΠΏΠΎΠΌ.
ΠΡΠΎ ΠΏΡΠΎΡΡΠΎΠΉ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ ΠΈ ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ, ΠΈ ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌ. ΠΠ΅Π³ΠΊΠ°Ρ ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠΊΠ° ΡΠ²Π΅Π»ΠΈΡΠΈΡ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΠΎΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.
ΠΡΠ»ΠΈ Π²Ρ Π·Π°ΠΏΡΡΠΊΠ°Π΅ΡΠ΅ ΡΠ°ΠΉΡ ΠΎΠ±ΠΌΠ΅Π½Π° ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΡΠΌΠΈ ΠΈΠ»ΠΈ ΠΊΠ°ΡΠ°Π»ΠΎΠ³ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΡΡΠΎΡ ΡΡΡΠ΅ΠΊΡ ΠΎΠΊΠ°ΠΆΠ΅ΡΡΡ Π΄Π»Ρ Π²Π°Ρ Π½Π΅Π·Π°ΠΌΠ΅Π½ΠΈΠΌΡΠΌ. ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΎΠ½ΠΎ ΡΠ³ΠΈΠ±Π°Π΅ΡΡΡ Π·Π°Π±Π°Π²Π½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π²ΡΠ²ΠΎΠ΄ΡΡΡΡ ΠΏΠ°Π½Π΅Π»Ρ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΉ Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ.
ΠΡΠΎ ΠΏΠΎΠΈΡΡΠΈΠ½Π΅ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ CSS hover ΡΡΡΠ΅ΠΊΡ ΡΠ°ΠΌΠΊΠΈ. ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ ΠΎΠ½ «ΠΊΠ»Π°Π΄Π΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° Π·Π΅ΠΌΠ»Ρ».
ΠΡΠΎΡ ΡΡΡΠ΅ΠΊΡ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅Ρ ΡΠΎΠ½ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ. ΠΠ΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π², ΠΌΠΎΠΆΠ½ΠΎ Π»Π΅Π³ΠΊΠΎ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ Π½Π° ΡΠ²ΠΎΠ΅ΠΌ ΡΠ°ΠΉΡΠ΅.
ΠΡΠΎ Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ CSS hover ΡΡΡΠ΅ΠΊΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ, Π²ΡΠ΄Π΅Π»ΡΡΡΠΈΠΉ ΠΏΡΡΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ. ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΎΠ½ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ Π·Π°ΡΠ΅ΠΌΠ½Π΅Π½ΠΈΠ΅ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. Π ΡΡΠΎ Π·Π°ΡΠ΅ΠΌΠ½Π΅Π½ΠΈΠ΅ ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π° ΠΊΡΡΡΠΎΡΠΎΠΌ.
ΠΡΠΈ ΠΊΡΠ°ΡΠΈΠ²ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π²ΡΠ³Π»ΡΠ΄ΡΡ ΠΎΡΠ΅Π½Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ. ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ ΠΈ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΠΎΡΡΡ SVG-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π΄Π΅Π»Π°ΡΡ ΠΈΡ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΡΠΌΠΈ Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΡΠΈΠΏΠ° ΡΠ°ΠΉΡΠΎΠ².
Π§ΡΠΎ Π²Ρ Π΄ΡΠΌΠ°Π΅ΡΠ΅ ΠΎΠ± ΠΎΠΏΠΈΡΠ°Π½Π½ΡΡ ΠΌΠ½ΠΎΡ hover ΡΡΡΠ΅ΠΊΡΠ°Ρ CSS? ΠΠ°ΠΊΠΈΠ΅ ΠΈΠ· Π½ΠΈΡ ΠΏΠΎΠ½ΡΠ°Π²ΠΈΠ»ΠΈΡΡ Π²Π°ΠΌ Π±ΠΎΠ»ΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ? ΠΠ°ΠΏΠΈΡΠΈΡΠ΅ ΠΎΠ± ΡΡΠΎΠΌ Π² ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΡΡ .
ΠΠ°Π΄ΠΈΠΌ ΠΠ²ΠΎΡΠ½ΠΈΠΊΠΎΠ²Π°Π²ΡΠΎΡ-ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄ΡΠΈΠΊ ΡΡΠ°ΡΡΠΈ Β«30+ CSS3 Hover Effects You should be Familiar WithΒ»
ΠΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°, ΠΎΠΏΡΠ±Π»ΠΈΠΊΡΠΉΡΠ΅ ΡΠ²ΠΎΠΈ ΠΌΠ½Π΅Π½ΠΈΡ ΠΏΠΎ ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΡΠ΅ΠΌΠ΅ ΡΡΠ°ΡΡΠΈ. ΠΠ° ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ, ΠΏΠΎΠ΄ΠΏΠΈΡΠΊΠΈ, Π΄ΠΈΠ·Π»Π°ΠΉΠΊΠΈ, ΠΎΡΠΊΠ»ΠΈΠΊΠΈ, Π»Π°ΠΉΠΊΠΈ Π½ΠΈΠ·ΠΊΠΈΠΉ Π²Π°ΠΌ ΠΏΠΎΠΊΠ»ΠΎΠ½!
ΠΠ°ΠΊ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π±Π»ΠΎΠΊ ΠΈΠ»ΠΈ ΡΡΠ΅ΠΉΠΊΡ ΡΠ΅ΡΠΊΠΈ
- Π‘ΠΊΠ°ΡΠ°ΡΡ
- 300+ Π€ΡΠ½ΠΊΡΠΈΠΉ
- ΠΠΎΠ½ΡΡΡΡΠΊΡΠΎΡΡ ΡΠ°ΠΉΡΠΎΠ²
- ΠΡΠ΅ΠΌΠΈΡΠΌ
- Π€ΠΎΡΡΠΌΡ
- ΠΠ»ΠΎΠ³
- Help
- RU
- ΠΠΎΠΉΡΠΈ
- ΠΠ°ΡΠ΅Π³ΠΈΡΡΡΠΈΡΠΎΠ²Π°ΡΡΡΡ
- ΠΠ»Π°Π²Π½Π°Ρ
- Π€ΡΠ½ΠΊΡΠΈΠΈ
- ΠΡΡΠ΅ΠΊΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ
- ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ ΠΡΠΈ ΠΠ°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΠ° ΠΠΎΠ»Π΅
Π’Π°ΠΊΠΆΠ΅ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π±Π»ΠΎΠΊ ΠΈΠ»ΠΈ ΡΡΠ΅ΠΉΠΊΡ ΡΠ΅ΡΠΊΠΈ. Π’Π°ΠΊΠΈΠ΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ Π²ΡΠ³Π»ΡΠ΄ΡΡ ΡΠ»Π΅Π³Π°Π½ΡΠ½ΠΎ ΠΈ Π΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎ. ΠΡΠ±Π΅ΡΠΈΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² Π±Π»ΠΎΠΊΠ΅, ΡΠ΅Π»ΠΊΠ½ΠΈΡΠ΅ ΡΡΡΠ»ΠΊΡ ΡΠ°Π·Π΄Π΅Π»Π° Hover Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ² ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ ΡΠ»Π°ΠΆΠΎΠΊ Hover. ΠΡΠ±Π΅ΡΠΈΡΠ΅ ΠΏΡΠ΅ΡΠ΅Ρ, Π° Π·Π°ΡΠ΅ΠΌ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π΄Π»Ρ Π΄ΠΎΡΡΠΈΠΆΠ΅Π½ΠΈΡ Π·Π°Π΄ΡΠΌΠ°Π½Π½ΠΎΠ³ΠΎ ΡΡΡΠ΅ΠΊΡΠ°.
Π‘ΠΊΠ°ΡΠ°ΡΡ Π΄Π»Ρ Windows Π‘ΠΊΠ°ΡΠ°ΡΡ Π΄Π»Ρ Mac
ΠΡΠΎΡΠΌΠΎΡΡ ΠΏΠΎ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΡΠΌ ΡΡΠ½ΠΊΡΠΈΠΉ
ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌΡΠ΅ ΡΠΈΡΡΠ΅ΠΌΡ
ΠΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ ΡΡΡΠ°Π½ΠΈΡ
ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π°
ΠΠ΅Π΄ΠΈΠ° Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ
Π‘Π²ΠΎΠΉΡΡΠ²Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
ΠΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ
ΠΡΡΠ΅ΠΊΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ
ΠΠ°ΡΡΡΠΎΠΉΠΊΠΈ ΡΠ΅ΠΌΡ
Π€ΠΎΡΠΌΠ° ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠΉ ΡΠ²ΡΠ·ΠΈ
ΠΠ΅ΡΡ Π½ΠΈΠΉ ΠΈ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ»Ρ
ΠΠ»ΠΎΠ³
ΠΠ»Π΅ΠΊΡΡΠΎΠ½Π½Π°Ρ ΡΠΎΡΠ³ΠΎΠ²Π»Ρ
SEO
ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΊΠΎΠ΄
ΠΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΠΈ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ
Π‘Π²ΠΎΠΉΡΡΠ²Π° ΡΠ°ΠΉΡΠ° ΠΈ ΡΡΡΠ°Π½ΠΈΡΡ
ΠΠΈΠ΄ΠΆΠ΅ΡΡ WordPress
Your browser does not support HTML5 video.
ΠΠ°ΡΡΡΠ°Π± ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΏΠΎΠ»Π΅
ΠΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈΠ»ΠΈ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΌΠΎΠΆΠ΅Ρ ΡΡΠ°ΡΡ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΌ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΠΌ ΡΡΡΠ΅ΠΊΡΠΎΠΌ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ΄ΠΈΠ²ΠΈΡ Π²Π°ΡΠΈΡ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Π΅ΠΉ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠ±ΡΠ°ΡΡ Β«ΠΡΠ΅Π΄ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΠΌΠ°ΡΡΡΠ°Π±Π°Β», Π° Π·Π°ΡΠ΅ΠΌ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° Β«ΠΠ°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π½Π° Π³ΡΡΠΏΠΏΡΒ» Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ², ΡΠ΅Π»ΠΊΠ½ΡΠ² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΡΡ ΡΡΡΠ»ΠΊΡ. Π§ΡΠΎΠ±Ρ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ, Π½Π°ΠΆΠΌΠΈΡΠ΅ Π³Π΄Π΅-Π½ΠΈΠ±ΡΠ΄Ρ Π½Π° Π±Π»ΠΎΠΊΠ΅, Π·Π°ΡΠ΅ΠΌ Π½Π°Π²Π΅Π΄ΠΈΡΠ΅ ΠΊΡΡΡΠΎΡ.
Π‘Π΄Π²ΠΈΠ³ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΏΠΎΠ»Π΅
Π‘Π΄Π²ΠΈΠ³ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΡΠ²Π»ΡΠ΅ΡΡΡ Π΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΠΌ ΡΡΡΠ΅ΠΊΡΠΎΠΌ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π²Ρ ΡΠΎΠ·Π΄Π°Π΅ΡΠ΅ ΡΠ΅Π°ΠΊΡΠΈΡ Π½Π° Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΌΡΡΠΈ Π½Π° Π³ΡΡΠΏΠΏΡ, ΠΈΠΌΠΈΡΠΈΡΡΡΡΡΡ Π»ΡΠ±ΡΠ΅ ΠΎΠ±ΡΠ΅ΠΈΠ·Π²Π΅ΡΡΠ½ΡΠ΅ Π΄Π²ΠΈΠΆΡΡΠΈΠ΅ΡΡ ΠΎΠ±ΡΠ΅ΠΊΡΡ. ΠΠ° ΠΏΠ°Π½Π΅Π»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ² ΡΠΏΡΠ°Π²Π°, Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ Β«ΠΠ°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π½Π° Π³ΡΡΠΏΠΏΡΒ», Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠ±ΡΠ°ΡΡ ΠΏΡΠ΅Π΄ΡΡΡΠ°Π½ΠΎΠ²ΠΊΡ ΡΠ΄Π²ΠΈΠ³Π°. ΠΡΠΎΠ²Π΅ΡΡΡΠ΅ ΡΡΠΎ, ΠΎΡΠΌΠ΅Π½ΠΈΠ² Π²ΡΠ±ΠΎΡ ΠΈ Π½Π°Π²Π΅Π΄Ρ ΠΊΡΡΡΠΎΡ Π½Π° Π³ΡΡΠΏΠΏΡ.
Your browser does not support HTML5 video.
Your browser does not support HTML5 video.
ΠΠ»Π΅ΠΌΠ΅Π½Ρ Shift-Up ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΏΠΎΠ»Π΅
ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°ΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π΄Π»Ρ ΡΠ³ΡΡΠΏΠΏΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠ΅Π±ΠΎΠ»ΡΡΠΈΠ΅ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΡ Π²Π²Π΅ΡΡ
β ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠΏΡΠ»ΡΡΠ½Π°Ρ ΡΠ΅Π°ΠΊΡΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π² ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΌ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠ±ΡΠ°ΡΡ ΠΏΡΠ΅ΡΠ΅Ρ Shift Up Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ² ΡΠΏΡΠ°Π²Π°, Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ Hover On Group. Π‘Π½ΠΈΠΌΠΈΡΠ΅ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΈ Π½Π°Π²Π΅Π΄ΠΈΡΠ΅ ΠΊΡΡΡΠΎΡ Π½Π° Π³ΡΡΠΏΠΏΡ, ΡΡΠΎΠ±Ρ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
Π¦Π²Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΏΠΎΠ»Π΅
ΠΠ»Ρ ΡΠ³ΡΡΠΏΠΏΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΡΠ΅ΠΉΠΊΠΈ ΡΠ΅ΡΠΊΠΈ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° Π³ΡΡΠΏΠΏΡ ΠΈΠ»ΠΈ ΡΡΠ΅ΠΉΠΊΡ ΡΠ΅ΡΠΊΠΈ. ΠΡΠ±Π΅ΡΠΈΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² Π³ΡΡΠΏΠΏΠ΅. ΠΡΠ±Π΅ΡΠΈΡΠ΅ Π³ΡΡΠΏΠΏΡ Β«ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈΒ» ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠ²Π΅ΡΠ° Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ². Π‘Π½ΠΈΠΌΠΈΡΠ΅ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΠ΅ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π·Π°ΡΠ΅ΠΌ Π½Π°Π²Π΅Π΄ΠΈΡΠ΅ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π½Π° Π³ΡΡΠΏΠΏΡ Π΄Π»Ρ ΠΏΡΠΎΠ²Π΅ΡΠΊΠΈ.
Your browser does not support HTML5 video.
Your browser does not support HTML5 video.
Π’Π΅Π½Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΏΠΎΠ»Π΅
ΠΠ»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² Π³ΡΡΠΏΠΏΠ΅ ΠΈΠ»ΠΈ ΡΡΠ΅ΠΉΠΊΠ΅ ΡΠ΅ΡΠΊΠΈ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΠ΅Π½ΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π³ΡΡΠΏΠΏΡ. ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠ΅Π½ΠΈ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΎΠ·Π΄Π°Π΅Ρ ΠΏΡΠ΅Π²Π΄ΠΎ-3D-ΡΡΡΠ΅ΠΊΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠΏΡΠ»ΡΡΠ΅Π½ Π² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅. Π ΡΠ°Π·Π΄Π΅Π»Π΅ Β«ΠΠ°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π½Π° Π³ΡΡΠΏΠΏΡΒ» Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ² Π²ΡΠ±Π΅ΡΠΈΡΠ΅ ΠΏΡΠ΅Π΄ΡΡΡΠ°Π½ΠΎΠ²ΠΊΡ ΡΠ΅Π½ΠΈ ΠΈ ΠΏΡΠΈ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ ΠΎΡΡΠ΅Π΄Π°ΠΊΡΠΈΡΡΠΉΡΠ΅ ΡΠ΅Π½Ρ, Π΅ΡΠ»ΠΈ ΡΡΠΎ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ.
How To Use The Animation On Group Hover for An Element
Hover animation happens when the cursor hovers over the group of items and an item reacts with movement or other transition effects. Make sure, the animation hover effect can make the website more interesting for the visitor. If you don’t know how to create hover animation on the item, with us you can make it easier. Our service is very simple and helps style elements on hover to your liking. Styling of items on hover, focus, and so on can be done with simple tools.
You are able to use utilities and style elements with us very fast and with high quality. Important to note, that the animation of the hover effect helps to indicate that the cards and tiles on the page can be interacted with. Animation can give a nice UI experience when the user is hovering over the elements. With our service, you can easily change every transition property not only for the parent element but also for the child element. Like the tailwind CSS, our service is very simple and allows you to create a hover effect in a few seconds. So, getting started with us will give you an opportunity to work with animation, and at times the user hovers over an element or a group of elements, you will get the nice effects. It is a very useful feature, as when the users hover over the parent item, it affects the child elements.
Like CSS, we enable you to create the card effects. These hover effect animations help us, to make the site more dynamic, and activate items when a user hovers over them. If you want to work only with the child item, not with the parent element, add an animation only on the child. Today it is in trend to use these features on the pages and create sites responsive with dark mode. With our service, you can control the transition timing function and many other settings of the animation.
ΠΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π² ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π² CSS
CSS β ΡΡΠΎ ΡΠ·ΡΠΊ ΡΠ°Π±Π»ΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠΏΠΈΡΡΠ²Π°Π΅Ρ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ HTML-Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ΠΈ ΠΎΠ±ΡΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π² Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅. CSS ΠΎΠΏΠΈΡΡΠ²Π°Π΅Ρ, ΠΊΠ°ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π±ΡΠ΄ΡΡ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ Π½Π° ΡΠΊΡΠ°Π½Π΅, Π½Π° Π±ΡΠΌΠ°Π³Π΅ ΠΈΠ»ΠΈ Π½Π° Π΄ΡΡΠ³ΠΈΡ Π½ΠΎΡΠΈΡΠ΅Π»ΡΡ . ΠΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ Π²Π°ΡΠ΅ΠΉ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ, Π²ΠΊΠ»ΡΡΠ°Ρ Π΄ΠΈΠ·Π°ΠΉΠ½, ΠΌΠ°ΠΊΠ΅Ρ ΠΈ Π²Π°ΡΠΈΠ°Π½ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΠ°Π·Π½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ² ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠΊΡΠ°Π½Π°. ΠΠ΄Π΅ΡΡ Π²Ρ ΡΠ·Π½Π°Π΅ΡΠ΅ ΠΎΠ± ΡΡΡΠ΅ΠΊΡΠ΅ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ CSS, ΠΊΠΎΡΠΎΡΡΠΉ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ ΡΡΡΠ΅ΠΊΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ CSS?
ΠΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ CSS Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡ ΠΊΡΡΡΠΎΡ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΡΠ²Π΅ΡΠ°Π΅Ρ ΡΡΡΠ΅ΠΊΡΠ°ΠΌΠΈ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄Π°. ΠΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΊΠ»ΡΡΠ΅Π²ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅, ΠΈ ΡΡΠΎ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠ»ΡΡΡΠΈΡΡ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΌ.
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ: :hover {
Β Css-Π΄Π΅ΠΊΠ»Π°ΡΠ°ΡΠΈΠΈ;
}
ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ°Π·Π±Π΅ΡΠ΅ΠΌΡΡ Π½Π° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΠΏΡΠΈΠΌΠ΅ΡΠ°Ρ
CSS ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, ΠΏΡΠΈΠΌΠ΅Ρ 1Β
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π²Ρ ΡΠΎΠ·Π΄Π°Π΄ΠΈΡΠ΅ ΡΡΡΠ»ΠΊΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π±ΡΠ΄Π΅Ρ ΠΌΠ΅Π½ΡΡΡ ΡΠ²Π΅Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°.
- ΠΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ :hover ΡΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ. ΠΡΠΎ Π½Π΅ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ Π°ΠΊΡΠΈΠ²ΠΈΡΡΠ΅Ρ ΡΡΡΠ»ΠΊΡ.
- ΠΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ :active ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅Ρ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π²ΠΎ Π²ΡΠ΅ΠΌΡ Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ.
ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅: CSS-ΡΡΡΠ»ΠΊΠΈ: ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΏΠΎ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΡΡΡΠ»ΠΎΠΊ Π² ΡΠ°Π·Π½ΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡΡ
CSS ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, ΠΏΡΠΈΠΌΠ΅Ρ 2Β
ΠΠΎΡ ΠΈΠ»Π»ΡΡΡΡΠ°ΡΠΈΡ, ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡΠ°Ρ Π΅ΡΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½Π° ΡΠ²ΠΎΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅.
ΠΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ CSS?
ΠΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² CSS, ΡΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΡΠ²Π΅ΡΠ°Π΅Ρ Π·Π°ΠΏΡΡΠΊΠΎΠΌ ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄Π°. ΠΡΠΎ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΡΠΉ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ ΠΊ ΡΠ»ΡΡΡΠ΅Π½ΠΈΡ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΌ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΡ Π²Π°ΠΆΠ½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅.
ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ «Π·Π°Π²ΠΈΡΠ°Π½ΠΈΡ»
ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΡ Π² CSS;
}
ΠΠ°ΠΊΠΎΠΉ Π»ΡΡΡΠΈΠΉ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ CSS?
ΠΠ΅ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΉ Π² ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡ ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠΈΠ³ΡΠ°ΡΡ ΠΎΡ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ CSS-ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΡΡΡΠ»ΠΊΠΈ. ΠΠΎΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π»ΡΡΡΠΈΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² CSS, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² ΡΠ²ΠΎΠ΅ΠΌ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΡΠΎΠ΅ΠΊΡΠ΅, Π΅ΡΠ»ΠΈ Π²Ρ ΠΊΠΎΠ³Π΄Π°-Π»ΠΈΠ±ΠΎ ΠΏΡΡΠ°Π»ΠΈΡΡ ΡΠΎΠ·Π΄Π°ΡΡ ΡΡΠΈΠ»ΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ.
1. ΠΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π΄Π»Ρ ΡΠΊΠΎΠ»ΡΠ·ΡΡΠΈΡ ΡΡΡΠ»ΠΎΠΊ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΡ
ΠΡΠΎΡ ΡΡΡΠ΅ΠΊΡ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ²Π΅Ρ ΡΠ΅ΠΊΡΡΠ° ΡΡΡΠ»ΠΊΠΈ ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ ΡΠ΅Π½Ρ ΠΊ Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠΉ ΡΡΡΠ»ΠΊΠ΅. Π§ΡΠΎΠ±Ρ ΠΎΡΡΡΡΠΏΡ Π½Π΅ ΠΏΡΠ΅ΡΡΠ²Π°Π»ΠΈ ΠΏΠΎΡΠΎΠΊ ΡΠ΅ΠΊΡΡΠ°, ΠΌΡ ΡΠ½Π°ΡΠ°Π»Π° ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌ ΠΎΡΡΡΡΠΏΡ Π²ΠΎΠΊΡΡΠ³ ΡΡΡΠ»ΠΊΠΈ, ΠΏΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»Π΅ Ρ ΡΠ΅ΠΌ ΠΆΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ. ΠΠΌΠ΅ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° background, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ΠΎ ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠ°Π΅Ρ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ, ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ box-shadow.
2. ΠΡΡΠ΅ΠΊΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΡΡΡΠ»ΠΊΡ ΠΎΠ±ΠΌΠ΅Π½Π° ΡΠ΅ΠΊΡΡΠΎΠΌ
ΠΠΎΡ ΠΊΠ»Π°ΡΡΠ½ΡΠΉ Π²Π°ΡΠΈΠ°Π½Ρ, ΠΊΠΎΠ³Π΄Π° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ Π½Π° ΡΡΡΠ»ΠΊΡ ΡΠ΅ΠΊΡΡ ΡΡΡΠ»ΠΊΠΈ Π·Π°ΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π΄ΡΡΠ³ΠΈΠΌ ΡΠ΅ΠΊΡΡΠΎΠΌ. Π‘Π²ΡΠ·Π°Π½Π½ΡΠΉ ΡΠ΅ΠΊΡΡ Π²ΡΡΠΊΠ°Π»ΡΠ·ΡΠ²Π°Π΅Ρ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ Π½ΠΎΠ²ΡΠΉ ΡΠ΅ΠΊΡΡ, ΠΊΠΎΠ³Π΄Π° Π²Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡΠ΅ ΠΊΡΡΡΠΎΡ Π½Π° ΡΠ΅ΠΊΡΡ. ΠΡΠΎΡ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π½Π° ΡΡΡΠ»ΠΊΡ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π² ΡΠ΅Π±Ρ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΠ±ΠΌΠ°Π½Π°. ΠΠ΄Π½Π°ΠΊΠΎ ΡΠ΅ΠΊΡΠ΅ΡΠ½ΡΠΉ ΠΈΠ½Π³ΡΠ΅Π΄ΠΈΠ΅Π½Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠ΅ΠΊΡΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π²ΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ, ΠΈ Π²ΡΠ·ΡΠ²Π°Π΅Ρ Π΅Π³ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΡΡΠ»ΠΊΠΈ::after, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π°ΡΡΠΈΠ±ΡΡ Π΄Π°Π½Π½ΡΡ
.
ΠΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ CSS Ρ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΎΠΌ
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π²Ρ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΡΠ΅ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π² ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠΈ Ρ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π°ΠΌΠΈ ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ.
- Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ transform Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ 2D- ΠΈΠ»ΠΈ 3D-ΡΡΡΠ΅ΠΊΡΡ. translate() ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠ· ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ°ΠΌΠΈ, Π·Π°Π΄Π°Π½Π½ΡΠΌΠΈ Π΄Π»Ρ ΠΎΡΠ΅ΠΉ x ΠΈ y.
- ΠΠ΅ΡΠ΅Ρ ΠΎΠ΄ CSS ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°. ΠΠ½ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΏΠΎΡΠΎΠ± ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΡΠΊΠΎΡΠΎΡΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΏΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡΠ²ΠΎΠΉΡΡΠ² CSS.
- Β Π‘Π΅Π»Π΅ΠΊΡΠΎΡ ::before Π²ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΡΠΎ-ΡΠΎ ΠΏΠ΅ΡΠ΅Π΄ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π²ΡΠ±ΡΠ°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
- CSS-ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ z-index Π·Π°Π΄Π°Π΅Ρ z-ΠΏΠΎΡΡΠ΄ΠΎΠΊ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈ Π΅Π³ΠΎ flex-ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
ΠΡΡΡ ΠΊΡΠ°ΡΠΈΠ²Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°, ΠΊΠΎΡΠΎΡΠ°Ρ Π±ΡΠ΄Π΅Ρ ΡΠ΅Π°Π³ΠΈΡΠΎΠ²Π°ΡΡ ΠΏΠΎ-ΡΠ°Π·Π½ΠΎΠΌΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°.
ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ CSS?
ΠΠ°ΡΠ½Π΅ΠΌ Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ HTML:
- ΠΠΎΠΊΠ°Π·Π°ΡΡ ΠΏΡΠΎΡΠ΅, ΡΠ΅ΠΌ ΡΠ°ΡΡΠΊΠ°Π·Π°ΡΡ.
- ΠΡ Π²ΠΈΠ΄ΠΈΡΠ΅ ΡΠ΅Π³ Π°Π±Π·Π°ΡΠ° ΡΠΎ ΡΡΡΠ»ΠΊΠΎΠΉ ΠΈ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ΠΎΠΌ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΡ ΠΏΠΎΠΌΠ΅ΡΠΎΠΊ.
- ΠΠ°Π²Π°ΠΉΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΡΡΠΈΠ»Π΅ΠΉ Π΄Π»Ρ Link. Π’ΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, ΡΡΠΎΠ±Ρ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ΄ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡΡΡ, ΠΎΡΡΠ°Π²Π°Π»ΠΈΡΡ Π½Π° ΠΌΠ΅ΡΡΠ΅.
- ΠΠ½ ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ Π² Π²ΠΈΠ΄Π΅ Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°, ΡΡΠΎΠ±Ρ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΡΡΠΈΠ»ΠΈΡΡΠΈΡΠ΅ΡΠΊΠΈΠΌΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΠΌΠΈ ΡΠ°ΠΌΠΎΡΠ½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΠ°ΠΊΠΎΠ½Π΅Ρ, Π»ΡΠ±ΠΎΠ΅ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΠΎΠ³ΡΡ ΡΠΎΠ·Π΄Π°ΡΡ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ ΡΠΊΡΡΡΠΎ.
ΠΠ°ΠΊ Π½Π°ΡΡΡΠΎΠΈΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ?
Π‘Π»Π΅Π΄ΡΡΡΠ΅Π΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΎ ΡΠΎΠΊΡΠ°ΡΠ΅Π½Π½ΡΠΌ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ Π΄Π»Ρ:
- ΠΈΠΌΡ-Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ
- ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ
- ΡΡΠ½ΠΊΡΠΈΡ ΡΠΈΠ½Ρ ΡΠΎΠ½ΠΈΠ·Π°ΡΠΈΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ
- ΠΠ°Π΄Π΅ΡΠΆΠΊΠ° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ
- ΡΠΈΡΠ»ΠΎ ΠΈΡΠ΅ΡΠ°ΡΠΈΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ
- Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ
- ΡΠ΅ΠΆΠΈΠΌ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ-Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ
- ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅. ΠΡΠ΅Π³Π΄Π° ΡΠΊΠ°Π·ΡΠ²Π°ΠΉΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ animation-duration, ΠΈΠ½Π°ΡΠ΅ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π±ΡΠ΄Π΅Ρ ΡΠ°Π²Π½Π° 0 ΠΈ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ Π±ΡΠ΄Π΅Ρ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡΡΡ.
- ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: Π½Π΅Ρ 0 ΠΎΠ±Π»Π΅Π³ΡΠ΅Π½ΠΈΠ΅ 0 1 Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ΅ Π½Π΅Ρ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ
- Π£Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π½ΠΎ: Π½Π΅Ρ
- ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ: Π½Π΅Ρ. Π§ΠΈΡΠ°ΡΡ ΠΎ ΠΆΠΈΠ²ΠΎ
- ΠΠ΅ΡΡΠΈΡ: CSS3
- Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ JavaScript: object.style.animation=» ΠΌΠΎΠΉ Ρ ΠΎΠ΄ 5 ΡΠ΅ΠΊΡΠ½Π΄ Π±Π΅ΡΠΊΠΎΠ½Π΅ΡΠ΅Π½»
- ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ CSS
- ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ
Π£ΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π² ΡΠ΅ΠΊΡΠ½Π΄Π°Ρ ΠΈΠ»ΠΈ ΠΌΠΈΠ»Π»ΠΈΡΠ΅ΠΊΡΠ½Π΄Π°Ρ .
- ΡΡΠ½ΠΊΡΠΈΡ ΡΠΈΠ½Ρ ΡΠΎΠ½ΠΈΠ·Π°ΡΠΈΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ
ΠΠ°Π΄Π°Π΅Ρ ΠΊΡΠΈΠ²ΡΡ ΡΠΊΠΎΡΠΎΡΡΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ.
- Π·Π°Π΄Π΅ΡΠΆΠΊΠ° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ
ΠΠ°Π΄Π°Π΅Ρ Π²ΡΠ΅ΠΌΡ Π΄ΠΎ Π½Π°ΡΠ°Π»Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ.
- ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΈΡΠ΅ΡΠ°ΡΠΈΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ
Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ, ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π· Π΄ΠΎΠ»ΠΆΠ½Π° Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ.
- ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ-Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅
- ΠΠ°ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΡΠΎΡ Π°ΡΡΠΈΠ±ΡΡ ΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΎΠ½ ΡΠ²Π»ΡΠ΅ΡΡΡ.
ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ΄ΡΠ²ΠΎΠΉΡΡΠ² ΡΠ²ΠΎΠΉΡΡΠ²Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ
ΠΡΠ»ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° CSS ΠΌΠΎΠΆΠ΅Ρ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡΡΡ Π² ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΠ΅ΡΠΈΠΎΠ΄Π° Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ, ΠΎΠ½ΠΎ Π°Π½ΠΈΠΌΠΈΡΡΠ΅ΡΡΡ. Π‘ ΠΏΠΎΠΌΠΎΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ CSS ΠΈΠ»ΠΈ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΎΠ² CSS ΠΌΠΎΠΆΠ½ΠΎ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°ΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° CSS. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΡΠΈΠ²Π΅Π»Π° Π±Ρ ΠΊ ΡΠ»ΠΎΠΆΠ½ΠΎΠΌΡ ΡΠ΅ΠΊΡΡΡΠΈΠ²Π½ΠΎΠΌΡ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ, ΡΠ²ΠΎΠΉΡΡΠ²Π° CSS, ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΠΈΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ-Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ-ΠΈΠΌΡ, Π½Π΅Π»ΡΠ·Ρ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°ΡΡ.
Π‘Π»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° CSS ΠΌΠΎΠΆΠ½ΠΎ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°ΡΡ:
ΠΌΠ»Π½ ΡΠ½ΡΠΈΠΉ-ΠΊΠΎΠ½ΡΡΡ-ΡΠ°Π΄ΠΈΡΡ
ΠΌΠ»Π½-ΠΊΠΎΠ½ΡΡΡ-ΡΠ°Π΄ΠΈΡΡ-Π½ΠΈΠΆΠ½ΠΈΠΉ Π»Π΅Π²ΡΠΉ
ΠΌΠ΅Ρ-ΠΊΠΎΠ½ΡΡΡ-ΡΠ°Π΄ΠΈΡΡ-Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΏΡΠ°Π²ΡΠΉ
ΠΌΠ΅Ρ-ΠΊΠΎΠ½ΡΡΡ-ΡΠ°Π΄ΠΈΡΡ-Π²Π²Π΅ΡΡ Ρ ΡΠ»Π΅Π²Π°
moz-ΠΊΠΎΠ½ΡΡΡ-ΡΠ°Π΄ΠΈΡΡ-Π²Π²Π΅ΡΡ Ρ ΡΠΏΡΠ°Π²Π°
webkit-text-fill-color
webkit-text-stroke
webkit-text-stroke-color
Π°ΠΊΡΠ΅Π½ΡΠ½ΡΠΉ ΡΠ²Π΅Ρ
Π²ΡΠ΅
ΡΠΎΠ½ΠΎΠ²ΡΠΉ ΡΠΈΠ»ΡΡΡ
ΡΠΎΠ½
ΡΠ²Π΅Ρ ΡΠΎΠ½Π°
ΡΠΎΠ½ΠΎΠ²Π°Ρ ΠΏΠΎΠ·ΠΈΡΠΈΡ
ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΎΠ½Π°
ΡΠ°Π·ΠΌΠ΅Ρ Π±Π»ΠΎΠΊΠ°
Π³ΡΠ°Π½ΠΈΡΠ°
Π³ΡΠ°Π½ΠΈΡΠ°-Π±Π»ΠΎΠΊ-ΠΊΠΎΠ½Π΅Ρ
Π±ΠΎΡΠ΄ΡΡ-Π±Π»ΠΎΠΊ-ΠΊΠΎΠ½Π΅ΡΠ½ΡΠΉ ΡΠ²Π΅Ρ
ΡΠΈΡΠΈΠ½Π° ΠΊΠΎΠ½ΡΠ° Π±Π»ΠΎΠΊΠ° Π³ΡΠ°Π½ΠΈΡΡ
ΠΏΠΎΠ³ΡΠ°Π½ΠΈΡΠ½ΡΠΉ Π±Π»ΠΎΠΊ-ΡΡΠ°ΡΡ
ΡΠ²Π΅Ρ Π½Π°ΡΠ°Π»Π° Π±Π»ΠΎΠΊΠ° Π³ΡΠ°Π½ΠΈΡΡ
Π½Π°ΡΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° ΠΏΠΎΠ³ΡΠ°Π½ΠΈΡΠ½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°
Π³ΡΠ°Π½ΠΈΡΠ°-Π΄Π½ΠΎ
ΡΠ²Π΅Ρ Π½ΠΈΠΆΠ½Π΅ΠΉ Π³ΡΠ°Π½ΠΈΡΡ
Π³ΡΠ°Π½ΠΈΡΠ°-Π½ΠΈΠΆΠ½ΠΈΠΉ-Π»Π΅Π²ΡΠΉ ΡΠ°Π΄ΠΈΡΡ
Π³ΡΠ°Π½ΠΈΡΠ°-Π½ΠΈΠΆΠ½ΠΈΠΉ-ΠΏΡΠ°Π²ΡΠΉ-ΡΠ°Π΄ΠΈΡΡ
ΡΠΈΡΠΈΠ½Π° Π½ΠΈΠΆΠ½Π΅ΠΉ Π³ΡΠ°Π½ΠΈΡΡ
ΡΠ²Π΅Ρ Π³ΡΠ°Π½ΠΈΡΡ
Π³ΡΠ°Π½ΠΈΡΠ°-ΠΊΠΎΠ½Π΅Ρ-ΠΊΠΎΠ½Π΅Ρ-ΡΠ°Π΄ΠΈΡΡ
Π³ΡΠ°Π½ΠΈΡΠ°-ΠΊΠΎΠ½Π΅Ρ-Π½Π°ΡΠ°Π»ΠΎ-ΡΠ°Π΄ΠΈΡΡ
Π³ΡΠ°Π½ΠΈΡΠ°-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅-Π½Π°ΡΠ°Π»ΠΎ
Π³ΡΠ°Π½ΠΈΡΠ°-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅-ΡΡΠ΅Π·
ΡΠΈΡΠΈΠ½Π° Π³ΡΠ°Π½ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
Π³ΡΠ°Π½ΠΈΡΠ°-Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ-ΠΊΠΎΠ½Π΅Ρ
Π³ΡΠ°Π½ΠΈΡΠ° Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ°
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΠΊΠ°Π΄ΡΠΎΠ² Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ CSS.

Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ @keyframes Ρ ΠΈΠΌΠ΅Π½Π΅ΠΌ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΠΊΠ°Π΄ΡΠΎΠ², ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ animation-name Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΎ ΠΈΠΌΡ Π΄Π»Ρ ΡΠ²ΡΠ·ΡΠ²Π°Π½ΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Ρ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠ΅ΠΌ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄ΡΠ°. ΠΠ°ΠΆΠ΄ΠΎΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ @keyframes ΠΈΠΌΠ΅Π΅Ρ Π±Π»ΠΎΠΊ, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄ΡΠ°, ΠΈ ΡΠΏΠΈΡΠΎΠΊ ΡΡΠΈΠ»Π΅ΠΉ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ² ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΠΊΠ°Π΄ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ Π΄ΠΎΠ»Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, Π² ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠΉ ΠΊΠ°Π΄Ρ.
ΠΡΠΎΡΠ΅Π½ΡΡ ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΠΊΠ°Π΄ΡΠΎΠ² ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Ρ Π² Π»ΡΠ±ΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅; ΠΎΠ½ΠΈ Π±ΡΠ΄ΡΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΠ°Π½Ρ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΠΏΠΎΡΡΠ΄ΠΊΠΎΠΌ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΎΠ½ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡΡ.
ΠΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ ΠΎΠ±ΡΠ΅ΠΊΡΠ½ΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΠΈ CSSKeyframesRule ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ JavaScript ΠΏΠΎΠ»ΡΡΠΈΡΡ Π΄ΠΎΡΡΡΠΏ ΠΊ ΠΏΡΠ°Π²ΠΈΠ»Ρ @keyframes.
ΠΡΡΠ΅Π½ΡΠΈΡΠ½ΡΠ΅ ΡΠΏΠΈΡΠΊΠΈ ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΠΊΠ°Π΄ΡΠΎΠ²
ΠΡΠ°ΡΠ·Π΅ΡΡ Π±ΡΠ΄ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΆΠ΅ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠΈΠ΅ ΡΡΠΈΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π΄Π»Ρ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΈ ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ, Π΅ΡΠ»ΠΈ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄ΡΠ° Π½Π΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΈΡ (0 ΠΏΡΠΎΡΠ΅Π½ΡΠΎΠ²/ΠΎΡ ΠΈ 100 ΠΏΡΠΎΡΠ΅Π½ΡΠΎΠ²/Π΄ΠΎ).
Β ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΡΠΎ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΡ Π΅Π³ΠΎ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠΉ ΡΠΎΡΠΊΠΈ Π΄ΠΎ Π΅Π³ΠΎ ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ.
ΠΡΠ°Π²ΠΈΠ»Π° ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΠΊΠ°Π΄ΡΠΎΠ² ΠΈΠ³Π½ΠΎΡΠΈΡΡΡΡ Π°ΡΡΠΈΠ±ΡΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅Π»ΡΠ·Ρ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°ΡΡ, Π² ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Ρ.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΎΠΊΡΠ°ΡΠ΅Π½Π½ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ CSS
ΠΠ±Π±ΡΠ΅Π²ΠΈΠ°ΡΡΡΠ° Π΄Π»Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΠ΅ΠΆΠ΄Ρ ΡΡΠΈΠ»ΡΠΌΠΈ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ CSS ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ. ΠΠ»Ρ ΠΈΠΌΠ΅Π½ΠΈ-Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ-Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΡΡΠ½ΠΊΡΠΈΠΈ-Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ-Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, Π·Π°Π΄Π΅ΡΠΆΠΊΠΈ-Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΡΡΠ΅ΡΡΠΈΠΊΠ°-ΠΈΡΠ΅ΡΠ°ΡΠΈΠΉ-Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ-Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΡΠ΅ΠΆΠΈΠΌΠ°-Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ-Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΈ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΡ-Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΎΠ½ ΡΠ»ΡΠΆΠΈΡ ΡΠΎΠΊΡΠ°ΡΠ΅Π½ΠΈΠ΅ΠΌ.
ΠΠ°ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅
Π ΡΡΠΎΠΌ ΡΡΠΎΠΊΠ΅ Π²Ρ ΡΠ²ΠΈΠ΄Π΅Π»ΠΈ, ΠΊΠ°ΠΊ CSS-ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ ΠΈ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ. ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΡΠ·Π½Π°Π»ΠΈ ΠΎ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°Ρ , ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠΌΠΎΠ³ΡΡ Π²Π°ΠΌ ΡΠ»ΡΡΡΠΈΡΡ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ.
ΠΠ±Π»Π°Π΄Π°Ρ Π³Π»ΡΠ±ΠΎΠΊΠΈΠΌ Π±Π°Π·ΠΎΠ²ΡΠΌ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ΠΌ CSS, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠΉΡΠΈ Π΄Π°Π»ΡΡΠ΅ ΠΈ ΠΏΠΎΠ²ΡΡΠΈΡΡ ΡΠ²ΠΎΡ ΠΊΠ²Π°Π»ΠΈΡΠΈΠΊΠ°ΡΠΈΡ, Π·Π°ΠΏΠΈΡΠ°Π²ΡΠΈΡΡ Π½Π° ΠΊΡΡΡ Simplilearn Π΄Π»Ρ Π°ΡΠΏΠΈΡΠ°Π½ΡΠΎΠ² ΠΏΠΎ ΠΊΡΡΡΡ Full Stack Web Development, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠΎΠ²ΠΎΠ΄ΠΈΡΡΡ Π² ΡΠΎΡΡΡΠ΄Π½ΠΈΡΠ΅ΡΡΠ²Π΅ Ρ Caltech CTME. ΠΡΠΎΡ ΠΊΡΡΡ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ Π²Π°ΠΌ ΠΎΡΠ²ΠΎΠΈΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΡ ΠΏΠΎΠ»Π½ΠΎΠ³ΠΎ ΡΡΠ΅ΠΊΠ°, ΠΎΡ
Π²Π°ΡΡΠ²Π°ΡΡΡΡ Π²ΡΠ΅ Π°ΡΠΏΠ΅ΠΊΡΡ ΠΎΡ Π±Π°Π·ΠΎΠ²ΠΎΠ³ΠΎ Π΄ΠΎ ΠΏΡΠΎΠ΄Π²ΠΈΠ½ΡΡΠΎΠ³ΠΎ ΡΡΠΎΠ²Π½Ρ.
ΠΡΠ»ΠΈ Ρ Π²Π°Ρ Π΅ΡΡΡ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ Π²ΠΎΠΏΡΠΎΡΡ ΠΈΠ»ΠΈ ΠΎΡΠ·ΡΠ²Ρ ΠΎΠ± ΡΡΠΎΠΌ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π΅ ΠΏΠΎ CSS-ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, ΡΠΎΠΎΠ±ΡΠΈΡΠ΅ Π½Π°ΠΌ ΠΎΠ± ΡΡΠΎΠΌ Π² ΡΠ°Π·Π΄Π΅Π»Π΅ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠ΅Π² Π½ΠΈΠΆΠ΅. ΠΠ°ΡΠΈ ΡΠΏΠ΅ΡΠΈΠ°Π»ΠΈΡΡΡ ΡΠ²ΡΠΆΡΡΡΡ Ρ Π²Π°ΠΌΠΈ Π² Π±Π»ΠΈΠΆΠ°ΠΉΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ.
Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ CSS-Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΈ ΠΊΠ°ΠΊ Π΅Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ?
CSS-Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠ΅ΡΡΠΎΠ½Π°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ Π²Π°Ρ ΡΠ°ΠΉΡ ΠΈ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΏΡΠΈΡΡΠ½ΡΠ΅ Π²ΠΏΠ΅ΡΠ°ΡΠ»Π΅Π½ΠΈΡ Π΄Π»Ρ Π²Π°ΡΠΈΡ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Π΅ΠΉ. ΠΠΎΠ³Π΄Π° ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Ρ Π²Π΅Π±-ΡΠ°ΠΉΡΠ° Π½Π°Π²ΠΎΠ΄ΠΈΡ ΠΊΡΡΡΠΎΡ Π½Π° Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΡΠ°ΠΊΠΎΠΉ ΠΊΠ°ΠΊ ΡΡΡΠ»ΠΊΠ° ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ°, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΌΠΎΠΆΠ΅Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅Ρ, ΡΠ²Π΅Π»ΠΈΡΠΈΡΡΡΡ, ΡΠΌΠ΅Π½ΡΡΠΈΡΡΡΡ, ΠΏΠΎΠ²Π΅ΡΠ½ΡΡΡΡΡ ΠΈΠ»ΠΈ ΠΈΡ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΡ. ΠΡΠΎ Π½Π΅ ΠΏΡΠΎΡΡΠΎ ΠΏΡΠΈΡΡΠ½ΠΎΠ΅ Π·ΡΠ΅Π»ΠΈΡΠ΅ β ΡΡΠΎ Π΅ΡΠ΅ ΠΈ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½Π°Ρ ΠΎΠ±ΡΠ°ΡΠ½Π°Ρ ΡΠ²ΡΠ·Ρ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ ΠΈΡ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ.
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ CSS ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° ΠΌΠΎΠ³ΡΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΈ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄Ρ Π±Π΅Π· ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ JavaScript. ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΡΠ°Π»ΠΎ ΠΏΡΠΎΡΠ΅ ΠΈ Π»Π΅Π³ΡΠ΅, ΡΠ΅ΠΌ ΡΠ°Π½ΡΡΠ΅.
Π Π°Π½ΠΈΠΌΠ°ΡΠΈΡ CSS, ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π° ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΡΠΊΠ°Π·Π°Π½Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΠΎΡΠΎΠ±ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. Π’ΠΎΠ»ΡΠΊΠΎ Π² ΡΡΠΎΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΡΡ ΠΈΠ· ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΡΠΈΠ»Ρ Π² Π΄ΡΡΠ³ΠΎΠΉ. Π ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΠ°ΠΌ ΠΎΡΠ½ΠΎΡΡΡΡΡ:
- :hover , ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡ ΠΊΡΡΡΠΎΡ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ
- :focus , ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΡΠ΅Π»ΠΊΠ°Π΅Ρ ΠΈΠ»ΠΈ ΠΊΠ°ΡΠ°Π΅ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈΠ»ΠΈ Π²ΡΠ±ΠΈΡΠ°Π΅Ρ Π΅Π³ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ»Π°Π²ΠΈΡΠΈ ΡΠ°Π±ΡΠ»ΡΡΠΈΠΈ
- :Π°ΠΊΡΠΈΠ²Π½ΡΠΉ , ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ
- :target , ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΡΠ΅Π»ΠΊΠ°Π΅Ρ Π΄ΡΡΠ³ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΠ· ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΡ Π²ΡΡΠ΅ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΠΎΠ² :hover ΡΠ²Π»ΡΠ΅ΡΡΡ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΡΠΌ, ΠΈ ΠΈΠΌΠ΅Π½Π½ΠΎ Π΅Π³ΠΎ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π² ΡΡΠΎΠΌ ΠΏΠΎΡΡΠ΅. ΠΡ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΠΌ Π²ΡΠ΅, ΡΡΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π·Π½Π°ΡΡ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΈΠ»ΠΈ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ, Π²ΠΊΠ»ΡΡΠ°Ρ
- ΡΡΠΎ ΡΠ°ΠΊΠΎΠ΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ CSS
- ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ
- ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS
- Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½Π° ΡΠ²ΠΎΠ΅ΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅
Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ CSS?
ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ CSS Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡ ΠΊΡΡΡΠΎΡ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΡΠ²Π΅ΡΠ°Π΅Ρ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΈΠΌ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΡΡΡΠ΅ΠΊΡΠΎΠΌ. ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π²ΡΠ΄Π΅Π»ΡΠ΅Ρ ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΈ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΡΠΌ ΡΠΏΠΎΡΠΎΠ±ΠΎΠΌ ΠΏΠΎΠ²ΡΡΠ΅Π½ΠΈΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΡΡΠΈ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°.
ΠΠ·Π³Π»ΡΠ½ΠΈΡΠ΅ Π½Π° ΠΏΡΠΈΠΌΠ΅Ρ Π½ΠΈΠΆΠ΅. ΠΡΠ»ΠΈ Π²Ρ Π½Π°Π²Π΅Π΄Π΅ΡΠ΅ ΠΊΡΡΡΠΎΡ Π½Π° div, ΠΎΠ½ ΠΏΠΎΡΡΠ΅ΠΏΠ΅Π½Π½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΡ ΡΠΎ ΡΠ²Π΅ΡΠ»ΠΎ-ΡΠΎΠ·ΠΎΠ²ΠΎΠ³ΠΎ Π½Π° ΡΠ΅ΠΌΠ½ΠΎ-ΡΠΎΠ·ΠΎΠ²ΡΠΉ.
Π‘ΠΌ. ΠΠ΅ΡΠ΅Ρ ΠΎΠ΄ Pen CSS ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΎΡ HubSpot (@hubspot) Π½Π° CodePen.
Π₯ΠΎΡΡ ΡΡΠΎ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΠΊΠ°ΠΊ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ, Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ ΡΡΠΎ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄. ΠΡΠΈ Π΄Π²Π° ΡΠ΅ΡΠΌΠΈΠ½Π° ΡΠ°ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π²Π·Π°ΠΈΠΌΠΎΠ·Π°ΠΌΠ΅Π½ΡΠ΅ΠΌΠΎ, Π½ΠΎ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΈ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ Π² CSS ΠΎΡΠ»ΠΈΡΠ°ΡΡΡΡ.
ΠΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΈ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° β Π½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈ Π½Π°Π»ΠΈΡΠΈΠΈ ΡΡΠΈΠ³Π³Π΅ΡΠ°, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡ ΠΊΡΡΡΠΎΡ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ. ΠΠΎΡΠ»Π΅ Π·Π°ΠΏΡΡΠΊΠ° ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ ΠΌΠΎΠ³ΡΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΈΠ· Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ Π² ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠ΅. ΠΡ Π½Π΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΠ°Π·Π°ΡΡ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΡΠ½ΡΠ΅ ΡΠΎΡΠΊΠΈ, ΠΈ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠΏΠΎΠ»Π½ΡΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄ΠΈΠ½ ΡΠ°Π·.
ΠΠ½ΠΈΠΌΠ°ΡΠΈΠΈ, Ρ Π΄ΡΡΠ³ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ, ΠΌΠΎΠ³ΡΡ Π·Π°ΡΠΈΠΊΠ»ΠΈΠ²Π°ΡΡΡΡ, ΠΏΠΎΠ²ΡΠΎΡΡΡΡΡΡ Π² ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΈ ΠΈ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄ΠΈΡΡ ΠΈΠ· Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ Π² ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΡΠ½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΈ Π² ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ ΠΊΠ»ΡΡΠ΅Π²ΡΠΌ ΠΊΠ°Π΄ΡΠ°ΠΌ.
ΠΠ»ΡΡΠ΅Π²ΡΠ΅ ΠΊΠ°Π΄ΡΡ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ Π½Π° Π½Π°ΡΠ°Π»ΠΎ ΠΈ ΠΊΠΎΠ½Π΅Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, Π° ΡΠ°ΠΊΠΆΠ΅ Π»ΡΠ±ΡΠ΅ ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΡΠ½ΡΠ΅ ΡΠ°Π³ΠΈ ΠΌΠ΅ΠΆΠ΄Ρ Π½Π°ΡΠ°Π»ΠΎΠΌ ΠΈ ΠΊΠΎΠ½ΡΠΎΠΌ. ΠΡΡΠ³ΠΈΠΌΠΈ ΡΠ»ΠΎΠ²Π°ΠΌΠΈ, ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠΉ ΠΊΠ°Π΄Ρ ΠΎΠΏΠΈΡΡΠ²Π°Π΅Ρ, ΠΊΠ°ΠΊ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π² Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ Π²ΠΎ Π²ΡΠ΅ΠΌΡ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ.
Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΡΠΈΠΌΠ΅ΡΠ° Π΄Π°Π²Π°ΠΉΡΠ΅ Π²Π·Π³Π»ΡΠ½Π΅ΠΌ Π½Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΎΡΡΠΊΠΎΠΊΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½ΠΈΠΆΠ΅.
ΠΡΡΠΊΠΎΠΊ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°
Π§ΡΠΎΠ±Ρ ΠΏΡΠΈΠ²Π»Π΅ΡΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Π΅ΠΉ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ ΡΡΡΠ΅ΠΊΡ ΠΎΡΡΠΊΠΎΠΊΠ°, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡ ΠΊΡΡΡΠΎΡ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡΠ΅, ΡΡΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ, ΡΡΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΈ ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΠΊΠ°Π΄ΡΡ. ΠΠ°Π»Π΅Π΅ Π² ΡΡΠΎΠΌ ΠΏΠΎΡΡΠ΅ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΡΠ°Π³ Π·Π° ΡΠ°Π³ΠΎΠΌ. Π‘Π΅ΠΉΡΠ°Ρ ΠΌΡ ΠΊΡΠ°ΡΠΊΠΎ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΡΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ.
Π ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Ρ ΠΏΠΎΠΌΠ΅ΡΡΠΈΠ» div Π²ΠΎ Π³ΠΈΠ±ΠΊΠΈΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΠΎΡΡΠΊΠ°ΠΊΠΈΠ²Π°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π² ΡΡΠΎΠΉ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΠΈ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°ΡΡΡΡ Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ ΠΈΠ»ΠΈ Π°Π±Π·Π°ΡΠ΅ΠΌ.
ΠΠ°ΡΠ΅ΠΌ Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΠΎΠ½Π° Π·Π°Π²Π΅ΡΡΠ°Π»Π° ΠΎΡΡΠΊΠΎΠΊ Π·Π° Π΄Π²Π΅ ΡΠ΅ΠΊΡΠ½Π΄Ρ ΠΈ ΡΠ°Π±ΠΎΡΠ°Π»Π° Π±Π΅ΡΠΊΠΎΠ½Π΅ΡΠ½ΠΎ (ΠΏΠΎΠΊΠ° ΠΊΡΡΡΠΎΡ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π½Π°Π΄ div). Π― ΡΠ°ΠΊΠΆΠ΅ ΡΡΡΠ°Π½ΠΎΠ²Π»Ρ Π΅Π³ΠΎ ΡΠ°ΠΉΠΌΠΈΠ½Π³ Π½Π° , ΠΎΠ±Π»Π΅Π³ΡΠΈΠ² , ΡΡΠΎΠ±Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π½Π°ΡΠΈΠ½Π°Π»Π°ΡΡ ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎ, ΡΡΠΊΠΎΡΡΠ»Π°ΡΡ, Π° Π·Π°ΡΠ΅ΠΌ Π·Π°ΠΌΠ΅Π΄Π»ΡΠ»Π°ΡΡ.
ΠΠ°ΠΊΠΎΠ½Π΅Ρ, Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡ ΡΡΠΈ ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΠΊΠ°Π΄ΡΠ°. ΠΠ΅ΡΠ²ΡΠΉ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ. Π 0% ΠΈΠ»ΠΈ Π² ΠΏΠ΅ΡΠ²ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡΡ Π² 0px ΠΏΠΎ ΠΎΡΠΈ Y. ΠΡΠΈ 50% ΠΈΠ»ΠΈ Π½Π° ΠΏΠΎΠ»ΠΏΡΡΠΈ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ Π΄Π²ΠΈΠ³Π°ΡΡΡΡ Π½Π° -50px Π²Π²Π΅ΡΡ ΠΏΠΎ ΠΎΡΠΈ Y. Π 100% , ΠΈΠ»ΠΈ Π² ΠΊΠΎΠ½ΡΠ΅ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΠΎΠ½ Π²Π΅ΡΠ½Π΅ΡΡΡ Π² ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΠΎΡΠΈ Y, Π·Π°Π²Π΅ΡΡΠΈΠ² ΡΠ²ΠΎΠΉ ΠΎΡΡΠΊΠΎΠΊ.
ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ Π½Π° ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ Π½ΠΈΠΆΠ΅.
Π‘ΠΌ. Β«ΠΡΡΠΊΠΎΠΊ ΠΏΠ΅ΡΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈΒ» ΠΡΠΈΡΡΠΈΠ½Ρ ΠΠ΅ΡΡΠΈΠΊΠΎΠ½Π΅ (@hubspot) Π½Π° CodePen.
ΠΡ ΠΌΠΎΠ³Π»ΠΈ Π·Π°ΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΡΡΡΠ΅ΠΊΡ ΠΎΡΡΠΊΠΎΠΊΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄Π°. ΠΡΠΎ ΠΏΠΎΡΠΎΠΌΡ, ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΠ°Π·Π°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΈ ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π° Π½Π΅ ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΡΠ½ΡΡ ΡΠΎΡΠΊΡ. ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π²Ρ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ Π·Π°ΡΡΠ°Π²ΠΈΡΡ ΡΠΎΠ·ΠΎΠ²ΡΠΉ ΠΊΠ²Π°Π΄ΡΠ°Ρ Π΄Π²ΠΈΠ³Π°ΡΡΡΡ Π²Π²Π΅ΡΡ
ΠΏΠΎ ΠΎΡΠΈ Y, Π½ΠΎ Π²Ρ Π½Π΅ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ ΡΠΊΠ°Π·Π°ΡΡ Π΅ΠΌΡ Π΄Π²ΠΈΠ³Π°ΡΡΡΡ ΠΎΠ±ΡΠ°ΡΠ½ΠΎ Π²Π½ΠΈΠ· ΠΏΠΎ ΠΎΡΠΈ Y, ΡΡΠΎΠ±Ρ Π·Π°Π²Π΅ΡΡΠΈΡΡ ΠΎΡΡΠΊΠΎΠΊ.
Π’Π΅ΠΏΠ΅ΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΌΡ Π»ΡΡΡΠ΅ ΠΏΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΠ»ΠΈΡΡ Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ ΠΈ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π°ΠΌΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π² CSS, Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ, Π·Π°ΡΠ΅ΠΌ Π²Π°ΠΌ ΠΈΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ.
ΠΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Hover CSS
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΠ° :hover Π² CSS ΠΈΠΌΠ΅Π΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ².
ΠΠΎ-ΠΏΠ΅ΡΠ²ΡΡ , Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ Π΄Π»Ρ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΠΈ Π²Π°ΠΆΠ½ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ Π²Π°ΡΠΈΠΌ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»ΡΠΌ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π²Π΅Π±-ΡΠ°ΠΉΡΡ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π½Π° ΡΠ²ΠΎΠΈ ΡΡΡΠ»ΠΊΠΈ, ΡΡΠΎΠ±Ρ ΠΎΡΠ΄Π΅Π»ΠΈΡΡ ΠΈΡ ΠΎΡ ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ° Π½Π° ΡΠ²ΠΎΠ΅ΠΌ ΡΠ°ΠΉΡΠ΅.
ΠΡΡΠΎΡΠ½ΠΈΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ Π²Π΅Π±-ΡΠ°ΠΉΡΡ ΡΠ°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, ΠΏΠΎΡΡΠΎΠΌΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½Π°Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡ ΠΊΡΡΡΠΎΡ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ. Π ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΎΠ½ ΠΎΡΡΠ°Π΅ΡΡΡ ΡΠΊΡΡΡΡΠΌ. ΠΡΠΎ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΡ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΎΠΊ Π½Π° Π²Π°Ρ ΡΠ°ΠΉΡ β Π²ΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ ΠΎΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ° Π‘Π°ΡΠΈ Π’ΡΠ°Π½:
Π‘ΠΌ. ΠΏΠ΅ΡΠΎ
ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠ΅ΠΉ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ CSS ΠΎΡ Π‘Π°ΡΠΈ (@sashatran)
Π½Π° ΠΠΎΠ΄ΠΠ΅Π½Π΅.
ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ±ΡΠ΄ΠΈΡΡ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Π΅ΠΉ ΡΠΎΠ²Π΅ΡΡΠΈΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Π½Π° Π²Π°ΡΠ΅ΠΌ ΡΠ°ΠΉΡΠ΅. Π£Π²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡ Π½Π° Π½Π΅Π΅ ΠΊΡΡΡΠΎΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΌΠΎΠΆΠ΅Ρ ΡΠ±Π΅Π΄ΠΈΡΡ Π΅Π³ΠΎ ΠΎΡΠΏΡΠ°Π²ΠΈΡΡ ΡΠΎΡΠΌΡ, ΡΠΎΠ²Π΅ΡΡΠΈΡΡ ΠΏΠΎΠΊΡΠΏΠΊΡ ΠΈΠ»ΠΈ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ Π»ΡΠ±ΠΎΠΉ ΠΏΡΠΈΠ·ΡΠ² ΠΊ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅. ΠΠΈΠΆΠ΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½ ΠΏΡΠΈΠΌΠ΅Ρ ΠΠ΄Π°ΠΌΠ° ΠΠΎΡΠ³Π°Π½Π°.
Π‘ΠΌ. ΠΏΠ΅ΡΠΎ CSS Grow Hover Effect ΠΎΡ ΠΠ΄Π°ΠΌΠ° ΠΠΎΡΠ³Π°Π½Π° (@AdamCCFC) Π½Π° ΠΠΎΠ΄ΠΠ΅Π½Π΅.
ΠΠ΄Π½Π°ΠΊΠΎ Π±ΡΠ΄ΡΡΠ΅ ΠΎΡΡΠΎΡΠΎΠΆΠ½Ρ ΠΏΡΠΈ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΠ° :hover Π½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ
Ρ ΡΠ΅Π½ΡΠΎΡΠ½ΡΠΌ ΡΠΊΡΠ°Π½ΠΎΠΌ. ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΠΌΠΎΠΆΠ΅Ρ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ Π½Π°ΡΠΈΠ½Π°ΡΡ ΡΡΡΠ΅ΠΊΡ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄Π° ΠΈΠ»ΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡ Π½Π° Π½Π΅Π³ΠΎ ΠΊΡΡΡΠΎΡ. ΠΠ»ΠΈ ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ ΠΎΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡΡ ΡΠ΅ΡΠ΅Π· ΠΌΠ³Π½ΠΎΠ²Π΅Π½ΠΈΠ΅ ΠΏΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°Π²Π΅Π΄Π΅Ρ ΠΊΡΡΡΠΎΡ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ. ΠΠ»ΠΈ ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ Π½Π΅ΠΏΡΠ΅ΡΡΠ²Π½ΠΎ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡ ΡΠ²ΠΎΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΡ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π² ΡΠΈΠΊΠ»Π΅, Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅ Π½Π°Π²ΠΎΠ΄ΠΈΡ Π½Π° Π½Π΅Π΅ ΠΊΡΡΡΠΎΡ. ΠΠ³ΠΎ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°.
ΠΠΎΡΡΠΎΠΌΡ Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ±Π΅Π΄ΠΈΡΡΡΡ, ΡΡΠΎ Π²Π°Ρ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π΄ΠΎΡΡΡΠΏΠ΅Π½ Π½Π° Π²ΡΠ΅Ρ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ , Π² ΡΠΎΠΌ ΡΠΈΡΠ»Π΅ Ρ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΡΠΌΠΈ ΠΈΠ»ΠΈ ΠΎΡΡΡΡΡΡΠ²ΡΡΡΠΈΠΌΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΠΌΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ. ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π²Ρ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π½Π° ΡΠ²ΠΎΠΉ ΡΠ°ΠΉΡ, Π½ΠΎ ΠΎΠ½ΠΈ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΠΌΠ΅ΡΡ ΡΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΠΌΡΡΠ»Π° ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° ΠΈΠ»ΠΈ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΌ.
ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ CSS
ΠΠΎΡ ΠΊΠ°ΠΊ Π½Π°ΡΡΡΠΎΠΈΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ CSS Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ:
1. ΠΠ°ΡΡΡΠΎΠΉΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ.
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΈΠ»ΠΈ Π΅Π³ΠΎ ΠΏΠΎΠ΄ΡΠ²ΠΎΠΉΡΡΠ²Π° Π΄Π»Ρ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ Π·Π΄Π΅ΡΡ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ, Π²ΡΠ΅ΠΌΡ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ Π΄Π΅ΡΠ°Π»ΠΈ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π±ΡΠ΄Π΅Ρ ΡΠ°Π·Π²ΠΈΠ²Π°ΡΡΡΡ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ. Π§ΡΠΎΠ±Ρ Π½Π°ΡΠ°ΡΡ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΈ Π·Π°ΡΡΠ°Π²ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π΄Π²ΠΈΠ³Π°ΡΡΡΡ, Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ 9 @keyframes. 0297 .
2. ΠΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΠ΅ ΠΏΠΎΠ΄ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠ²ΠΎΠΉΡΡΠ²Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ animation ΡΠΎΡΡΠΎΠΈΡ ΠΈΠ· ΡΠ»Π΅Π΄ΡΡΡΠΈΡ ΠΏΠΎΠ΄ΡΠ²ΠΎΠΉΡΡΠ²:
ΠΈΠΌΡ-Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈΠΡΠ°Π²ΠΈΠ»ΠΎ @keyframes at-rule. ΠΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠ΅ animation-name ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΊΠ°ΠΊ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ, Π° ΠΈΠΌΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ β ΠΊΠ°ΠΊ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, animation-name: bounce ).
animation-durationΠΡΠΎ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ. ΠΠ½ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ Π² ΡΠ΅ΠΊΡΠ½Π΄Π°Ρ ( Ρ ) ΠΈΠ»ΠΈ ΠΌΠΈΠ»Π»ΠΈΡΠ΅ΠΊΡΠ½Π΄Ρ ( ΠΌΡ ) (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π°Π½ΠΈΠΌΠ°ΡΠΈΡ-Π΄Π»ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ: 3 Ρ ).
ΡΡΠ½ΠΊΡΠΈΡ ΡΠΈΠ½Ρ ΡΠΎΠ½ΠΈΠ·Π°ΡΠΈΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈΠΠΎΡ ΠΊΠ°ΠΊ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΡΠΎΡ ΠΎΠ΄ΠΈΡ ΡΠ΅ΡΠ΅Π· ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΠΊΠ°Π΄ΡΡ. ΠΠ½ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΊΡΠΈΠ²ΡΡ ΡΠΊΠΎΡΠΎΡΡΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Ρ ΠΏΠ»Π°Π²Π½ΠΎΡΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ.
Π‘ΡΡΠ΅ΡΡΠ²ΡΡΡ ΠΏΡΠ΅Π΄ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ, Π²ΠΊΠ»ΡΡΠ°Ρ Π»Π΅Π³ΠΊΠΎΡΡΡ , Π»ΠΈΠ½Π΅ΠΉΠ½ΡΠΉ , ΠΏΠ»Π°Π²Π½ΡΠΉ Π²Ρ
ΠΎΠ΄ ΠΈ Π»Π΅Π³ΠΊΠΈΠΉ Π²Ρ
ΠΎΠ΄ . ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΈ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΡΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠΈ.
ΠΡΠ΅ΠΌΡ Π΄ΠΎ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π·Π°Π³ΡΡΠΆΠ΅Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π·Π°ΠΏΡΡΡΠΈΡ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, Π·Π°Π΄Π°Π½Π½ΠΎΠ΅ Π² ΡΠ΅ΠΊΡΠ½Π΄Π°Ρ ΠΈΠ»ΠΈ ΠΌΠΈΠ»Π»ΠΈΡΠ΅ΠΊΡΠ½Π΄Π°Ρ .
ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ: Π²ΡΠ΅ΠΌΡ (Π½Π΅ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ), Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ (ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ) ΠΈ Π½Π°ΡΠ»Π΅Π΄ΡΠ΅Ρ (Π½Π°ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°).
ΠΠΎΠΏΡΡΠΊΠ°ΡΡΡΡ ΠΈ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ. ΠΡΠ»ΠΈ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π·Π°ΠΏΡΡΠΊΠ°Π΅ΡΡΡ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π΅ΡΠ»ΠΈ Π±Ρ ΠΎΠ½Π° ΡΠΆΠ΅ ΠΏΡΠΎΠΈΠ³ΡΡΠ²Π°Π»Π°ΡΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π² Π°Π½ΠΈΠΌΠ°ΡΠΈΡ-Π·Π°Π΄Π΅ΡΠΆΠΊΠ°: -2 Ρ , Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π±ΡΠ΄Π΅Ρ Π²Π΅ΡΡΠΈ ΡΠ΅Π±Ρ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ Π΅ΡΠ»ΠΈ Π±Ρ ΠΎΠ½Π° Π½Π°ΡΠ°Π»Π° Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡΡΡ Π·Π° Π΄Π²Π΅ ΡΠ΅ΠΊΡΠ½Π΄Ρ Π΄ΠΎ ΡΡΠΎΠ³ΠΎ.
ΡΠΈΡΠ»ΠΎ ΠΈΡΠ΅ΡΠ°ΡΠΈΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈΠΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΏΠΎΠ²ΡΠΎΡΠΎΠ² Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π΄ΠΎ ΠΎΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ Π΅Π³ΠΎ ΠΊΠ°ΠΊ Π±Π΅ΡΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠ΅ , ΡΡΠΎΠ±Ρ ΠΏΠΎΠ²ΡΠΎΡΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π±Π΅ΡΠΊΠΎΠ½Π΅ΡΠ½ΠΎ.
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²: ΡΠΈΡΠ»ΠΎ (Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ 1 ), Π±Π΅ΡΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠ΅ (Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π·Π°ΡΠΈΠΊΠ»ΠΈΠ²Π°Π΅ΡΡΡ Π½Π°Π²ΡΠ΅Π³Π΄Π°), Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΈ Π½Π°ΡΠ»Π΅Π΄ΡΠ΅Ρ .
ΠΠ°Π΄Π°Π΅Ρ Π½Π°ΡΠ°Π»ΡΠ½ΡΡ ΡΠΎΡΠΊΡ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΡΡ ΡΠΈΠΊΠ»ΠΎΠ². ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ ΠΌΠΎΠΆΠ΅Ρ ΠΌΠ΅Π½ΡΡΡ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ ΡΠ±ΡΠ°ΡΡΠ²Π°ΡΡΡΡ ΠΈ ΠΏΠΎΠ²ΡΠΎΡΡΡΡΡΡ.
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°: Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΉ (Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π²ΠΏΠ΅ΡΠ΅Π΄), ΡΠ΅Π²Π΅ΡΡ (Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π½Π°Π·Π°Π΄), Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ (Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π²ΠΏΠ΅ΡΠ΅Π΄, Π·Π°ΡΠ΅ΠΌ Π½Π°Π·Π°Π΄), Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ-ΡΠ΅Π²Π΅ΡΡ (Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π½Π°Π·Π°Π΄, Π·Π°ΡΠ΅ΠΌ Π²ΠΏΠ΅ΡΠ΅Π΄), Π½Π°ΡΠ°Π»ΡΠ½ΡΠΉ ΠΈ Π½Π°ΡΠ»Π΅Π΄ΡΠ΅Ρ .
animation-fill-modeΠΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ, ΠΊΠΎΠ³Π΄Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π½Π΅ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡΡ (Ρ. Π΅. Π΄ΠΎ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΠΊΠ»ΡΡΠ΅Π²ΠΎΠ³ΠΎ ΠΊΠ°Π΄ΡΠ° ΠΈ ΠΏΠΎΡΠ»Π΅ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π³ΠΎ)
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²: Π½Π΅Ρ (ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΡΡΠΈΠ»ΠΈ), Π²ΠΏΠ΅ΡΠ΅Π΄ (ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΎΡ
ΡΠ°Π½ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΡΠΈΠ»Ρ, ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠ΅ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΌ ΠΊΠ»ΡΡΠ΅Π²ΡΠΌ ΠΊΠ°Π΄ΡΠΎΠΌ), Π½Π°Π·Π°Π΄ (ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΎΡ
ΡΠ°Π½ΡΠ΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠ΅ ΠΏΠ΅ΡΠ²ΡΠΌ ΠΊΠ»ΡΡΠ΅Π²ΡΠΌ ΠΊΠ°Π΄ΡΠΎΠΌ), ΠΎΠ±Π° (Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΏΡΠ°Π²ΠΈΠ»Π°ΠΌ Π΄Π»Ρ ΠΎΠ±ΠΎΠΈΡ
Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΉ), Π½Π°ΡΠ°Π»ΡΠ½ΡΠΉ ΠΈ Π½Π°ΡΠ»Π΅Π΄ΡΠ΅Ρ .
Π£ΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ (Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ ΠΈΠ»ΠΈ ΠΏΡΠΈΠΎΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ). ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΠΌΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π²ΠΎΠ·ΠΎΠ±Π½ΠΎΠ²ΠΈΡΡ ΡΠ°Π±ΠΎΡΡ Ρ ΡΠΎΠ³ΠΎ ΠΌΠ΅ΡΡΠ°, Π³Π΄Π΅ ΠΎΠ½Π° Π±ΡΠ»Π° ΠΏΡΠΈΠΎΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π°, Π° Π½Π΅ Π½Π°ΡΠΈΠ½Π°ΡΡ Π·Π°Π½ΠΎΠ²ΠΎ.
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°: ΠΏΡΠΈΠΎΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ , ΡΠ°Π±ΠΎΡΠ°Π΅Ρ , Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΈ Π½Π°ΡΠ»Π΅Π΄ΡΠ΅Ρ .
3. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΠΊΠ°Π΄ΡΡ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ CSS Hover.
ΠΠΎΡΠ»Π΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΈ ΠΏΠΎΠ΄ΡΠ²ΠΎΠΉΡΡΠ² Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ @keyframes at-ΠΏΡΠ°Π²ΠΈΠ»ΠΎ. ΠΡΠΎ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ Π²Π°ΠΌ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΏΠΎ ΠΊΡΠ°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅ΡΠ΅ Π΄Π²Π° ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΠΊΠ°Π΄ΡΠ°, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠΏΠΈΡΡΠ²Π°ΡΡ, ΠΊΠ°ΠΊ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π΄ΠΎΠ»ΠΆΠ½Π° Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ Π² ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ ΡΠ»ΡΡΠ°ΡΡ Π²ΠΎ Π²ΡΠ΅ΠΌΡ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ.
Π§ΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π½Π°ΠΈΠ»ΡΡΡΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ Π²ΠΎ Π²ΡΠ΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ , 9ΠΡΠ°Π²ΠΈΠ»ΠΎ 0296 @keyframes Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΈΠΌΠ΅ΡΡ ΠΏΡΠ΅ΡΠΈΠΊΡ ΠΏΠΎΡΡΠ°Π²ΡΠΈΠΊΠ°, ΠΊΠ°ΠΊ ΠΈ Π²ΡΠ΅ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π° ΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ.
ΠΡΠ΅ΡΠΈΠΊΡΡ ΠΏΠΎΡΡΠ°Π²ΡΠΈΠΊΠΎΠ² Π΄ΠΎΠ»ΠΆΠ½Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
@-moz-keyframes
@-o-keyframes
@-webkit-keyframes ΠΏΠΎΡΡΠ°Π²ΡΠΈΠΊ Ρ ΠΏΡΠ΅ΡΠΈΠΊΡΠΎΠΌ Π² ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΈ Π±ΡΠ»ΠΈ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎ ΠΏΡΠΎΡΡΡΠΌΠΈ.
Π§ΡΠΎΠ±Ρ ΡΠΊΠ°Π·Π°ΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠΎΡΠΊΠΈ ΠΎΡΡΠ°Π½ΠΎΠ²Π° ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΠΊΠ°Π΄ΡΠΎΠ², ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΏΡΠΎΡΠ΅Π½Ρ Ρ 0% β ΠΏΠ΅ΡΠ²ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ, Π° 100% β ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ. ΠΠ²Π΅ ΡΠΎΡΠΊΠΈ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Ρ ΠΈΡ ΠΏΡΠ΅Π²Π΄ΠΎΠ½ΠΈΠΌΠ°ΠΌΠΈ ΠΎΡ ΠΈ ΠΎΡ Π΄ΠΎ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΡΠ½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ Π½Π° 50% ΠΈ/ΠΈΠ»ΠΈ Π»ΡΠ±ΡΠ΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΡΠ΅ ΡΠΎΡΠΊΠΈ ΠΏΠΎ Π²Π°ΡΠ΅ΠΌΡ ΠΆΠ΅Π»Π°Π½ΠΈΡ.
ΠΠ½ΠΈΠΌΠΈΡΡΠ΅ΠΌΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ( left ΠΈ top ) ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Ρ Π²Π½ΡΡΡΠΈ ΠΊΠΎΠ½ΡΡΠΎΠ»ΡΠ½ΡΡ ΡΠΎΡΠ΅ΠΊ, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π² ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π¨Π΅ΠΉ Π₯ΠΎΡ Π½ΠΈΠΆΠ΅.
Π‘ΠΌ. ΠΏΠ΅ΡΠΎ ΠΠ»ΡΡΠ΅Π²ΡΠ΅ ΠΊΠ°Π΄ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΎΡ Shay Howe (@shayhowe) Π½Π° ΠΠΎΠ΄ΠΠ΅Π½Π΅.
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°ΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ²Π΅ΡΡ
Ρ Π²Π½ΠΈΠ·, ΠΏΠΎΠΏΡΡΠΊΠ° Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°ΡΡ ΠΎΡ top: 0 Π΄ΠΎ bottom: 0 Π½Π΅ ΡΡΠ°Π±ΠΎΡΠ°Π΅Ρ. ΠΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°ΡΡ ΠΎΡ top: 0 Π΄ΠΎ top: 100% .
4. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠΎΠΊΡΠ°ΡΠ΅Π½ΠΈΠ΅ CSS Hover Animation.
ΠΠ°ΠΊ ΠΈ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ, Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΏΠΈΡΡΠ²Π°ΡΡ Π² ΡΠΎΠΊΡΠ°ΡΠ΅Π½Π½ΠΎΠΌ ΡΠΎΡΠΌΠ°ΡΠ΅. ΠΡΠΎ Π΄ΠΎΡΡΠΈΠ³Π°Π΅ΡΡΡ Π·Π° ΡΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π²ΠΌΠ΅ΡΡΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ΠΈΠΉ.
Π‘ΠΌ. ΠΏΠ΅ΡΠΎ Π‘ΡΠ΅Π½ΠΎΠ³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠ°Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΎΡ Shay Howe (@shayhowe) Π½Π° ΠΠΎΠ΄ΠΠ΅Π½Π΅.
ΠΠΎΡ ΠΊΠ°ΠΊ Π΄ΠΎΠ»ΠΆΠ½Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π² ΡΠ²ΠΎΠΉΡΡΠ²Π΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ:
- ΠΈΠΌΡ-Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ
- ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ
- ΡΡΠ½ΠΊΡΠΈΡ ΡΠΈΠ½Ρ ΡΠΎΠ½ΠΈΠ·Π°ΡΠΈΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ
- Π·Π°Π΄Π΅ΡΠΆΠΊΠ° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ
- ΡΠΈΡΠ»ΠΎ ΠΈΡΠ΅ΡΠ°ΡΠΈΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ
- Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ
- ΡΠ΅ΠΆΠΈΠΌ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ-Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ
- ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ
Π’Π΅ΠΏΠ΅ΡΡ, ΠΊΠΎΠ³Π΄Π° Π²Ρ Π·Π½Π°Π΅ΡΠ΅, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ CSS-Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°, Π΄Π°Π²Π°ΠΉΡΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π²Π΄ΠΎΡ
Π½ΠΎΠ²ΡΡ Π²Π°Ρ.
ΠΡΠΈΠΌΠ΅ΡΡ CSS-Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°
ΠΠΎΠ³Π΄Π° Π΄Π΅Π»ΠΎ Π΄ΠΎΡ ΠΎΠ΄ΠΈΡ Π΄ΠΎ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ CSS-Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ, Π²Π°ΡΠ΅ Π²ΠΎΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ β ΡΡΠΎ ΠΏΡΠ΅Π΄Π΅Π». ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΏΠ΅ΡΠ΅Π²ΠΎΡΠ°ΡΠΈΠ²Π°ΡΡ, Π²ΡΠ°ΡΠ°ΡΡ ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ ΠΎΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. ΠΡ Π΄Π°ΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠΉΡΠΈ Π·Π° ΡΠ°ΠΌΠΊΠΈ ΠΏΡΠΎΡΡΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡΡΡ ΠΊ ΡΠΌΡ Π΄ΡΡΠ³ΠΈΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠΈΠ΄ΡΠΌΠ°Π»ΠΈ ΡΠ»ΠΎΠΆΠ½ΡΠ΅ ΠΈ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠ΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ.
ΠΠΎΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ· ΡΠ°ΠΌΡΡ ΠΊΡΡΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°.
1. ΠΡΡΠ΅ΠΊΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Sass
ΠΡΡΠΎΡΠ½ΠΈΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΡΠΎΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ Π΄Π΅Π»ΠΈΡΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠ°ΠΌΠΈ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, ΠΎΡΠ³Π°Π½ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΡ Π² ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΠΎΡΡΠ°ΡΠ»ΡΡ , Π²ΠΊΠ»ΡΡΠ°Ρ Π²Π΅Π±-ΡΠ°ΠΉΡΡ ΠΎ ΠΏΡΡΠ΅ΡΠ΅ΡΡΠ²ΠΈΡΡ , ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΈ ΠΈ ΡΡΡΠΎΠΈΡΠ΅Π»ΡΡΡΠ²Π΅. ΠΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· Π½ΠΈΡ ΠΏΠΎΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ Ρ ΠΊΠΎΠ΄ΠΎΠΌ, ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π² HTML ΠΈ CSS Π²Π°ΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΡ.
2. ΠΡΡΠ΅ΠΊΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ
ΠΡΡΠΎΡΠ½ΠΈΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΡΠΎ Π½Π°Π±ΠΎΡ ΠΈΠ· ΠΏΡΡΠΈ ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ. ΠΠΎΠ³Π΄Π° Π²Π°ΡΠ° ΠΌΡΡΡ Π½Π°Π²ΠΎΠ΄ΠΈΡΡΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ, ΠΎΠ½ΠΈ ΡΠ΅Π°Π³ΠΈΡΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ. ΠΡΠ΅ ΠΎΠ½ΠΈ Π³Π»Π°Π΄ΠΊΠΈΠ΅, ΠΏΡΠΎΡΡΡΠ΅ ΠΈ Π³ΠΎΡΠΎΠ²Ρ ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π½Π° Π²Π°ΡΠ΅ΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅ ΠΈΠ»ΠΈ ΡΠ΅Π»Π΅Π²ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅.
3. CSS ΡΡΡΠ΅ΠΊΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅
ΠΡΡΠΎΡΠ½ΠΈΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΠΎΡ ΠΏΡΡΠ½Π°Π΄ΡΠ°ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠΆΠΈΠ²ΡΡ Π²Π°ΡΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΡΡΡ ΡΠ°ΠΊΠΈΠ΅, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°ΡΡ ΠΈ ΡΠΌΠ΅Π½ΡΡΠ°ΡΡ ΠΌΠ°ΡΡΡΠ°Π±, ΡΠΊΠΎΠ»ΡΠ·ΡΡ ΠΈ Π²ΡΠ°ΡΠ°ΡΡΡΡ.
4. ΠΡΠ΅Π°ΡΠΈΠ²Π½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΌΠ΅Π½Ρ
ΠΡΡΠΎΡΠ½ΠΈΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΡΠΈ ΡΡΡΠ΅ΠΊΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ CSS ΠΏΠΎΠΌΠΎΠ³ΡΡ Π²Π°ΡΠ΅ΠΌΡ Π²Π΅Π±-ΡΠ°ΠΉΡΡ Π²ΡΠ΄Π΅Π»ΠΈΡΡΡΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠΌ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠΎΠΌ Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ.
5. ΠΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π½Π° Π·Π½Π°ΡΠΊΠΈ ΡΠΎΡΠΈΠ°Π»ΡΠ½ΡΡ ΡΠ΅ΡΠ΅ΠΉ
ΠΡΡΠΎΡΠ½ΠΈΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΡΠ²ΠΈΠ΄ΡΡ ΠΊΠ»Π°ΡΡΠ½ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ ΡΠΎΡΠΈΠ°Π»ΡΠ½ΠΎΠΉ ΡΠ΅ΡΠΈ. ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Ρ ΠΎΡΠΎΡΠ΅ΠΉ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΎΠΉ, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΈ ΠΏΠΎΠ΄Π΅Π»ΠΈΠ»ΠΈΡΡ Π²Π°ΡΠΈΠΌ ΡΠ°ΠΉΡΠΎΠΌ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ.
6. ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°
ΠΡΡΠΎΡΠ½ΠΈΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
Π£Π²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠ΅ ΠΌΠ°ΡΡΡΠ°Π±Π° ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΡΠΈΠ»Ρ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΡΡΠ΅ΠΊΡΠ° ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΡΠΎ ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΠΈΡ Π΄Π»Ρ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ Π°ΡΠΏΠ΅ΠΊΡΠ° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
7. ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΠ΅ΡΠ΅Π²ΠΎΡΠΎΡΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°
Β
Π‘ΠΌ. ΠΏΠ΅ΡΠΎ CSS Card Flip On Hover ΠΎΡ Ananya Neogi (@ananyaneogi) Π½Π° ΠΠΎΠ΄ΠΠ΅Π½Π΅.
ΠΡΡΠΎΡΠ½ΠΈΠΊ ΠΊΠΎΠ΄Π°
Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΡΡΡΠ΅ΠΊΡ ΠΏΠ΅ΡΠ΅Π²ΠΎΡΠ°ΡΠΈΠ²Π°Π½ΠΈΡ ΠΊΠ°ΡΡΡ, ΡΡΠΎΠ±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ Π½Π° ΡΠΊΡΠ°Π½Π΅ Π΄Π»Ρ ΠΎΠ±ΠΌΠ΅Π½Π° Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠ΅ΠΉ. ΠΡΠΎ ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΡΡΡΠ°Π½ΠΈΡΡ ΠΊΠΎΠ½ΡΠ°ΠΊΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΡΠΈΠ»Ρ, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Ρ Π²Π°ΡΠΈ ΡΠΎΡΡΡΠ΄Π½ΠΈΠΊΠΈ ΠΈΠ»ΠΈ ΡΠ°Π·Π½ΡΠ΅ ΠΊΠ»ΠΈΠ΅Π½ΡΡ, ΠΊΠΎΡΠΎΡΡΡ Π²Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΠ΅.
8. ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΠΎΠ²ΠΎΡΠΎΡΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°
ΠΡΡΠΎΡΠ½ΠΈΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΠΎΠ²ΠΎΡΠΎΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π΄Π»Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΡΡΠ΅ΠΊΡΠ°. ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π·Π°Π±Π°Π²Π½ΡΠΌ ΠΈ Π±Π΅Π·Π·Π°Π±ΠΎΡΠ½ΡΠΌ ΡΠΏΠΎΡΠΎΠ±ΠΎΠΌ Π·Π°ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠΎΠ²Π°ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ.
9. ΠΡΠΈΠΎΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
ΠΡΡΠΎΡΠ½ΠΈΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΠ°ΠΉΡΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ ΠΏΠΎΠ²ΠΎΠ΄ ΠΎΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠΎΠΉ ΠΏΡΠΈΠΎΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ.
Leave a Comment