hover Π² html ΠΊΠΎΠ΄Π΅
CSS hover ΡΡΡΠ΅ΠΊΡΡ β Π΄Π»Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ, ΠΊΠ½ΠΎΠΏΠΎΠΊ, ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΡΡΡΠ»ΠΊΠΈ, Π±Π»ΠΎΠΊΠΈ ΠΈ Π΄Ρ.
ΠΡΠ΅Π½Ρ ΡΠ°ΡΡΠΎ Π½Π° ΡΠ°ΠΉΡΠ°Ρ Π²Ρ ΠΌΠΎΠ³Π»ΠΈ Π²ΡΡΡΠ΅ΡΠ°ΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ ΡΡΡΠ»ΠΎΠΊ ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. Π Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ Π·Π°Π΄Π°ΡΡ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΠΉ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ :hover Π² CSS. Π‘Π΅Π³ΠΎΠ΄Π½Ρ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠΈΠ΅ΠΌΡ Π²Π΅ΡΡΡΠΊΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠΈΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΡ ΡΠΈΡΠΊΡ, Π° Π½ΠΈΠΆΠ΅ ΠΎΠΏΡΠ±Π»ΠΈΠΊΡΠ΅ΠΌ ΡΠΏΠΈΡΠΎΠΊ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΡ ΠΈΠ· Π½ΠΈΡ (Ρ ΠΊΡΠ°ΡΠΊΠΈΠΌΠΈ ΠΎΠΏΠΈΡΠ°Π½ΠΈΡΠΌΠΈ/ΠΏΠΎΡΡΠ½Π΅Π½ΠΈΠ΅ΠΌΠΈ). ΠΡΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ ΡΠ°Π·Π΄Π΅Π»ΠΈΠΌ Π½Π°:
ΠΠ°Π½Π½ΡΠ΅ Π³ΡΡΠΏΠΏΡ Π²Π΅ΡΡΠΌΠ° ΡΡΠ»ΠΎΠ²Π½Ρ, Ρ.ΠΊ. ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΏΠ΅ΡΠ΅ΡΠ΅ΠΊΠ°ΡΡΡΡ ΠΈ ΡΠ²Π»ΡΡΡΡΡ ΡΠ½ΠΈΠ²Π΅ΡΡΠ°Π»ΡΠ½ΡΠΌΠΈ, ΡΠΎ Π΅ΡΡΡ ΠΌΠΎΠ³ΡΡ Π²ΡΡΡΠ΅ΡΠ°ΡΡΡΡ ΠΏΡΠΈ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠΈ ΡΠ°Π·Π½ΡΡ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ².
Hover ΡΡΡΠ΅ΠΊΡ Π² CSS ΡΡΠΈΠ»ΡΡ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΡΡΡ ΡΠΏΡΠ°Π²Π° ΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
Π§Π°ΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΌΠ΅Ρ Π°Π½ΠΈΠ·ΠΌ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΈΠΌΠ΅Π½Π½ΠΎ Π΄Π»Ρ ΡΡΡΠ»ΠΎΠΊ Π΄Π°Π±Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΈΡ ΡΠ²Π΅Ρ ΠΈΠ»ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ/ΡΠ±ΡΠ°ΡΡ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅. ΠΠ΄Π½Π°ΠΊΠΎ ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π·Π°Π΄Π°Π½ ΠΈ Π΄ΡΡΠ³ΠΈΠΌ Π±Π»ΠΎΠΊΠ°ΠΌ, ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ, ΡΠ΅ΠΊΡΡΠ°ΠΌ ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΠΏΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ.
ΠΡΡΠ°ΡΠΈ, ΠΏΡΠΈ Π·Π°Π΄Π°Π½ΠΈΠΈ ΡΡΠΈΠ»Π΅ΠΉ ΡΡΡΠ»ΠΎΠΊ ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΌΠΎΠ³ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ :link β Π΄Π»Ρ Π½Π΅ ΠΏΠΎΡΠ΅ΡΠ΅Π½Π½ΡΡ Π΅ΡΠ΅ ΡΡΡΠ°Π½ΠΈΡ, :visited β ΡΠ΅Ρ , Π³Π΄Π΅ Π²Ρ ΡΠΆΠ΅ Π±ΡΠ»ΠΈ + :active ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ Π°ΠΊΡΠΈΠ²Π½ΡΠΉ ΡΠ΅ΠΉΡΠ°Ρ Π°Π΄ΡΠ΅Ρ. ΠΠ°ΠΆΠ½ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΡΡ hover ΡΡΡΠ΅ΠΊΡ Π² CSS ΠΏΠΎΡΠ»Π΅ :link ΠΈ :visited, Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΈ ΡΡΡΠ΅ΡΡΠ²ΡΡΡ.
ΠΠ΅ΡΠ΅ΠΉΠ΄Π΅ΠΌ ΠΎΡ ΡΠ΅ΠΎΡΠΈΠΈ ΠΊ ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅. ΠΠΈΠΆΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ ΡΠΏΠΈΡΠΎΠΊ ΠΏΠΎΠ»Π΅Π·Π½ΡΡ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»ΠΎΠ² ΠΈ ΡΠ½ΠΈΠΏΠΏΠ΅ΡΠΎΠ² β ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΡΠ΅ ΠΏΠΎ ΡΡΡΠ»ΠΊΠ°ΠΌ Π΄Π°Π±Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΈΡΡ ΠΎΠ΄Π½ΠΈΠΊΠΈ.
Hover ΡΡΡΠ΅ΠΊΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈ ΡΡΡΠ»ΠΎΠΊ
ΠΠ°ΠΊ ΠΌΡ ΡΠΆΠ΅ Π³ΠΎΠ²ΠΎΡΠΈΠ»ΠΈ Π²ΡΡΠ΅, ΡΡΠΎ ΡΠ°ΠΌΠ°Ρ ΠΏΠΎΠΏΡΠ»ΡΡΠ½Π°Ρ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΡ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ² Π½Π° ΡΠ°ΠΉΡΠ΅, Π³Π΄Π΅ Π²ΡΡΡΠ΅ΡΠ°Π΅ΡΡΡ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΠΉ ΠΏΡΠΈΠ΅ΠΌ. ΠΠΎΡ Π²Π°ΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² ΠΏΠΎ ΡΠ΅ΠΌΠ΅.
ΠΡΠΎΡΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ Π΄Π»Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ
Π Π΄Π°Π½Π½ΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Ρ 8 Π±Π°Π·ΠΎΠ²ΡΡ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΠΈΠ³ΠΈΠ½Π°Π»ΡΠ½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΠΎΠ±ΡΠ³ΡΠ°ΡΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠ΅ hover ΡΡΡΠ΅ΠΊΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ: Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ, ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΠ½Π°, 3D ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠ΅, Π½Π°ΠΊΠ»ΠΎΠ½ ΠΈ Ρ.ΠΏ. ΠΡΠ΅ ΠΊΠΎΠ΄Ρ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΏΡΠΎΡΡΡΠ΅, Π²ΠΎΡ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π½ΠΈΡ :
ΠΠ΅ΠΎΠ±ΡΡΠ½ΡΠΉ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ½ΡΠΉ Π² ΠΊΠ½ΠΎΠΏΠΊΠ΅
ΠΠ΄Π΅ΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΡΡΠΊΠΈΠΉ ΡΠ²Π΅ΡΠ½ΠΎΠΉ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π° ΠΏΠ΅ΡΠ΅Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΊΡΡΡΠΎΡΠ°. Π ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ CSS ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅, Π° ΡΠ°ΠΊΠΆΠ΅ ΡΠΊΡΠΈΠΏΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΠΌΡΡΠΊΠΈ. Π Π΅Π·ΡΠ»ΡΡΠ°Ρ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΡΠΎ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΎΡΠΈΠ³ΠΈΠ½Π°Π»ΡΠ½ΠΎ. ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΌΠ΅ΡΠΎΠ΄Π° ΠΈΡΠΈΡΠ΅ ΡΡΡ.
Sullivan Buttons
Π€ΠΈΡΠΊΠ° Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΡΠ°Π·Π½ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΊΡΠΎΠΌΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ²Π΅ΡΠ° ΡΠΎΠ½Π° Π·Π°ΠΏΡΡΠΊΠ°Π΅ΡΡΡ ΡΠ°ΠΊΠΆΠ΅ Π½Π΅Π±ΠΎΠ»ΡΡΠ°Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Ρ ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ (ΠΏΡΠΈΡΠ΅ΠΌ Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΠ²ΠΎΡ).
CSS Icons on Hover
ΠΠΎΠ΄Π±ΠΎΡΠΊΠ° ΠΈΠ· 5ΡΠΈ ΠΏΡΠΎΡΡΡΡ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π·Π°Π΄Π°ΡΠΈ. ΠΠΎ Π²ΡΠ΅Ρ ΡΠ»ΡΡΠ°ΡΡ Π·Π°Π΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°Π½Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ ΡΠΏΡΠ°Π²Π°/ΡΠ»Π΅Π²Π° ΠΎΡ ΡΠ΅ΠΊΡΡΠ° Π»ΠΈΠ±ΠΎ Π·Π°ΠΌΠ΅Π½ΡΡΡ Π΅Π³ΠΎ.
Button Hover Effects
ΠΠΎ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ Ρ ΠΏΡΠΎΡΠ»ΡΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠΌ ΡΡΠΈ 12 ΡΡΠ½ΠΊΡΠΈΠΉ ΡΡΠ°Π±Π°ΡΡΠ²Π°Π½ΠΈΡ Π²ΡΠ³Π»ΡΠ΄ΡΡ ΠΊΡΠ΄Π° ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½Π΅Π΅: ΠΊΠ°ΠΊ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎ, ΡΠ°ΠΊ ΠΈ Π² ΠΏΠ»Π°Π½Π΅ ΠΊΠΎΠ΄Π°. ΠΠ΅ ΠΎΠ±ΠΎΡΠ»ΠΎΡΡ Π±Π΅Π· JS.
Nav Hovers
ΠΠ΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΈΡΠ΅ΠΊ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΡΠ΄Π΅Π»Π°ΡΡ Π±ΠΎΠ»Π΅Π΅ Π½Π΅ΠΎΠ±ΡΡΠ½ΡΠ΅ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΡ ΡΡΡΠ»ΠΎΠΊ Π½Π° CSS Π½Π΅ΠΆΠ΅Π»ΠΈ Ρ Π±Π°Π·ΠΎΠ²ΡΠΌ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ text-decoration. Π€ΠΎΠ½ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π·Π°ΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ ΡΠ°Π·Π½ΡΠΌΠΈ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠΌΠΈ ΡΡΡΠ΅ΠΊΡΠ°ΠΌΠΈ.
Info on Hover
Π€ΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΡ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΡ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΎΠΊ ΡΠ΅ΠΉΡΠ°Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Π²ΠΎ Π²ΡΠ΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ , Π½ΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΡΠ°Π±ΠΎΡΠ°ΡΡ Π΅Π΅ ΠΏΠΎΠ΄ ΡΠ²ΠΎΠΈ Π½ΡΠΆΠ΄Ρ. Π ΡΠ΅ΠΊΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΡΡΠ°Π±Π°ΡΡΠ²Π°Π½ΠΈΠ΅ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΠ° ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΡΠ΅Π³Π° dfn, ΡΠΌΠΎΡΡΠΈΡΡΡ ΡΡΠΈΠ»ΡΠ½ΠΎ. ΠΠΎΠ΄ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΊΠΎΠΌΠΏΠ°ΠΊΡΠ½ΡΠΉ HTML + CSS.
Mana Button
ΠΠ΄ΠΈΠ½ ΠΈΠ· ΡΠ°ΠΌΡΡ ΠΎΡΠΈΠ³ΠΈΠ½Π°Π»ΡΠ½ΡΡ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² hover ΡΡΡΠ΅ΠΊΡΠ° Π² Π±Π»ΠΎΠΊΠ°Ρ β ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ ΡΠ»ΠΎΠ²Π½ΠΎ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π΅Π³ΠΎ ΠΆΠΈΠ΄ΠΊΠΎΡΡΡΡ. Π ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ CSS, HTML ΠΈ SVG. Π ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΡΠ΅ΠΌΠ°ΡΠΈΠΊΠ΅ ΡΠ°ΠΉΡΠΎΠ² Π΄Π°Π½Π½ΡΠΉ ΡΠ½ΠΈΠΏΠΏΠ΅Ρ ΠΎΠ΄Π½ΠΎΠ·Π½Π°ΡΠ½ΠΎ Π±ΡΠ΄Π΅Ρ Π½Π°Ρ ΠΎΠ΄ΠΊΠΎΠΉ.
Hover ΡΡΡΠ΅ΠΊΡΡ Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ
15 Π±Π°Π·ΠΎΠ²ΡΡ ΠΏΡΠΈΠ΅ΠΌΠΎΠ²
ΠΠ΅ ΡΠΌΠΎΡΡΡ Π½Π° ΡΠΎ, ΡΡΠΎ ΡΡΠ°ΡΡΡ Π±ΡΠ»Π° ΠΎΠΏΡΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½Π° Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π΄Π°Π²Π½ΠΎ ΠΌΠ΅ΡΠΎΠ΄Ρ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΠΈ ΡΠ΅ΠΉΡΠ°Ρ. ΠΠ΄Π΅ΡΡ, Π½Π°Π²Π΅ΡΠ½ΠΎΠ΅, ΡΠΎΠ±ΡΠ°Π½Ρ Π²ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠ΅ ΡΠΈΠΏΠΎΠ²ΡΠ΅ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΡ Π΄Π»Ρ Π³ΡΠ°ΡΠΈΠΊΠΈ: Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²ΠΈΠ΄ΠΎΠ² Π·ΡΠΌΠ°, ΠΏΠΎΠ²ΠΎΡΠΎΡΡ, ΡΠ°Π·ΠΌΡΡΠΈΠ΅, Ρ/Π±, ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ, ΡΠΈΠ»ΡΡΡΡ, ΡΠΈΡΠ½ΠΈΠ΅ ΠΈ Π΄Ρ. ΠΡΠ΅Π½Ρ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π».
ΠΡΠ°ΡΠΈΠ²ΡΠ΅ hover ΡΡΡΠ΅ΠΊΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ
ΠΠΎΠ΄Π±ΠΎΡΠΊΠ° ΠΈΠ· 30 ΠΏΡΠΈΡΡΠ½ΡΡ ΠΈ ΠΏΠ»Π°Π²Π½ΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ. ΠΠ° ΡΡΠ΅Ρ ΠΏΡΠΎΡΡΡΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΡ ΠΌΠ°Π½ΠΈΠΏΡΠ»ΡΡΠΈΠΉ Π² Π²ΠΈΠ΄Π΅ Π·ΡΠΌΠ°, Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ Π»ΠΈΠ½ΠΈΠΉ ΡΠΎΠ·Π΄Π°Π΅ΡΡΡ Ρ ΠΎΡΠΎΡΠΈΠΉ ΠΊΠΎΠΌΠΏΠ»Π΅ΠΊΡΠ½ΠΎΠ΅ Π²ΠΏΠ΅ΡΠ°ΡΠ»Π΅Π½ΠΈΠ΅. ΠΠ΅ΡΡΠ°ΠΌΠΈ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π΅ΡΡΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΈ Β«ΠΏΠΎΠ΄ΡΡΠ³ΠΈΠ²Π°Π΅ΡΡΡΒ» ΠΊΡΠ°ΡΠΊΠΎΠ΅ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅. ΠΡΠ»ΠΈΡΠ½ΡΠΉ Π²Π°ΡΠΈΠ°Π½Ρ Π΄Π»Ρ ΠΏΠΎΡΡΡΠΎΠ»ΠΈΠΎ.
Barberpole Hover Animation
ΠΠ΅ ΡΠ»ΠΎΠΆΠ½Π°Ρ Π½Π° ΠΏΠ΅ΡΠ²ΡΠΉ Π²Π·Π³Π»ΡΠ΄ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π² ΠΈΡΠΎΠ³Π΅ ΡΠΌΠΎΡΡΠΈΡΡΡ ΠΎΡΠ΅Π½Ρ ΠΊΠ»Π°ΡΡΠ½ΠΎ ΠΈ Π½Π΅ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎ.
CSS hover ΡΡΡΠ΅ΠΊΡΡ Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ
ΠΡΠ»ΠΈΡΠ½Π°Ρ ΠΏΠΎΠ΄Π±ΠΎΡΠΊΠ° ΡΠ½ΠΈΠΏΠΏΠ΅ΡΠΎΠ² ΠΈ ΠΊΠΎΠ΄ΠΎΠ² ΠΏΠΎ ΡΠ΅ΠΌΠ΅ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² ΡΡΠ°ΡΡΠ΅ Ρ css-tricks.com. ΠΡΠ΅ ΡΡΠΈ ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΡΠ΅Ρ ΡΠΎΡ ΡΠ°ΠΊΡ, ΡΡΠΎ Π² ΠΏΡΠΎΡΠ΅ΡΡΠ΅ ΡΠ°Π±ΠΎΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΠΌΠ΅ΡΡΠΎΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΡ ΠΊΡΡΡΠΎΡΠ°. ΠΡΠΎ, Π² ΡΠ²ΠΎΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΎΡΠΈΠ³ΠΈΠ½Π°Π»ΡΠ½ΡΠ΅ ΡΠ΅Π°ΠΊΡΠΈΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ:
ΠΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ ΡΠ»ΠΎΠΆΠ½ΡΡ ΡΠ΅ΡΠ΅Π½ΠΈΡΡ Javascript ΠΈ jQuery Π΄Π»Ρ hover ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ°Π·Π½ΠΎΠΎΠ±ΡΠ°Π·ΠΈΡΡ ΠΈ ΡΠ»ΡΡΡΠΈΡΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ.
Direction Aware Hover Goodness
Direction Aware Tiles using clip-path Pure CSS
ΠΡΡΠ°Π»ΡΠ½ΡΠ΅ ΡΠΈΡΠΊΠΈ ΠΈΡΠΈΡΠ΅ Π² ΠΎΡΠΈΠ³ΠΈΠ½Π°Π»ΡΠ½ΠΎΠΉ ΡΡΠ°ΡΡΠ΅.
Animatism
Π ΡΡΠΎΠΉ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅ Π±ΠΎΠ»Π΅Π΅ 100 ΠΏΡΠΎΡΡΡΡ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² Β«Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈΒ» ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΈΠ»ΠΈ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ² ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. Π‘ ΠΏΠΎΠΌΠΎΡΡΡ Π΄Π°Π½Π½ΡΡ ΡΡΠ½ΠΊΡΠΈΠΉ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΡΠ°Π·Π½ΠΎΠ΅ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΎΠΊ, Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ², ΡΠ΅ΠΊΡΡΠΎΠ², ΡΠΎΡΠΈΠ°Π»ΡΠ½ΡΡ ΠΈΠΊΠΎΠ½ΠΎΠΊ ΠΈ Ρ.ΠΏ. ΠΡΡΡ Π²Π°ΡΠΈΠ°Π½ΡΡ Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ, Π½Π°ΠΊΠ»Π°Π΄ΠΊΠ°ΠΌΠΈ ΠΏΠΎΠ»ΡΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΠ½Π°.
Caption Hover Effects
ΠΠΎ ΡΡΡΠ»ΠΊΠ΅ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ 7 CSS3 hover ΡΡΡΠ΅ΠΊΡΠΎΠ² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² β ΠΊΠΎΠ³Π΄Π° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΡΠ²ΠΈΠ΄ΠΈΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΠΉ Π±Π»ΠΎΠΊ Ρ ΡΠ°ΠΉΡΠ»ΠΎΠΌ, ΠΊΡΠ°ΡΠΊΠΈΠΌ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ΠΌ ΠΈ ΡΡΡΠ»ΠΊΠΎΠΉ Π΄Π»Ρ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π°. ΠΠ΅Π»ΡΠ·Ρ ΡΠΊΠ°Π·Π°ΡΡ, ΡΡΠΎ ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΎΡΠ΅Π½Ρ ΠΎΡΠΈΠ³ΠΈΠ½Π°Π»ΡΠ½ΡΠ΅, Π½ΠΎ ΠΎΠ½ΠΈ ΠΎΠ΄Π½ΠΎΠ·Π½Π°ΡΠ½ΠΎ ΠΏΠΎΠΌΠΎΠ³ΡΡ ΡΠ°Π·Π½ΠΎΠΎΠ±ΡΠ°Π·ΠΈΡΡ ΡΡΠ°ΡΠΈΡΠ½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ½ΡΠΉ ΠΏΡΠΎΠ΅ΠΊΡ.
CSS Hover Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ
Hover.css
ΠΡΠΎΠ΅ΠΊΡ ΠΏΠΎΠ΄ Π½Π΅Π·Π°ΠΌΡΡΠ»ΠΎΠ²Π°ΡΡΠΌ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ Hover.css ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΡ CSS3 ΡΡΡΠ΅ΠΊΡΠΎΠ² Π΄Π»Ρ ΡΡΡΠ»ΠΎΠΊ, ΠΊΠ½ΠΎΠΏΠΎΠΊ, Π±Π»ΠΎΠΊΠΎΠ² ΠΈ Ρ.ΠΏ. ΠΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π³ΠΎΡΠΎΠ²ΡΠΉ ΠΊΠΎΠ΄ ΠΈ/ΠΈΠ»ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π² Π½Π΅Π³ΠΎ ΡΠ²ΠΎΠΈ ΠΌΠΎΠ΄ΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ. ΠΠ΄Π΅ΡΡ ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎΠ³ΠΎ: 2D/3D ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΡ, ΡΠ°Π±ΠΎΡΠ° Ρ ΡΠΎΠ½ΠΎΠΌ ΠΈ ΡΠ°ΠΌΠΊΠ°ΠΌΠΈ, ΡΠ΅Π½ΠΈ, ΠΈΠΊΠΎΠ½ΠΊΠΈ. Π Π΅ΡΠ΅Π½ΠΈΠ΅ Π΄ΠΎΡΡΡΠΏΠ½ΠΎ Π² CSS, LESS ΠΈ Sass ΡΠΎΡΠΌΠ°ΡΠ°Ρ .
Imagehover.css
ΠΡΠ΅ ΠΎΠ΄Π½Π° Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π·Π°Π΄Π°ΡΡΠ°Ρ hover ΡΡΡΠ΅ΠΊΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°ΠΌ β Π² Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ Π½Π°ΠΉΠ΄Π΅ΡΠ΅ 44 Π²Π°ΡΠΈΠ°Π½ΡΠ° ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠΉ (ΠΏΡΠ΅ΠΌΠΈΠ°Π»ΡΠ½ΡΠΉ Π½Π°Π±ΠΎΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΈΡ Π² 5 ΡΠ°Π· Π±ΠΎΠ»ΡΡΠ΅). Π’ΡΡ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ LESS ΠΈ SCSS, Π²Π΅ΡΠΈΡ ΡΡΠΎ Π΄Π΅Π»ΠΎ Π»ΠΈΡΡ 19ΠΊΠ±. ΠΠ° ΡΠ°ΠΉΡΠ΅ ΠΈΠΌΠ΅Π΅ΡΡΡ ΡΡΡΠ°Π½ΠΈΡΠ° Ρ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠ΅ΠΉ Π²ΡΠ΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡΠΈΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ². ΠΡΠ΅Π΄Π»Π°Π³Π°Π΅ΡΡΡ ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΡ ΡΠΈΡΠ΅ΠΊ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ Π²ΡΡΡΠ΅ΡΠ°Π»ΠΈΡΡ Π²ΡΡΠ΅.
iHover
Π ΠΏΡΠΎΠ΅ΠΊΡΠ΅ iHover Π±ΠΎΠ»Π΅Π΅ 30 ΡΠ°Π·Π½ΡΡ ΠΏΡΠΈΠ΅ΠΌΠΎΠ² Π΄Π»Ρ ΠΊΡΡΠ³Π»ΡΡ ΠΈ ΠΊΠ²Π°Π΄ΡΠ°ΡΠ½ΡΡ ΠΏΠΎ ΡΠΎΡΠΌΠ°ΡΡ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ². ΠΡΠ΅ ΠΎΠ½ΠΈ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΎΡΠΈΠ³ΠΈΠ½Π°Π»ΡΠ½ΡΠ΅, ΠΏΡΠΎΡΡΡΡ Β«ΠΎΠ΄Π½ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΠ½ΡΡ Β» Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ Π² Π²ΠΈΠ΄Π΅ ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ Π·ΡΠΌΠ°/Π²ΡΠ»Π΅ΡΠ°Π½ΠΈΡ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π½Π΅Ρ. Π Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π° Π·Π°Π΄Π°ΡΠ° Π½Π° ΡΠΈΡΡΠΎΠΌ CSS3 + HTML (ΠΏΠ»ΡΡ Scss ΡΠ°ΠΉΠ»Ρ Π²ΠΊΠ»ΡΡΠ΅Π½Ρ). ΠΡΠ»ΠΈΡΠ½Π°Ρ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ Ρ Bootstrap 3, Π΅ΡΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ.
ΠΡΠΎΠ³ΠΎ. ΠΠ°Π΄Π΅Π΅ΠΌΡΡ ΡΡΠΈ css hover ΡΡΡΠ΅ΠΊΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ, Π±Π»ΠΎΠΊΠΈ, ΡΡΡΠ»ΠΊΠΈ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ ΠΏΠΎΠΌΠΎΠ³Π»ΠΈ Π²Π°ΠΌ ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ Π² Π΄Π°Π½Π½ΠΎΠΉ ΡΠ΅ΠΌΠ΅. Π‘Π°ΠΌΡΠ΅ ΡΠ΄Π°ΡΠ½ΡΠ΅, Π½Π° Π²Π°Ρ, Π²Π·Π³Π»ΡΠ΄ ΡΠ΅ΡΠ΅Π½ΠΈΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²Π½Π΅Π΄ΡΠΈΡΡ Π² ΡΠ²ΠΎΠΈΡ ΡΠ°ΠΉΡΠ°Ρ β Π±ΡΠ΄Ρ ΡΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ»Π½ΠΎΡΠ΅Π½Π½ΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ ΠΈΠ»ΠΈ ΠΏΡΠΎΡΡΠΎ ΠΈΠ½ΡΠ΅Π³ΡΠ°ΡΠΈΡ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ Π²Π°ΡΠΈΠ°Π½ΡΠ° ΠΊΠΎΠ΄Π°.
ΠΡΠ»ΠΈ Π·Π½Π°Π΅ΡΠ΅ Π΅ΡΠ΅ ΠΊΠ°ΠΊΠΈΠ΅-ΡΠΎ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠ΅ ΡΠΈΡΠΊΠΈ ΠΈ ΡΠ½ΠΈΠΏΠΏΠ΅ΡΡ, ΠΏΡΠΈΡΡΠ»Π°ΠΉΡΠ΅ URLβΡ Π½Π° Π½ΠΈΡ Π² ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΡΡ . Π ΠΌΡ Π² Π±ΡΠ΄ΡΡΠ΅ΠΌ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΠΌ ΡΡΠ°ΡΡΡ.
Π‘ΠΎ ΡΠ»ΠΎΠΆΠ½ΡΠΌΠΈ ΠΏΡΠΈΠΌΠ΅ΡΠ°ΠΌΠΈ, ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ, ΠΌΠ°Π»ΠΎ ΡΡΠΎ ΠΏΠΎΠ½ΡΡΠ½ΠΎ, Π½ΠΎ Π²ΠΎΡ ΠΏΡΠΎ Ρ ΡΠ²Π΅Ρ ΡΡΡΠ΅ΠΊΡ ΡΠ΅ΠΏΠ΅ΡΡ Π±ΡΠ΄Ρ ΡΠΎΡΠ½ΠΎ Π·Π½Π°ΡΡ.
ΠΠ°ΡΠΈΠ½Π°, Π½ΡΠΆΠ½ΠΎ Π½Π°ΡΠΈΠ½Π°ΡΡ Ρ ΠΌΠ°Π»ΠΎΠ³ΠΎ:)
ΠΠΎΠ»Π΅Π·Π½ΠΎΠ΅ ΡΡΠΈΠ²ΠΎ Π΄Π»Ρ Π½ΠΎΠ²ΠΈΡΠΊΠΎΠ² ΠΎΠ΄Π½ΠΎΠ·Π½Π°ΡΠ½ΠΎ!
ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ, ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ, Π½Π΅ΡΠ΅Π°Π»ΡΠ½ΠΎ ΠΊΡΡΡΡΠ΅.. Π²ΡΡΠ΄ Π»ΠΈ ΠΊΠΎΠ³Π΄Π°-ΡΠΎ ΡΠΌΠΎΠ³Ρ ΡΠ°ΠΊΠΎΠ΅ ΠΏΠΎΠ²ΡΠΎΡΠΈΡΡ, Ρ ΠΎΡΡ Ρ ΡΠ°ΠΊ Π²Π΅Π±ΠΌΠ°ΡΡΠ΅Ρ-Π»ΡΠ±ΠΈΡΠ΅Π»Ρ ΡΠΊΠΎΡΠ΅Π΅
ΠΠ°ΡΠ°Ρ, Π»ΡΠ΄ΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π΄Π΅Π»Π°ΡΡ ΡΠ°ΠΊΠΈΠ΅ Β«Π·Π°Π³ΠΎΡΠΎΠ²ΠΊΠΈΒ», ΡΠ°Π±ΠΎΡΠ°ΡΡ Π²ΠΎ ΡΡΠΎΠ½ΡΠ΅Π½Π΄Π΅ Π½Π΅ ΠΎΠ΄ΠΈΠ½ Π³ΠΎΠ΄, ΡΠ°ΠΊ ΡΡΠΎ ΡΡΠΎ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎ (ΠΊΠ°ΠΊ Π΄Π»Ρ ΠΏΡΠΎΡΠΈ).
ΠΠ½Π΅ ΠΊΠ°ΠΊ Π½ΠΎΠ²ΠΈΡΠΊΡ ΠΎΡΠ΅Π½Ρ Π½ΡΠΆΠ½Π°Ρ ΡΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ! ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΡ.
Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ Π·Π° Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ, Π° ΡΠΎ ΡΠ²ΠΎΠ΅ΠΉ ΡΠ°Π½ΡΠ°Π·ΠΈΠΈ ΡΠΆΠ΅ Π½Π΅ Ρ Π²Π°ΡΠ°Π΅Ρ.
CSS3 hover effects. ΠΠΎΡΠ°Π³ΠΎΠ²ΡΠΉ ΡΡΡΠΎΡΠΈΠ°Π»
ΠΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ ΡΡΠΎΠ³ΠΎ ΠΌΠ°Π½ΡΠ°Π»Π°, ΠΌΠΎΠ΅ΠΉ ΡΠ΅Π»ΡΡ Π±ΡΠ»ΠΎ Π²Π·ΡΡΡ ΡΡΠΈ Π΄Π΅ΡΡΡΠΊΠ° ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ², ΡΠ°ΡΡΡΡ β Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΡΡ , ΡΠ°ΡΡΡΡ β ΠΏΡΠΈΠ΄ΡΠΌΠ°Π½Π½ΡΡ ΠΌΠ½ΠΎΠΉ, ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΠΈΡ ΠΎΡ ΠΏΡΠΎΡΡΡΡ ΠΊ Π±ΠΎΠ»Π΅Π΅ ΡΠ»ΠΎΠΆΠ½ΡΠΌ, ΠΈ Π½Π° ΠΈΡ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ Π½ΠΎΠ²ΠΈΡΠΊΠ°ΠΌ, Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΠΈΠΌΠ΅Π²ΡΠΈΠΌ Π΄Π΅Π»ΠΎ Ρ CSS3 Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΠΌΠΈ, ΠΊΠ°ΠΊ ΡΡΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΠΈ ΠΊΠ°ΠΊ ΠΈΡ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ Π½Π° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅. ΠΠΌΠ΅Π½Π½ΠΎ ΠΏΠΎ ΡΡΠΎΠΉ ΠΏΡΠΈΡΠΈΠ½Π΅ ΡΡΠ°ΡΡΡ Π²ΡΡΠ»Π° ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π°Ρ, ΠΏΠΎΡΠ°Π³ΠΎΠ²Π°Ρ, ΠΌΠ½Π΅ Π±ΡΠ»ΠΎ Π²Π°ΠΆΠ½ΠΎ ΠΎΠΏΠΈΡΠ°ΡΡ ΠΈ ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡ ΠΊΠ°ΠΆΠ΄ΡΡ Π΄Π΅ΡΠ°Π»Ρ.
ΠΠ΅ΠΌΠΎ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Ρ Π»Π΅ΠΆΠ°Ρ Π·Π΄Π΅ΡΡ.
ΠΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΠ΅: ΡΡΡΠ΅ΠΊΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π² ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ , ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΠΈΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ CSS3.
ΠΠΎΠ΄Π³ΠΎΡΠΎΠ²ΠΊΠ° ΠΊ ΡΠ°Π±ΠΎΡΠ΅.
ΠΡΠ°ΠΊ, Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π½Π°ΡΠΈ ΡΡΡΠ΅ΠΊΡΡ Π½Π°ΠΌ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡ Π²ΠΎΡ ΡΠ°ΠΊΠ°Ρ ΠΏΡΠΎΡΡΠ°Ρ Π΄Π΅ΡΠΎΠ»ΡΠ½Π°Ρ html-ΡΡΡΡΠΊΡΡΡΠ°:
ΠΠ΅ΡΠΎΠ»ΡΠ½ΡΠ΅ css-ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ Π½Π°ΡΠ΅ΠΉ ΡΡΡΡΠΊΡΡΡΡ (ΠΎΠΏΡΡΡ ΠΆΠ΅, Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊΠΎΠΉ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ ΡΡΡΠ΅ΠΊΡ, ΠΎΠ½ΠΈ Π±ΡΠ΄ΡΡ ΡΠ°Π·Π»ΠΈΡΠ°ΡΡΡΡ):
ΠΡΠ½ΠΎΠ²Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° transition. ΠΡΡΠ΅ΠΊΡΡ #1.1-1.3
Π§ΡΠΎΠ±Ρ ΡΡΠΎΠ³ΠΎ Π΄ΠΎΠ±ΠΈΡΡΡΡ, Π½ΡΠΆΠ½ΠΎ, Π² ΠΏΠ΅ΡΠ²ΡΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ, ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΡ ΡΡΠΎΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ Π²ΡΡΠ΅, Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° Ρ ΡΡΡΠ΅ΠΊΡΠΎΠΌ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΌΡ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠΌ Π΅ΠΌΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ top, ΠΈ ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ Π±Π»ΠΎΠΊΠ° ΡΠ΅ΠΏΠ΅ΡΡ Π±ΡΠ΄ΡΡ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ°ΠΊ:
Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ Π΅Π³ΠΎ ΠΏΠΎΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅. ΠΠΎΡ ΡΠ°ΠΊ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ transition Π΄Π»Ρ ΡΡΡΠ΅ΠΊΡΠ° #1.1:
transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;
ΠΠ΅ΡΠ²ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΈΠΌΡ ΡΡΠΈΠ»Π΅Π²ΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π°, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π±ΡΠ΄Π΅Ρ ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°ΡΡΡΡ Π΄Π»Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ. Π Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΌΡ Π²ΡΡΡΠ°Π²ΠΈΠ»ΠΈ all β ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°ΡΡΡΡ Π±ΡΠ΄ΡΡ Π²ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°. ΠΡΠΎΡΠΎΠ΅ β ΠΎΡΠ²Π΅ΡΠ°Π΅Ρ Π·Π° Π²ΡΠ΅ΠΌΡ, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΠ΅ Π΄Π»Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ. Π’ΡΠ΅ΡΡΠ΅ β Π·Π° ΡΠΎ, ΠΊΠ°ΠΊ Π² ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ, Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ Π²ΡΠΎΡΡΠΌ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ, Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΡΡ ΡΠΊΠΎΡΠΎΡΡΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π°: Π³Π΄Π΅ Π·Π°ΠΌΠ΅Π΄Π»ΠΈΡΡΡ, Π³Π΄Π΅ ΡΡΠΊΠΎΡΠΈΡΡΡ. Π’Π°ΠΊ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π² Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΠ½Π°ΡΠ°Π»Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π±ΡΠ΄Π΅Ρ Π±ΡΡΡΡΠ΅Π΅, ΠΊ ΡΠ΅ΡΠ΅Π΄ΠΈΠ½Π΅ Π·Π°ΠΌΠ΅Π΄Π»ΠΈΡΡΡ ΠΈ Π±Π»ΠΈΠΆΠ΅ ΠΊ ΠΊΠΎΠ½ΡΡ Π²ΡΠΉΠ΄Π΅Ρ Π½Π° ΡΠ°Π²Π½ΠΎΠΌΠ΅ΡΠ½ΡΡ ΡΠΊΠΎΡΠΎΡΡΡ. Π§Π΅ΡΠ²Π΅ΡΡΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ, Π½Π°ΡΠ½Π΅ΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Ρ Π·Π°Π΄Π΅ΡΠΆΠΊΠΎΠΉ ΠΈΠ»ΠΈ Π½Π΅Ρ. ΠΡΠ»ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ°Π²Π½ΠΎ 0s β Π·Π°Π΄Π΅ΡΠΆΠΊΠΈ Π½Π΅Ρ.
ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π½Π°ΠΌ Π½Π°Π΄ΠΎ Π±ΡΠ΄Π΅Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π²Π΅Π½Π΄ΠΎΡΠ½ΡΠ΅ ΠΏΡΠ΅ΡΠΈΠΊΡΡ. Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠ΅ Π΄Π»Ρ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎΠ³ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ . ΠΠ°ΠΊ ΡΡΠΎ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ:
-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; β Π΄Π»Ρ Chrome ΠΈ Safari
-o-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; β Π΄Π»Ρ Opera
-ms-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; β Π΄Π»Ρ IE
-moz-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; β Π΄Π»Ρ Firefox
Π ΡΡΠ°ΡΡΠ΅, Π΄Π»Ρ ΠΊΡΠ°ΡΠΊΠΎΡΡΠΈ, Ρ Π±ΡΠ΄Ρ ΠΎΠΏΡΡΠΊΠ°ΡΡ ΠΏΡΠ΅ΡΠΈΠΊΡΡ, Π½ΠΎ Π½Π΅ Π·Π°Π±ΡΠ²Π°ΠΉΡΠ΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΠΈΡ Π΄Π»Ρ ΡΠ°ΠΊΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ², ΠΊΠ°ΠΊ transition, transform ΠΈ transform-origin. Π ΠΊΠΎΠ΄Π΅ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΠΏΠΎΠ΄ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ CSS (ΠΈΠ»ΠΈ Π² ΡΠ°ΠΌΠΈΡ ΡΠ°ΠΉΠ»Π°Ρ ) ΠΏΡΠ΅ΡΠΈΠΊΡΡ ΡΠΎΠΆΠ΅ Π΅ΡΡΡ.
ΠΡΠ°ΠΊ, ΠΌΡ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ ΠΏΠΎΡΡΠΈ Π²ΡΠ΅, ΡΡΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΡΡΠ΅ΠΊΡΠ°: Π½Π°ΡΠ°Π»ΡΠ½ΡΠ΅ ΡΡΠ»ΠΎΠ²ΠΈΡ ΠΈ ΡΡΠ»ΠΎΠ²ΠΈΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π° Π² ΠΊΠΎΠ½Π΅ΡΠ½ΡΡ ΡΠΎΡΠΊΡ, ΠΎΡΡΠ°Π»ΠΎΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ ΡΠ°ΠΌΠΎΠΉ ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΉ ΡΠΎΡΠΊΠΈ.
ΠΠ·ΠΌΠ΅Π½ΡΠ΅ΠΌ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ. ΠΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΡΡΠ΅ΠΊΡΡ #2.1-#2.3
Π ΡΡΡΠ΅ΠΊΡΠ΅ #2.1 ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²ΡΠ΄Π²ΠΈΠ³Π°ΡΡΡΡ ΠΈΠ· ΡΠ΅Π½ΡΡΠ° ΠΊ ΠΊΡΠ°ΡΠΌ. ΠΠΎΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ Π±Π°Π·ΠΎΠ²ΠΎΠΉ html-ΡΡΡΡΠΊΡΡΡΠΎΠΉ, Π² ΠΊΠΎΡΠΎΡΡΡ, Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΡΠΎΠ³ΠΎ ΡΡΡΠ΅ΠΊΡΠ°, Π½Π΅ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡ Π²Π½ΠΎΡΠΈΡΡ Π½ΠΈΠΊΠ°ΠΊΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ.
Π’Π΅ΠΏΠ΅ΡΡ, Π΅ΡΠ»ΠΈ ΠΌΡ Π·Π°Π΄Π°Π΄ΠΈΠΌ ΠΊΠΎΠ½Π΅ΡΠ½ΡΡ ΡΠΎΡΠΊΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ:
ΠΌΡ ΠΏΠΎΠ»ΡΡΠΈΠΌ Π½Π΅ ΡΠ°ΠΌΡΠΉ ΠΊΡΠ°ΡΠΈΠ²ΡΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ. ΠΠΎΠ»ΡΠΏΡΠΎΠ·ΡΠ°ΡΠ½Π°Ρ ΠΏΠΎΠ΄Π»ΠΎΠΆΠΊΠ° Π½ΠΈΠΊΡΠ΄Π° Π½Π΅ Π΄Π΅Π»Π°ΡΡ, ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΊΡΡΠΊΡΡΡΡΡ Π² ΡΠ΅Π½ΡΡΠ΅ ΠΈ Π½Π΅ΡΡΡΠ΅ΡΠΈΡΠ½ΠΎ ΠΎΡΡΡΠ΄Π° ΡΠ°Π·ΡΠ΅Π·ΠΆΠ°ΡΡΡΡ. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ, Ρ ΠΏΠΎΠΌΠΎΡΡΡ transition, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π½ΠΎ ΠΈ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅Π³ΠΎ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ, Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ Π΅ΠΉ ΠΌΡ ΡΠΌΠΎΠΆΠ΅ΠΌ ΡΠΊΡΡΡΡ ΠΈ ΠΏΠΎΠ΄Π»ΠΎΠΆΠΊΡ, ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² ΡΠ΅Π½ΡΡΠ΅ Π΄ΠΎ ΠΌΠΎΠΌΠ΅Π½ΡΠ°, ΠΏΠΎΠΊΠ° Π½Π΅ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡ ΠΈΡ ΠΏΠΎΠ΄Π²ΠΈΠ½ΡΡΡ.
ΠΡΡΠ΅ΠΊΡΡ #2.2 ΠΈ #2.3 ΠΏΠΎΡΡΡΠΎΠ΅Π½Ρ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΡΡΡΠ΅ΠΊΡΠ° #2.2 Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΈ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΌΡ ΡΠΌΠ΅ΡΠ°Π΅ΠΌ ΡΠ²Π΅ΡΡ Ρ Π²Π½ΠΈΠ· ΠΈ ΡΠ½ΠΈΠ·Ρ Π²Π²Π΅ΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ, Π° Π΄Π»Ρ ΡΡΡΠ΅ΠΊΡΠ° #2.3 ΡΠΏΡΠ°Π²Π° Π½Π°Π»Π΅Π²ΠΎ ΠΈ ΡΠ»Π΅Π²Π° Π½Π°ΠΏΡΠ°Π²ΠΎ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ.
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π²Π½Π΅ΡΡΠΈ Π² ΠΊΠΎΠ΄ ΡΡΡΠ΅ΠΊΡΠ° #2.1, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΡΡΠ΅ΠΊΡ #2.2:
Π ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠΌ, Π²ΡΠ΅ ΠΎΡΡΠ°Π΅ΡΡΡ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΡΠΌ.
ΠΡ Π° ΡΡΠΎΠ±Ρ ΠΈΠ· ΡΡΡΠ΅ΠΊΡΠ° #2.1 ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΡΡΠ΅ΠΊΡ #2.3, ΠΈΠ·ΠΌΠ΅Π½ΠΈΠΌ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅:
ΠΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ ΠΎ transform ΠΈ ΠΎΠ± ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠΈ/ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΡΡΠ΅ΠΊΡΡ #3.1-#3.3
ΠΡΡΠ΅ΠΊΡ #3.1 ΡΡΡΠΎΠΈΡΡΡ Π½Π° ΡΠΎΠΌ, ΡΡΠΎ, ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ, ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ ΠΎΡΠ΅Π½Ρ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ
html-ΡΡΡΡΠΊΡΡΡΡ ΠΎΡΡΠ°Π²Π»ΡΠ΅ΠΌ Π±Π°Π·ΠΎΠ²ΠΎΠΉ. Π§ΡΠΎ ΠΊΠ°ΡΠ°Π΅ΡΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π² ΡΠ°Π±Π»ΠΈΡΠ΅ ΡΡΠΈΠ»Π΅ΠΉ, ΡΠΌΠ΅Π½ΡΡΠ°ΡΡΠΈΠΌΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ transform. Transform ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΡΠ°Π½ΡΡΠΎΡΠΌΠΈΡΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ: Π²ΡΠ°ΡΠ°ΡΡ, ΠΌΠ΅Π½ΡΡΡ ΠΈΠΌ ΡΠ°Π·ΠΌΠ΅ΡΡ, Π½Π°ΠΊΠ»ΠΎΠ½ΡΡΡ, ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡ, ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡΠΎΠ²Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ²ΠΎΠΉΡΡΠ² Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π±ΠΎΠ»Π΅Π΅ ΡΠ»ΠΎΠΆΠ½ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ². ΠΠ»Ρ ΡΡΠΈΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΌΡ ΡΠ°Π·Π±Π΅ΡΠ΅ΠΌ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠ΅/ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
ΠΠ΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΠ΅ Π΄Π»Ρ ΡΠ°ΠΊΠΎΠΉ ΡΡΠ°Π½ΡΡΠΎΡΠΌΠ°ΡΠΈΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° transform β scale(x,y), Π³Π΄Π΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ x β ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΎΠ±ΡΠ΅ΠΊΡΠ° ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ, Π° y β ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ. ΠΡΠ»ΠΈ ΠΌΡ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠΌ ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π΄Π»Ρ
ΠΠ°ΠΊ Π²ΠΈΠ΄ΠΈΡΠ΅, Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡ scale Π² Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π½Π΅ Π΄Π²Π° ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ°, Π° ΠΎΠ΄ΠΈΠ½, ΠΈ ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΠΈ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ, ΠΈ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ Π½Π°Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ Π² Π΄Π²Π° ΡΠ°Π·Π°.
Π’Π΅ΠΏΠ΅ΡΡ Π½Π° hover Π½Π°ΡΠ° Π·Π°Π΄Π°ΡΠ° ΡΠΌΠ΅Π½ΡΡΠΈΡΡ ΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π΄ΠΎ ΠΈΡ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°, ΡΡΠΎ ΠΌΡ ΠΈ Π΄Π΅Π»Π°Π΅ΠΌ, Π΄ΠΎΠ±Π°Π²Π»ΡΡ ΡΡΠΈ ΡΡΠΈΠ»ΠΈ:
ΠΡΡΠ΅ΠΊΡ #3.2 ΡΡΡΠΎΠΈΡΡΡ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌΡ, Ρ ΡΠ΅ΠΌ Π»ΠΈΡΡ ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π΅ ΡΠΌΠ΅Π½ΡΡΠ°ΡΡΡΡ, Π° ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°ΡΡΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΌΡΡΠΈ. ΠΡΡΡΠ°Π²ΠΈΠΌ Π΄Π»Ρ Π½ΠΈΡ ΡΠ°ΠΊΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ scale: 0.25, Π²ΡΠ΅ ΠΏΡΠΎΡΠΈΠ΅ ΡΡΠΈΠ»ΠΈ ΠΎΡΡΠ°ΡΡΡΡ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½Ρ.
Π Π²ΠΎΡ ΡΡΡΠ΅ΠΊΡ #3.3 β ΡΡΠΎ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΡ ΠΈΠ· ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ². ΠΠ°ΠΊ Π²ΠΈΠ΄ΠΈΠΌ, ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΎΡΡΠ°Π΅ΡΡΡ Π½Π° ΡΠ²ΠΎΠ΅ΠΌ ΠΌΠ΅ΡΡΠ΅ ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΡ Π½Π΅ ΠΌΠ΅Π½ΡΠ΅Ρ, Π΄Π»Ρ Π½Π΅Π³ΠΎ ΡΡΠΈΠ»ΠΈ ΠΎΡΡΠ°ΡΡΡΡ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠ΅. Π§ΡΠΎ ΠΊΠ°ΡΠ°Π΅ΡΡΡ
Π’Π΅ΠΏΠ΅ΡΡ Π½Π°Π΄ΠΎ Π·Π°Π΄Π°ΡΡ transition, Π½ΠΎ ΡΡΡ Π²ΡΡΠ°Π΅Ρ ΡΠ°ΠΊΠΎΠΉ Π²ΠΎΠΏΡΠΎΡ: ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ½Π°ΡΠ°Π»Π° β ΠΎΠΏΡΡΡΠΈΡΡΡΡ ΠΈ Π»ΠΈΡΡ ΠΏΠΎΡΠ»Π΅ β ΡΠ²Π΅Π»ΠΈΡΠΈΡΡΡΡ Π² ΡΠ°Π·ΠΌΠ΅ΡΠ°Ρ , ΡΠΎ Π΅ΡΡΡ, Π½ΡΠΆΠ½ΠΎ Π·Π°Π΄Π°ΡΡ transition Π΄Π»Ρ ΠΎΠΏΡΡΠΊΠ°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π±Π΅Π· Π·Π°Π΄Π΅ΡΠΆΠΊΠΈ ΠΈ transition Ρ Π·Π°Π΄Π΅ΡΠΆΠΊΠΎΠΉ Π΄Π»Ρ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΡ.
ΠΠ°Π΄Π°ΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΡΠΈΠ»Π΅Π²ΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π΄Π»Ρ transition β ΠΏΡΠΎΡΡΠΎ: ΠΌΡ Π²ΡΠ΅Π³ΠΎ Π»ΠΈΡΡ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»ΡΠ΅ΠΌ ΠΈΡ ΡΠ΅ΡΠ΅Π· Π·Π°ΠΏΡΡΡΡ, Π½Π΅ Π·Π°Π±ΡΠ² ΡΠΊΠ°Π·Π°ΡΡ Π²ΡΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π°:
transition: top 0.3s linear 0s, transform 0.3s linear 0.3s;
ΠΠΎΠ±Π°Π²ΠΈΠΌ ΡΡΠΎ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ ΠΊ ΠΎΡΡΠ°Π»ΡΠ½ΡΠΌ ΡΡΠΈΠ»Π΅Π²ΡΠΌ ΠΏΡΠ°Π²ΠΈΠ»Π°ΠΌ:
ΠΠ°Π΄Π°Π΅ΠΌ ΠΊΠΎΠ½Π΅ΡΠ½ΡΡ ΡΠΎΡΠΊΡ ΡΡΠ°Π½ΡΡΠΎΡΠΌΠ°ΡΠΈΠΉ:
ΠΡΡΡΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ: rotate. ΠΠ°Π΄Π°Π΅ΠΌ βΡΠΎΡΠΊΡ Π²ΡΠ°ΡΠ΅Π½ΠΈΡβ. ΠΡΡΠ΅ΠΊΡΡ #4.1-#4.4
Π§ΡΠΎΠ±Ρ βΠΊΡΡΡΠΈΡΡβ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΡΠ²ΠΎΠΉΡΡΠ²Ρ transform Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π·Π°Π΄Π°ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ β rotate ΠΈ Π΅Π³ΠΎ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ. ΠΠ°ΠΊΠΈΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ Π΅ΡΡΡ Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡ rotate? ΠΠΎ-ΠΏΠ΅ΡΠ²ΡΡ , ΠΎΡΡ Π²ΡΠ°ΡΠ΅Π½ΠΈΡ: X, Y ΠΈΠ»ΠΈ Z. ΠΠΎ-Π²ΡΠΎΡΡΡ , ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ Π³ΡΠ°Π΄ΡΡΠΎΠ², Π½Π° ΠΊΠΎΡΠΎΡΠΎΠ΅ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ²Π΅ΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ. Π’Π°ΠΊ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ ΠΌΡ Ρ ΠΎΡΠΈΠΌ ΠΏΠΎΠ²Π΅ΡΠ½ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎ ΠΎΡΠΈ Y Π½Π° 30 Π³ΡΠ°Π΄ΡΡΠΎΠ², Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ Π±ΡΠ΄Π΅Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
html-ΡΡΡΡΠΊΡΡΡΠ° ΠΎΡΡΠ°Π΅ΡΡΡ Π±Π°Π·ΠΎΠ²ΠΎΠΉ, ΡΠ°Π²Π½ΠΎ ΠΊΠ°ΠΊ ΠΈ ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ
Π’Π΅ΠΏΠ΅ΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΌΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΊΡΡΡΠ°Π½Π΅ΡΡΡ Π½Π° Π²ΡΡΠ΅ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ΅Π½Π½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ Π³ΡΠ°Π΄ΡΡΠΎΠ². ΠΠΎ Ρ ΠΎΡΠ΅Π»ΠΎΡΡ Π±Ρ, ΡΡΠΎΠ±Ρ ΠΎΠ½ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΊΡΡΡΠΈΠ»ΡΡ, Π½ΠΎ ΠΈ, Π² ΠΎΡΡΡΡΡΡΠ²ΠΈΠ΅ hover, ΠΈΡΡΠ΅Π·Π°Π», Π° Π½Π° hover Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ Π²ΡΠ°ΡΠ°Π»ΡΡ, Π½ΠΎ ΠΈ βΠ²ΡΠΏΠ»ΡΠ²Π°Π»β. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ transform ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ scale. Π§ΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π΄Π²Π° ΠΈ Π±ΠΎΠ»Π΅Π΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ transform, Π½Π΅ Π½ΡΠΆΠ½ΠΎ ΠΏΠΈΡΠ°ΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ Π΄Π²Π°ΠΆΠ΄Ρ, ΠΌΡ ΠΏΡΠΎΡΡΠΎ ΡΡΠ°Π²ΠΈΠΌ ΡΡΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ΅ΡΠ΅Π· ΠΏΡΠΎΠ±Π΅Π». Π ΠΏΠΎΡΡΡΠΏΠ°Π΅ΠΌ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎ Ρ hover-ΡΡΠΈΠ»ΡΠΌΠΈ:
ΠΡΡΠ΅ΠΊΡ #4.2 ΡΡΡΠΎΠΈΡΡΡ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎ, ΡΠΎΠ»ΡΠΊΠΎ Π·Π°ΠΌΠ΅Π½ΡΠ΅ΠΌ ΠΎΡΡ Π²ΡΠ°ΡΠ΅Π½ΠΈΡ Π½Π° Y.
ΠΡΡΠ΅ΠΊΡ #4.3 ΡΡΡΠΎΠΈΡΡΡ, ΠΎΠΏΡΡΡ ΠΆΠ΅, ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎ. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ rotateZ() ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½Π° Π·Π°ΠΏΠΈΡΠΈ rotate(), ΠΌΡ ΠΏΡΠΎΡΡΠΎ ΠΌΠ΅Π½ΡΠ΅ΠΌ ΡΡΠΈΠ»ΠΈ Π½Π°:
ΠΡΡΠ΅ΠΊΡ #4.4 ΡΠ»ΠΎΠΆΠ½Π΅Π΅. ΠΠ½ Π±Π°Π·ΠΈΡΡΠ΅ΡΡΡ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ Π½Π° Π²ΡΠ°ΡΠ΅Π½ΠΈΠΈ ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ°, Π½ΠΎ Π΅ΡΠ΅ ΠΈ Π½Π° ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ ΡΠΎΡΠΊΠΈ, Π²ΠΎΠΊΡΡΠ³ ΠΊΠΎΡΠΎΡΠΎΠΉ ΡΠΎΠ²Π΅ΡΡΠ°Π΅ΡΡΡ Π²ΡΠ°ΡΠ΅Π½ΠΈΠ΅, Π° ΡΠ°ΠΊΠΆΠ΅ Π½Π° ΡΡΠ»ΠΎΠΆΠ½Π΅Π½Π½ΠΎΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠΈ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ° transition-timing-function ΡΠ²ΠΎΠΉΡΡΠ²Π° transition. ΠΠΎ Π½Π°ΡΠ½Π΅ΠΌ ΠΏΠΎ ΠΏΠΎΡΡΠ΄ΠΊΡ.
ΠΡΠ΅ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΎ scale ΠΈ transform-origin. ΠΡΡΠ΅ΠΊΡΡ #5.1-#5.4
ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° html-ΡΡΡΡΠΊΡΡΡΠ° ΠΈ ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ
Π, ΡΡΠΎΠ±Ρ ΠΏΡΠΎΠΈΠ·ΠΎΡΠ»ΠΎ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠ΅, Π½Π° hover:
Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΠΌΡ ΡΠΌΠ΅ΡΠ°Π΅ΠΌ ΡΠΎΡΠΊΡ, ΠΎΡ ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄, ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ Π² ΠΊΡΠ°ΠΉΠ½Π΅Π΅ Π»Π΅Π²ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, Π° ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ ΠΎΠ½Π° ΡΠ°ΠΊ ΠΈ ΠΎΡΡΠ°Π΅ΡΡΡ Π² Π΄Π΅ΡΠΎΠ»ΡΠ½ΠΎΠΌ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ β ΠΏΠΎ ΡΠ΅Π½ΡΡΡ. ΠΡΠΎΡΠΈΠ΅ ΡΡΠΈΠ»ΠΈ ΠΎΡΡΠ°ΡΡΡΡ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΡΠΌΠΈ.
Π’ΠΎΡΠΊΠ° ΡΠΌΠ΅ΡΠ΅Π½Π° Π² ΠΊΡΠ°ΠΉΠ½Π΅Π΅ Π²Π΅ΡΡ Π½Π΅Π΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ ΠΆΠ΅ β ΠΎΡΡΠ°Π΅ΡΡΡ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ. ΠΡΠΎΡΠΈΠ΅ ΡΡΠΈΠ»ΠΈ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½Ρ.
ΠΠ°ΠΊ Π΅ΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΡΠ·ΠΊΡ rotate ΠΈ transform-origin. ΠΡΡΠ΅ΠΊΡΡ #6.1-#6.3
html-ΡΡΡΡΠΊΡΡΡΠ° ΠΎΡΡΠ°Π΅ΡΡΡ Π±Π°Π·ΠΎΠ²ΠΎΠΉ, ΡΠ°Π²Π½ΠΎ ΠΊΠ°ΠΊ ΠΈ ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ
Π’Π΅ΠΏΠ΅ΡΡ, Π΅ΡΠ»ΠΈ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΡΠΌΠ΅ΡΠ°ΡΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ βΡΠΎΡΠΊΠΈ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π°β ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ Π²ΡΠ°ΡΠ΅Π½ΠΈΠ΅, ΡΠΎ ΡΠΌΠΎΠΆΠ΅ΠΌ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ Π²Π°ΡΠΈΠ°ΡΠΈΠΈ ΡΡΠΎΠ³ΠΎ ΡΡΡΠ΅ΠΊΡΠ°. Π’Π°ΠΊ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΡΡΠ΅ΠΊΡ #6.2 ΠΏΠΎΡΡΠΈ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ΅Π½ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌΡ, ΡΠΎΠ»ΡΠΊΠΎ transform-origin: center bottom; Π° Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ Π²ΡΠ°ΡΠ΅Π½ΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΎ Π½Π° ΠΏΡΠΎΡΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½ΠΎΠ΅ Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ ΡΠΎΠΌΡ, ΡΡΠΎ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΡΠ°Π»ΠΎ ΡΠ°ΠΊΠΈΠΌ transform: rotate(-180deg);
Π ΡΡΡΠ΅ΠΊΡΠ΅ #6.3 Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ Π²ΡΠ°ΡΠ΅Π½ΠΈΡ ΠΎΡΡΠ°Π΅ΡΡΡ ΡΠ°ΠΊΠΈΠΌ ΠΆΠ΅, ΠΊΠ°ΠΊ Π² #6.2, Π° βΡΠΎΡΠΊΠ° ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π°β ΡΠΌΠ΅ΡΠ΅Π½Π° Π½Π° ΡΠ΅ΡΠ΅Π΄ΠΈΠ½Ρ ΠΏΡΠ°Π²ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°: transform-origin: right center; Π ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠΌ, ΡΡΠΈΠ»ΠΈ ΠΎΡΡΠ°ΡΡΡΡ ΡΠ΅ΠΌΠΈ ΠΆΠ΅ ΡΠ°ΠΌΡΠΌΠΈ.
ΠΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΎ delay. ΠΡΡΠ΅ΠΊΡΡ #7.1-#7.3
Π‘Π΅ΠΉΡΠ°Ρ ΠΌΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π½Π°ΡΡΡΠΈΠΌ ΠΏΠΎΡΡΠ΄ΠΎΠΊ ΡΠ°Π·Π±ΠΎΡΠ° ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΈ Π½Π°ΡΠ½Π΅ΠΌ Ρ ΡΡΡΠ΅ΠΊΡΠ° #7.2, ΠΏΠΎΡΠΎΠΌ ΠΏΠ΅ΡΠ΅ΠΉΠ΄Π΅ΠΌ ΠΊ #7.3, ΠΈ Π»ΠΈΡΡ ΠΏΠΎΡΠΎΠΌ Π²Π΅ΡΠ½Π΅ΠΌΡΡ ΠΊ #7.1 ΠΊΠ°ΠΊ ΠΊ ΡΠ°ΠΌΠΎΠΌΡ ΡΠ»ΠΎΠΆΠ½ΠΎΠΌΡ ΠΈΠ· Π»ΠΈΠ½Π΅ΠΉΠΊΠΈ.
html-ΡΡΡΡΠΊΡΡΡΠ° ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡ ΡΠ°ΠΊΠ°Ρ:
Π§ΡΠΎ ΠΊΠ°ΡΠ°Π΅ΡΡΡ ΡΡΠΈΠ»Π΅ΠΉ: Π΄Π»Ρ
ΠΠΎΡ ΡΠ΅ΠΏΠ΅ΡΡ ΠΎΡΠ΅ΡΠ΅Π΄Π½ΠΎΡΡΡ Π±ΡΠ΄Π΅Ρ ΡΠΎΠ±Π»ΡΠ΄Π΅Π½Π°, ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π±ΡΠ΄ΡΡ Π΄Π²ΠΈΠ³Π°ΡΡΡΡ Π² ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅.
ΠΡΠΎΡΠΈΠ΅ ΡΡΠΈΠ»ΠΈ ΠΈΠ΄Π΅Π½ΡΠΈΡΠ½Ρ ΡΡΠΈΠ»ΡΠΌ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΡ ΡΡΡΠ΅ΠΊΡΠΎΠ².
ΠΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌ ΠΏΠΎΠ»ΡΡΠ΅Π½Π½ΡΠ΅ Π½Π°Π²ΡΠΊΠΈ Π½Π° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅. ΠΠΎΠ»ΡΡΠ΅ ΡΡΡΠΊΠΎΠ²! ΠΡΡΠ΅ΠΊΡΡ #8.1-#10.3
ΠΡ Π° Π½Π° hover ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π΅ΠΌ Π΅Π³ΠΎ:
ΠΡΠΎΡΠΈΠ΅ ΡΡΠΈΠ»ΠΈ ΠΎΡΡΠ°ΡΡΡΡ Π΄Π΅ΡΠΎΠ»ΡΠ½ΡΠΌΠΈ.
ΠΡΡΠ΅ΠΊΡΡ #8.2-#8.3 ΡΡΡΠΎΡΡΡΡ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎ. ΠΡΡ ΡΠ°Π·Π½ΠΈΡΠ° Π»ΠΈΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ Π² #8.2 ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ scaleX(), Π° Π² #8.3 β scaleY(), ΠΎ ΠΊΠΎΡΠΎΡΡΡ Ρ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΡΠ°ΡΡΠΊΠ°Π·ΡΠ²Π°Π»Π° ΠΏΡΠΈ ΡΠ°Π·Π±ΠΎΡΠ΅ ΡΡΡΠ΅ΠΊΡΠΎΠ² #3.1-#3.3
Π§ΡΠΎ ΠΊΠ°ΡΠ°Π΅ΡΡΡ html-ΡΡΡΡΠΊΡΡΡΡ, ΠΎΠ½Π° ΡΠ°ΠΊΠΎΠ²Π°:
ΠΡΠΎΡΠΈΠ΅ ΡΡΠΈΠ»ΠΈ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½Ρ ΡΡΠΈΠ»ΡΠΌ ΡΡΡΠ΅ΠΊΡΠ° #9.1
ΠΡΡΠ΅ΠΊΡ #9.3 ΡΡΡΠΎΠΈΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ. ΠΡΠΆΠ½Π° ΡΠ°ΠΊΠ°Ρ html-ΡΡΡΡΠΊΡΡΡΠ°:
ΠΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ ΡΡΠΈΠ»ΠΈ β Π΄Π΅ΡΠΎΠ»ΡΠ½ΡΠ΅.
html-ΡΡΡΡΠΊΡΡΡΠ° Π½ΡΠΆΠ½Π° ΡΠ°ΠΊΠ°Ρ:
ΠΠ° hover ΠΈΡ delay ΡΠΎΠΆΠ΅ Π±ΡΠ΄ΡΡ ΡΠ°Π·Π»ΠΈΡΠ°ΡΡΡΡ:
html-ΡΡΡΡΠΊΡΡΡΠ° Π½ΡΠΆΠ½Π° ΡΠ°ΠΊΠ°Ρ:
ΠΠ½ΡΠ΅ΡΠ΅ΡΠ½Π΅Π΅ Ρ Π½ΠΈΠΆΠ½ΠΈΠΌ ΠΏΡΠ°Π²ΡΠΌ. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΠΈΡΠΈΠ½Π° border ΡΠ°Π²Π½Π° 4px, ΠΏΡΠΎΡΡΠΎ Π·Π°Π΄Π°ΡΡ ΡΠΈΡΠΈΠ½Π΅ ΠΈ Π²ΡΡΠΎΡΠ΅ ΠΏΠΎ 100% Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ, Π½ΡΠΆΠ½ΠΎ ΠΊΠΎΠΌΠΏΠ΅Π½ΡΠΈΡΠΎΠ²Π°ΡΡ ΠΏΠΎ 8px ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ ΠΈ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ, ΡΠ΅ΠΌ Π½Π°ΠΌ ΠΈ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ calc:
ΠΡΡΠ°Π»ΠΎΡΡ Π»ΠΈΡΡ, ΡΡΠΎΠ± ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΎΠΏΡΡΠΊΠ°Π»ΠΈΡΡ Π½Π° hover, ΠΏΡΠΈΡΠ΅ΠΌ Π² ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΠΎΠΌ Π½Π°ΠΌΠΈ ΠΏΠΎΡΡΠ΄ΠΊΠ΅:
html-ΡΡΡΡΠΊΡΡΡΠ° Π½ΡΠΆΠ½Π° Π΄Π΅ΡΠΎΠ»ΡΠ½Π°Ρ, ΡΠ°Π²Π½ΠΎ ΠΊΠ°ΠΊ ΠΈ ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ
ΠΠ°Π΄Π΅ΡΡΡ, ΡΡΠ° ΡΡΠ°ΡΡΡ ΠΎΠΊΠ°Π·Π°Π»Π°ΡΡ Π΄Π»Ρ Π²Π°Ρ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ ΠΈ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎΠΉ!
Π Π°Π±ΠΎΡΠ° Ρ ΡΡΡΠ΅ΠΊΡΠ°ΠΌΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ CSS
Π‘Π΅Π»Π΅ΠΊΡΠΎΡ :hover ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡ ΡΡΠΈΠ»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ. ΠΡΠΎΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ Π²ΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π° Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΡΡΡΠ»ΠΎΠΊ. ΠΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ CSS :hover Π·Π°ΠΏΡΡΠΊΠ°Π΅ΡΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ.
Π‘ΡΠΈΠ»ΠΈ, ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΠΌΡΠ΅ Π°ΠΊΡΠΈΠ²Π°ΠΌΠΈ ΠΏΡΠ΅Π²Π΄ΠΎ-ΠΊΠ»Π°ΡΡΠ°, Π±ΡΠ΄ΡΡ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Ρ Π»ΡΠ±ΡΠΌ ΠΏΠΎΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΊΠ»Π°ΡΡΠΎΠΌ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, :link, :active ΠΈΠ»ΠΈ :visited, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΠΌΠ΅Π΅Ρ Ρ ΠΎΡΡ Π±Ρ ΠΎΠ΄ΠΈΠ½ ΡΠ°Π²Π½ΡΠΉ Π°ΡΡΠΈΠ±ΡΡ. ΠΠΎΡΡΠΎΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ hover ΠΏΠΎΡΠ»Π΅ :link ΠΈ :visit, Π½ΠΎ ΠΏΠ΅ΡΠ΅Π΄ :active.
ΠΡΠΈΠΌΠ΅Ρ ΡΡΡΠ»ΠΎΠΊ Ρ ΡΠ°Π·Π½ΡΠΌΠΈ ΡΡΠΈΠ»ΡΠΌΠΈ:
ΠΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ
ΠΡΠΈΠΌΠ΅Ρ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ:
ΠΡΡΠ³ΠΎΠΉ ΡΡΠΈΠ»Ρ
ΠΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΏΡΠΈΠΌΠ΅Ρ ΡΡΡΠ΅ΠΊΡΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ, Π½ΠΎ ΡΠΆΠ΅ Ρ Π΄ΡΡΠ³ΠΈΠΌ ΡΡΠΈΠ»Π΅ΠΌ:
ΠΠΈΠΆΠ½ΡΡ Π³ΡΠ°Π½ΠΈΡΠ° ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΡΠΎΠ½ΠΎΠΌ
ΠΡΠΈΠΌΠ΅Ρ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΡΡΡΠ»ΠΊΡ Π½ΠΈΠΆΠ½ΡΡ Π³ΡΠ°Π½ΠΈΡΠ° ΡΡΡΠΎΠΊΠΈ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π΅ΡΡΡ ΠΈ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΡΠΎΠ½ΠΎΠΌ:
Π£ΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠ΅ ΠΈΠ½ΡΠ΅Π½ΡΠΈΠ²Π½ΠΎΡΡΠΈ ΡΠ²Π΅ΡΠ°
ΠΡΡΠ΅ΠΊΡ :hover, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΈΠ½ΡΠ΅Π½ΡΠΈΠ²Π½ΠΎΡΡΠΈ ΡΠ²Π΅ΡΠ°. ΠΡΠΎ ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΠΏΡΠΈΠ²Π»Π΅ΡΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΊ Π²Π°ΠΆΠ½ΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅:
Π£Π²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠ΅ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ transform Π΄Π»Ρ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΡ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°:
ΠΡΠ°ΡΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
CSS-ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΡΡΡΠ΅ΠΊΡΠ° Π²ΡΠ°ΡΠ΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠΎΡΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
ΠΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ β ΠΏΡΠ΅Π²ΡΠ°ΡΠ΅Π½ΠΈΠ΅ ΠΊΡΡΠ³Π»ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² ΠΊΠ²Π°Π΄ΡΠ°ΡΠ½ΡΠΉ ΠΈ Π½Π°ΠΎΠ±ΠΎΡΠΎΡ
ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠ° Π³ΡΠ°Π½ΠΈΡ
ΠΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ β ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠ° Π³ΡΠ°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°. ΠΠ»Ρ Π΅Π³ΠΎ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ΅Π½ΠΈ Π΄Π»Ρ Π±Π»ΠΎΠΊΠ°:
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ: Google Chrome, Microsoft Edge, Firefox, Opera, Safari.
ΠΠ°ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅
CSS3 ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΠΊΡΠ°ΡΠΈΠ²ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π±Π΅Π· ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Java Script. ΠΡΠΎ Π΄ΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠ΅ Π²ΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ.
ΠΠ°ΠΉΡΠ΅ Π·Π½Π°ΡΡ, ΡΡΠΎ Π²Ρ Π΄ΡΠΌΠ°Π΅ΡΠ΅ ΠΏΠΎ ΡΡΠΎΠΉ ΡΠ΅ΠΌΠ΅ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π° Π² ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΡΡ . ΠΠ° ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ, ΠΏΠΎΠ΄ΠΏΠΈΡΠΊΠΈ, Π΄ΠΈΠ·Π»Π°ΠΉΠΊΠΈ, ΠΎΡΠΊΠ»ΠΈΠΊΠΈ, Π»Π°ΠΉΠΊΠΈ ΠΎΠ³ΡΠΎΠΌΠ½ΠΎΠ΅ Π²Π°ΠΌ ΡΠΏΠ°ΡΠΈΠ±ΠΎ!
ΠΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΡ ΠΈ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² CSS (hover, before, first-child ΠΈ Π΄ΡΡΠ³ΠΈΠ΅)
ΠΡΠΈΠ²Π΅ΡΡΡΠ²ΡΡ ΠΠ°Ρ, ΡΠ²Π°ΠΆΠ°Π΅ΠΌΡΠ΅ ΡΠΈΡΠ°ΡΠ΅Π»ΠΈ Π±Π»ΠΎΠ³Π°. Π‘Π΅Π³ΠΎΠ΄Π½Ρ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΠΌ ΡΠ΅ΠΌΡ ΠΈΠ·ΡΡΠ΅Π½ΠΈΡ ΠΊΠ°ΡΠΊΠ°Π΄Π½ΡΡ ΡΠ°Π±Π»ΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ. Π ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΡ ΡΡΠ°ΡΠ΅ΠΉ ΠΌΡ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π»ΠΈ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΠ΅ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ Π² CSS, Π½ΠΎ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π»ΠΈ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ°ΡΡΡ ΠΈΠ· Π½ΠΈΡ . Π Π½Π° ΠΎΡΠ΅ΡΠ΅Π΄ΠΈ Ρ Π½Π°Ρ ΠΎΡΡΠ°Π»ΠΈΡΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΠΎΠ² ΠΈ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
ΠΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΡ
ΠΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΡ β ΡΠ°Π·Π½ΠΎΠ²ΠΈΠ΄Π½ΠΎΡΡΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ², ΠΏΡΠΈΠ²ΡΠ·ΡΠ²Π°ΡΡΠΈΡ ΡΡΠΈΠ»Ρ ΠΊ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌΡ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Web-ΡΡΡΠ°Π½ΠΈΡΡ, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡΡ Π³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π½Π΅Ρ Π² ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠΌ html ΠΊΠΎΠ΄Π΅. Π’Π°ΠΊΠΈΠΌ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠΎΠΌ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΏΠ΅ΡΠ²ΡΠΉ ΡΠΈΠΌΠ²ΠΎΠ» ΠΈΠ»ΠΈ ΠΏΠ΅ΡΠ²Π°Ρ ΡΡΡΠΎΠΊΠ° Π² Π°Π±Π·Π°ΡΠ΅.
ΠΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π½Π΅ ΡΠ°ΠΌΠΈ ΠΏΠΎ ΡΠ΅Π±Π΅, Π° ΡΠΎΠ»ΡΠΊΠΎ Π² ΡΠΎΠ²ΠΎΠΊΡΠΏΠ½ΠΎΡΡΠΈ Ρ ΠΎΡΠ½ΠΎΠ²Π½ΡΠΌΠΈ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ°ΠΌΠΈ:
ΠΠ½Π°ΡΠ°Π»Π΅ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΠΌΡ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ³ΠΎ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ°, Π·Π°ΡΠ΅ΠΌ ΠΏΠΈΡΠ΅ΡΡΡ Π΄Π²ΠΎΠ΅ΡΠΎΡΠΈΠ΅, ΠΏΠΎΡΠ»Π΅ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΈΠ΄ΡΡ ΠΈΠΌΡ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΠ°Π»Π΅Π΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈ ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π°.
:first-letter
ΠΡΠΈΠ²ΡΠ·ΡΠ²Π°Π΅Ρ ΡΡΠΈΠ»Ρ ΠΊ ΠΏΠ΅ΡΠ²ΠΎΠΉ Π±ΡΠΊΠ²Π΅ ΡΠ΅ΠΊΡΡΠ° Π² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅ web-ΡΡΡΠ°Π½ΠΈΡΡ, Π΅ΡΠ»ΠΈ Π΅ΠΉ Π½Π΅ ΠΏΡΠ΅Π΄ΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Π½Π΅ ΡΠ²Π»ΡΡΡΠΈΠΉΡΡ ΡΠ΅ΠΊΡΡΠΎΠΌ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π² ΡΠ΅ΠΊΡΡΠ΅ Π±ΡΠΊΠ²ΠΈΡΡ (ΡΠ²Π΅Π»ΠΈΡΠ΅Π½Π½Π°Ρ ΠΏΠ΅ΡΠ²Π°Ρ Π±ΡΠΊΠ²Π°, Π±Π°Π·ΠΎΠ²Π°Ρ Π»ΠΈΠ½ΠΈΡ ΠΊΠΎΡΠΎΡΠΎΠΉ Π½ΠΈΠΆΠ΅ Π½Π° ΠΎΠ΄Π½Ρ ΠΈΠ»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΡΠΎΠΊ Π±Π°Π·ΠΎΠ²ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ°) ΠΈ Π²ΡΡΡΡΠΏΠ°ΡΡΠΈΠΉ ΠΈΠ½ΠΈΡΠΈΠ°Π» (ΡΠ²Π΅Π»ΠΈΡΠ΅Π½Π½Π°Ρ ΠΏΡΠΎΠΏΠΈΡΠ½Π°Ρ Π±ΡΠΊΠ²Π°, Π±Π°Π·ΠΎΠ²Π°Ρ Π»ΠΈΠ½ΠΈΡ ΠΊΠΎΡΠΎΡΠΎΠΉ ΡΠΎΠ²ΠΏΠ°Π΄Π°Π΅Ρ Ρ Π±Π°Π·ΠΎΠ²ΠΎΠΉ Π»ΠΈΠ½ΠΈΠ΅ΠΉ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ°).
Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ first-letter Π½Π° ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π²ΡΡΡΡΠΏΠ°ΡΡΠ΅Π³ΠΎ ΠΈΠ½ΠΈΡΠΈΠ°Π»Π°:
Π ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ°:
ΠΠ°ΠΊ Π²ΠΈΠ΄Π½ΠΎ Π½Π° ΡΠΊΡΠΈΠ½ΡΠΎΡΠ΅, ΠΏΠ΅ΡΠ²Π°Ρ Π±ΡΠΊΠ²Π° Π°Π±Π·Π°ΡΠ° ΡΡΠ°Π»Π° Π² Π΄Π²Π° ΡΠ°Π·Π° Π±ΠΎΠ»ΡΡΠ΅ ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ»Π° ΡΠ²Π΅Ρ Π½Π° ΠΊΡΠ°ΡΠ½ΡΠΉ.
:first-line
ΠΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½Ρ :first-line ΠΏΡΠΈΠ²ΡΠ·ΡΠ²Π°Π΅Ρ ΡΡΠΈΠ»Ρ ΠΊ ΠΏΠ΅ΡΠ²ΠΎΠΉ ΡΡΡΠΎΠΊΠ΅ ΡΠ΅ΠΊΡΡΠ° Π² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅ Π²Π΅Π± ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠΎΡΠΌΠΎΡΡΠΈΠΌ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° :first-line Π½Π° Π°Π±Π·Π°Ρ ΡΠ΅ΠΊΡΡΠ°:
:after ΠΈ :before
ΠΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΡ after ΠΈ before ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π΄Π»Ρ Π²ΡΡΠ°Π²ΠΊΠΈ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° ΠΏΠΎΡΠ»Π΅ ΠΈ ΠΏΠ΅ΡΠ΅Π΄ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°. ΠΡΠΈ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΡΠΎΠ²ΠΌΠ΅ΡΡΠ½ΠΎ ΡΠΎ ΡΡΠΈΠ»Π΅Π²ΡΠΌ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ content, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π΄Π»Ρ Π²ΡΡΠ°Π²ΠΊΠΈ.
ΠΠ°ΠΊ Π²ΠΈΠ΄ΠΈΠΌ Π² ΠΊΠΎΠ½ΡΠ΅ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π°Π±Π·Π°ΡΠ° Π²ΡΡΠ°Π²Π»Π΅Π½ ΡΠ΅ΠΊΡΡ Β«webcodius.ruΒ», ΠΊΠ°ΠΊ ΠΈ ΠΏΡΠΎΠΏΠΈΡΠ°Π½ΠΎ Π² css ΠΏΡΠ°Π²ΠΈΠ»Π΅ Π² ΡΠ²ΠΎΠΉΡΡΠ²Π΅ Β«contentΒ». ΠΡΠ»ΠΈ Π² ΠΌΠ΅ΡΡΠΎ Β«afterΒ» ΠΏΠΎΡΡΠ°Π²ΠΈΡΡ Β«beforeΒ», ΡΠΎ ΡΠ΅ΠΊΡΡ Π²ΡΡΠ°Π²ΠΈΡΡΡΡ Π² Π½Π°ΡΠ°Π»Π΅ Π°Π±Π·Π°ΡΠ°.
ΠΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΡ
ΠΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΡ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΠΏΡΠΈΠ²ΡΠ·Π°ΡΡ ΡΡΠΈΠ»Ρ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ Π²Π΅Π± ΡΡΡΠ°Π½ΠΈΡΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΠΈΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΠΈ ΠΌΠ΅ΡΡΠΎΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π² Π΄Π΅ΡΠ΅Π²Π΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΡΠΈΠΌΠ΅ΡΠΎΠΌ ΡΠ°ΠΊΠΎΠ³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΠΌΠΎΠΆΠ΅Ρ ΡΠ»ΡΠΆΠΈΡΡ Π³ΠΈΠΏΠ΅ΡΡΡΡΠ»ΠΊΠ°, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ²ΠΎΠΉ ΡΠ²Π΅Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Π΅ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ.
ΠΡΠΈ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠΈ css ΠΏΡΠ°Π²ΠΈΠ» ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΡ ΠΎΠ±ΡΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ Π² ΡΠΎΠ²ΠΎΠΊΡΠΏΠ½ΠΎΡΡΠΈ Ρ ΠΎΡΠ½ΠΎΠ²Π½ΡΠΌΠΈ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ°ΠΌΠΈ:
ΠΡΠ»ΠΈ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ Π±Π΅Π· ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ° Π²ΠΏΠ΅ΡΠ΅Π΄ΠΈ (:hover), ΡΠΎ ΠΎΠ½ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊΠΎ Π²ΡΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΡ ΡΡΠ»ΠΎΠ²Π½ΠΎ Π΄Π΅Π»ΡΡΡΡ Π½Π° ΡΡΠΈ Π³ΡΡΠΏΠΏΡ:
ΠΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΡ, ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΠΈΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²
ΠΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΡ ΡΡΠΎΠΉ Π³ΡΡΠΏΠΏΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° html ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΡΡΠΈΠ»Ρ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ. ΠΠ±ΡΡΠ½ΠΎ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΉ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ Π΄Π»Ρ Π³ΠΈΠΏΠ΅ΡΡΡΡΠ»ΠΎΠΊ, Π½ΠΎ ΠΈΠ½ΠΎΠ³Π΄Π° ΠΈΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΠΈ Π΄Π»Ρ Π΄ΡΡΠ³ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²Π΅Π± ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ :link ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π΄Π»Ρ Π½Π΅ ΠΏΠΎΡΠ΅ΡΠ΅Π½Π½ΡΡ ΡΡΡΠ»ΠΎΠΊ, Ρ.Π΅. ΡΡΡΠ»ΠΊΠ°ΠΌ, Π½Π° ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π΅ΡΠ΅ Π½Π΅ Π½Π°ΠΆΠΈΠΌΠ°Π». ΠΠ°ΠΏΠΈΡΠΈ a <. >ΠΈ a:link <. >Π² ΡΠ°Π±Π»ΠΈΡΠ΅ ΡΡΠΈΠ»Π΅ΠΉ Π΄Π°ΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ :link ΠΌΠΎΠΆΠ½ΠΎ Π½Π΅ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ.
ΠΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ :visited ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ ΠΏΠΎΡΠ΅ΡΠ΅Π½Π½ΡΡ ΡΡΡΠ»ΠΎΠΊ, Ρ.Π΅. ΡΡΡΠ»ΠΎΠΊ ΠΏΠΎ ΠΊΠΎΡΠΎΡΡΠΌ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΡΠΆΠ΅ ΡΠ΅Π»ΠΊΠ½ΡΠ». ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠ°ΠΊΠΈΠ΅ ΡΡΡΠ»ΠΊΠΈ ΠΌΠ΅Π½ΡΡΡ ΡΠ²ΠΎΠΉ ΡΠ²Π΅Ρ Π½Π° ΡΠΈΠΎΠ»Π΅ΡΠΎΠ²ΡΠΉ, Π½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΠ° ΡΠ²Π΅Ρ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ΅Π½ΡΡΡ.
ΠΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ :active ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊ Π°ΠΊΡΠΈΠ²Π½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΄Π»Ρ Π°ΠΊΡΠΈΠ²Π°ΡΠΈΠΈ ΡΡΡΠ»ΠΊΠΈ, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π½Π°Π²Π΅ΡΡΠΈ Π½Π° Π½Π΅Π΅ ΠΊΡΡΡΠΎΡ ΠΈ ΡΠ΅Π»ΠΊΠ½ΡΡΡ ΠΌΡΡΠΊΠΎΠΉ.
ΠΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ :focus ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΡΠΈ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΠΈ ΡΠΎΠΊΡΡΠ°. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΠΎΠ»Π΅ ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠ³ΠΎ Π²Π²ΠΎΠ΄Π° ΠΏΠΎΠ»ΡΡΠ°Π΅Ρ ΡΠΎΠΊΡΡ, ΠΊΠΎΠ³Π΄Π° Π² Π½Π΅Π³ΠΎ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ ΠΊΡΡΡΠΎΡ.
Π ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ :hΠΎvΠ΅r ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΊΠΎΠ³Π΄Π° Π½Π° Π½Π΅Π³ΠΎ Π½Π°Π²Π΅Π΄Π΅Π½ ΠΊΡΡΡΠΎΡ ΠΌΡΡΠΈ, Π½ΠΎ ΡΠ΅Π»ΡΠΊΠ° Π½Π΅ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ.
ΠΠ»Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ ΠΊΠ°ΠΊ Π±ΡΠ΄ΡΡ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΡΡΠ»ΠΊΠΈ Π² ΡΠ°Π·Π½ΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡΡ :
ΠΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΡ ΡΡΡΡΠΊΡΡΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠΎΠΉ Π³ΡΡΠΏΠΏΡ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΠΎΠ² ΡΡΠΈΠ»ΠΈ ΠΏΡΠΈΠ²ΡΠ·ΡΠ²Π°ΡΡΡΡ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΠΈΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π² ΡΡΡΡΠΊΡΡΡΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°.
ΠΠ΅ΡΠ²ΡΠΌΠΈ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΡ :first-child ΠΈ :last-child, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠΈΠ²ΡΠ·ΡΠ²Π°ΡΡ ΡΡΠΈΠ»Ρ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ°, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ²Π»ΡΡΡΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ ΠΏΠ΅ΡΠ²ΡΠΌ ΠΈ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΌ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ. Π§ΡΠΎΠ±Ρ ΡΡΠ°Π»ΠΎ ΠΏΠΎΠ½ΡΡΠ½Π΅ΠΉ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΡΠΈ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΡ Π½Π° ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΠ°ΡΠΊΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠΏΠΈΡΠΊΠ°:
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ°:
Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΡΠ°Π²ΠΈΠ»Π° CSS Β«li:first-childΒ» ΠΌΡ Π³ΠΎΠ²ΠΎΡΠΈΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΡ, ΡΡΠΎ ΡΡΠΈΠ»Ρ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ li, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΠ΄Π΅Ρ ΠΏΠ΅ΡΠ²ΡΠΌ Π² ΡΠ²ΠΎΠ΅ΠΌ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅. Π Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ° Β«li:last-childΒ» ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΌ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ² css Π΄Π»Ρ Π½Π°ΡΡΡΠΎΠ΅ΠΊ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΡΠΈΡΡΠΎΠ², ΠΌΡ ΡΠΊΠ°Π·Π°Π»ΠΈ, ΡΡΠΎ ΠΏΠ΅ΡΠ²ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΏΠΈΡΠΊΠ° Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ Π²ΡΠ΄Π΅Π»Π΅Π½ ΠΆΠΈΡΠ½ΡΠΌ ΡΡΠΈΡΡΠΎΠΌ, Π° Ρ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ»ΠΈ ΡΡΠΈΡΡ ΠΊΡΠ°ΡΠ½ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ°.
Π‘Π»Π΅Π΄ΡΡΡΠΈΠΉ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ :only-of-type, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊ Π΄ΠΎΡΠ΅ΡΠ½Π΅ΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ ΡΠΈΠΏΠ°, ΡΠΎΠ»ΡΠΊΠΎ Π΅ΡΠ»ΠΈ ΠΎΠ½ Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΡΠΉ Ρ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ.
Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ : only-of-type ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ , Π² ΠΏΡΠ°Π²ΠΈΠ»Π°Ρ ΡΡΠΈΠ»Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π΅ΡΡΡ Π² Π΄Π²Π° ΡΠ°Π·Π°. Π Π°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Ρ ΡΠ΅Ρ Π³ΠΈΠΏΠ΅ΡΡΡΡΠ»ΠΎΠΊ, ΠΊΠΎΡΠΎΡΡΠ΅ Ρ ΡΠ²ΠΎΠΈΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»Π΅ΠΉ (Π² Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΡΠΎ ΡΠ΅Π³
) Π²ΡΡΡΠ΅ΡΠ°ΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄ΠΈΠ½ ΡΠ°Π·.
ΠΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ :nth-child ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΡΠΈΠ²ΡΠ·Π°ΡΡ ΡΡΠΈΠ»Ρ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ Web-ΡΡΡΠ°Π½ΠΈΡΡ, Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΠΈΡ Π½ΡΠΌΠ΅ΡΠ°ΡΠΈΠΈ Π² Π΄Π΅ΡΠ΅Π²Π΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²:
ΠΠΎΡΠ»Π΅ ΠΈΠΌΠ΅Π½ΠΈ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΠ° Π² ΡΠΊΠΎΠ±ΠΊΠ°Ρ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠΊΠ°Π·Π°Π½ΠΎ ΡΠ΅ΡΡΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΡ Π²Π°ΡΠΈΠ°Π½ΡΠ°:
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΊΠ°ΠΊ Π²ΡΠ΄Π΅Π»ΠΈΡΡ Π²ΡΠ΅ ΡΠ΅ΡΠ½ΡΠ΅ ΡΡΡΠΎΠΊΠΈ ΡΠ°Π±Π»ΠΈΡΡ ΡΠ²Π΅ΡΠΎΠΌ? Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ :nth-child:
Π ΠΊΠΎΠ΄Π΅ ΠΏΡΠΈΠΌΠ΅ΡΠ° Π·Π°ΠΏΠΈΡΡ tr:nth-child (2n) ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ ΡΡΠΈΠ»Ρ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡΠΈΠ²ΡΠ·Π°ΡΡ ΠΊΠΎ Π²ΡΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ tr, Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΡΠΎΡΡΡ ΡΠΎΡΠΌΠΈΡΡΡΡΡΡ ΡΡΡΠΎΠΊΠΈ ΡΠ°Π±Π»ΠΈΡΡ (ΠΎΠ± ΡΡΠΎΠΌ ΠΌΡ Π³ΠΎΠ²ΠΎΡΠΈΠ»ΠΈ Π² ΡΡΠ°ΡΡΠ΅ ΠΊΠ°ΠΊ Π²ΡΡΠ°Π²ΠΈΡΡ ΡΠ°Π±Π»ΠΈΡΡ Π½Π° html-ΡΡΡΠ°Π½ΠΈΡΠ΅). ΠΡΠΈΡΠ΅ΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠΎΠ²ΡΠΉ Π½ΠΎΠΌΠ΅Ρ ΡΡΡΠΎΠΊ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° table Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠ΄ΠΎΠ²Π»Π΅ΡΠ²ΠΎΡΡΡΡ ΡΠΎΡΠΌΡΠ»Π΅ 2n, Π² ΠΊΠΎΡΠΎΡΡΡ Π±ΡΠ°ΡΠ·Π΅Ρ Π²ΠΌΠ΅ΡΡΠΎ n ΠΏΠΎΠ΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠ΅Π»ΡΠ΅ ΡΠΈΡΠ»Π° 0, 1, 2. Π ΠΈΡΠΎΠ³Π΅ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΡΡ, ΡΡΠΎ ΡΡΠΈΠ»Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΊ ΡΡΡΠΎΠΊΠ°ΠΌ ΠΏΠΎΠ΄ Π½ΠΎΠΌΠ΅ΡΠ°ΠΌΠΈ 2, 4, 6 ΠΈ Ρ.Π΄.
ΠΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΡ :not ΠΈ *
ΠΡΡΠ°Π»ΠΎΡΡ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅ΡΡ Π΅ΡΠ΅ Π΄Π²Π° Π²Π°ΠΆΠ½ΡΡ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΠ°. ΠΡΠΎΠ±ΡΠΉ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ :not ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΡΠΈΠ²ΡΠ·Π°ΡΡ ΡΡΠΈΠ»Ρ ΠΊ Π»ΡΠ±ΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ web ΡΡΡΠ°Π½ΠΈΡΡ, Π½Π΅ ΡΠ΄ΠΎΠ²Π»Π΅ΡΠ²ΠΎΡΡΡΡΠ΅ΠΌΡ Π·Π°Π΄Π°Π½Π½ΡΠΌ ΡΡΠ»ΠΎΠ²ΠΈΡΠΌ. Π’Π°ΠΊΠΈΠΌ ΡΡΠ»ΠΎΠ²ΠΈΠ΅ΠΌ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π»ΡΠ±ΠΎΠΉ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ:
Π‘ΡΠΈΠ»Ρ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΈΠ²ΡΠ·Π°Π½ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ Π²Π΅Π± ΡΡΡΠ°Π½ΠΈΡΡ, ΡΠ΄ΠΎΠ²Π»Π΅ΡΠ²ΠΎΡΡΡΡΠΈΠΌ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ ΠΈ Π½Π΅ ΡΠ΄ΠΎΠ²Π»Π΅ΡΠ²ΠΎΡΡΡΡΠ΅ΠΌΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ Π²ΡΠ±ΠΎΡΠ°. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ:
Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΡΡΠΎΠ³ΠΎ css ΠΏΡΠ°Π²ΠΈΠ»Π°, ΡΠ΅ΠΊΡΡ Π²ΡΠ΅Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² h1 ΠΎΠΊΡΠ°ΡΡΡΡΡ Π² ΠΊΡΠ°ΡΠ½ΡΠΉ ΡΠ²Π΅Ρ, ΠΊΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π°ΡΡΠΈΠ±ΡΡ id Π±ΡΠ΄Π΅Ρ ΡΠ°Π²Π΅Π½ main.
Π ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ Π½Π° ΡΠ΅Π³ΠΎΠ΄Π½Ρ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ * (Β«Π·Π²Π΅Π·Π΄ΠΎΡΠΊΠ°Β»), ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ Π»ΡΠ±ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ html ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠ½ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΡΡΠ΅Π±ΠΎΠ²Π°ΡΡΡΡ Π² ΡΠ»ΡΡΠ°Π΅, Π΅ΡΠ»ΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ ΠΎΠ΄ΠΈΠ½ ΡΡΠΈΠ»Ρ Π΄Π»Ρ Π²ΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π·Π°Π΄Π°ΡΡ ΡΡΠΈΡΡ ΠΈΠ»ΠΈ Π½Π°ΡΠ΅ΡΡΠ°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ°. Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ:
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΡΠΎΠ±Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ΅ΠΊΡΡΠ° Π΄Π»Ρ Π²ΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ css:
ΠΠ° ΡΡΠΎΠΌ Π²ΡΠ΅, Π΄ΠΎ Π½ΠΎΠ²ΡΡ Π²ΡΡΡΠ΅Ρ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ°Ρ Π±Π»ΠΎΠ³Π°!