Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

Π£Π²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠ΅ тСкста ΠΏΠΎΠ΄ курсором Π½Π° Mac

Когда Π½Π°Β Mac Π²ΠΊΠ»ΡŽΡ‡Π΅Π½Π° функция Β«Π£Π²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠ΅ тСкста под курсором», ΠΌΠΎΠΆΠ½ΠΎ навСсти ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ на любой ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, тСкст, ΠΏΠΎΠ»Π΅ Π²Π²ΠΎΠ΄Π°, ΠΏΡƒΠ½ΠΊΡ‚ мСню ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΊΡƒ) ΠΈΒ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ Π΅Π³ΠΎ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½Π½ΡƒΡŽ с высоким Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ Π²Π΅Ρ€ΡΠΈΡŽ Π²Β ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΌ ΠΎΠΊΠ½Π΅.

Π’ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ и настройка увСличСния тСкста ΠΏΠΎΠ΄ курсором

  1. На Mac Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ мСню AppleΒ Β > «БистСмныС настройки», Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Β«Π£Π½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹ΠΉ доступ», Π·Π°Ρ‚Π΅ΠΌ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Β«ΠœΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅Β».

    ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ панСль Β«Π£Π²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠ΅Β»

  2. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Β«Π’ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠ΅ тСкста под курсором».

    Π§Ρ‚ΠΎΠ±Ρ‹ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠ΅ тСкста, Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Β«ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹Β». НапримСр, ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅.

    • РасполоТСниС ΠΎΠΊΠ½Π° для ввода тСкста. НаТмитС Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ мСню Β«ΠœΠ΅ΡΡ‚ΠΎ Π²Π²ΠΎΠ΄Π° тСкста», Π·Π°Ρ‚Π΅ΠΌ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ мСстополоТСниС. Π§Ρ‚ΠΎΠ±Ρ‹ это ΠΎΠΊΠ½ΠΎ Π½Π΅Β ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π»ΠΎΡΡŒ ΠΏΡ€ΠΈΒ Π²Π²ΠΎΠ΄Π΅ тСкста, Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ «НСт».

    • Клавиша Π½Π°Β ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Π΅, которая Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠ΅ тСкста под курсором. НаТмитС Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ мСню Β«ΠœΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ Π°ΠΊΡ‚ΠΈΠ²Π°Ρ†ΠΈΠΈΒ», Π·Π°Ρ‚Π΅ΠΌ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΊΠ»Π°Π²ΠΈΡˆΡƒ. Π§Ρ‚ΠΎΠ±Ρ‹ Π·Π°Π±Π»ΠΎΠΊΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠΊΠ½ΠΎ ΠΈΒ Π½Π΅Β ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ Π΅Π³ΠΎ автоматичСски ΠΏΡ€ΠΈΒ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ указатСля Π½Π°Β ΠΎΠ±ΡŠΠ΅ΠΊΡ‚, Π½Π°ΠΆΠΌΠΈΡ‚Π΅ эту ΠΊΠ»Π°Π²ΠΈΡˆΡƒ Ρ‚Ρ€ΠΈ Ρ€Π°Π·Π° (это ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ в любоС врСмя, ΠΊΠΎΠ³Π΄Π° Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΎ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠ΅ тСкста под курсором). Π§Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°Π·Π±Π»ΠΎΠΊΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠΊΠ½ΠΎ, Π½Π°ΠΆΠΌΠΈΡ‚Π΅ эту ΠΊΠ»Π°Π²ΠΈΡˆΡƒ Ρ‚Ρ€ΠΈ Ρ€Π°Π·Π°.

    • Π¦Π²Π΅Ρ‚ тСкста, ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΠΎΠ³ΠΎ Π²Β ΠΎΠΊΠ½Π΅, Ρ†Π²Π΅Ρ‚ самого ΠΎΠΊΠ½Π° ΠΈΒ Ρ†Π²Π΅Ρ‚ тСкста ΠΏΡ€ΠΈΒ Π²Π²ΠΎΠ΄Π΅. НаТмитС Β«Π¦Π²Π΅Ρ‚Π°Β», Π·Π°Ρ‚Π΅ΠΌ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ мСню, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Ρ†Π²Π΅Ρ‚ ΠΈΠ»ΠΈ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ собствСнный Ρ†Π²Π΅Ρ‚.

Π£Π²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠ΅ тСкста под курсором

  • НавСдитС ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ Π½Π°Β ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ на экранС, Π·Π°Ρ‚Π΅ΠΌ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΊΠ»Π°Π²ΠΈΡˆΡƒ Π°ΠΊΡ‚ΠΈΠ²Π°Ρ†ΠΈΠΈ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Command), Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ ΠΎΠΊΠ½ΠΎ Β«Π£Π²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠ΅ тСкста под курсором». Если это ΠΎΠΊΠ½ΠΎ Π·Π°Π±Π»ΠΎΠΊΠΈΡ€ΠΎΠ²Π°Π½ΠΎ, ΠΎΠ½ΠΎ автоматичСски отобраТаСтся ΠΏΡ€ΠΈΒ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ указатСля Π½Π°Β ΠΎΠ±ΡŠΠ΅ΠΊΡ‚.

    Если Π’Ρ‹ Π²Ρ‹Π±Ρ€Π°Π»ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΎΠΊΠ½Π° Π²Π²ΠΎΠ΄Π° тСкста, ΠΎΠ½ΠΎ отобраТаСтся Π²Β ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠΌ Π’Π°ΠΌΠΈ мСстС (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π²Β Π»Π΅Π²ΠΎΠΌ Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ ΡƒΠ³Π»Ρƒ экрана) всСгда, ΠΊΠΎΠ³Π΄Π° Π’Ρ‹ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚Π΅ΡΡŒ Π²Β ΠΏΠΎΠ»Π΅ ΠΈΠ»ΠΈ области Π²Π²ΠΎΠ΄Π° тСкста. ΠŸΠΎΒ ΠΌΠ΅Ρ€Π΅ Π²Π²ΠΎΠ΄Π° в этом ΠΎΠΊΠ½Π΅ отобраТаСтся увСличСнная вСрсия Π²Π²Π΅Π΄Π΅Π½Π½ΠΎΠ³ΠΎ тСкста.

IE ΠΈ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ссылок ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

Π’ этой Π·Π°ΠΌΠ΅Ρ‚ΠΊΠ΅ я ΠΎΠΏΠΈΡˆΡƒ ΠΎΠ΄ΠΈΠ½ ΠΌΠΎΠΌΠ΅Π½Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ довольно часто ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΡ‚Ρ€Π΅Ρ‚ΠΈΡ‚ΡŒ Π² слоТной вёрсткС с CSS, Π½ΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ€Π΅Π΄ΠΊΠΎ проявляСт сСбя ΠΈΠ»ΠΈ Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ€Π΅Π΄ΠΊΠΎ ΠΎΠ±Ρ€Π°Ρ‰Π°ΡŽΡ‚ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅.

Π­Ρ‚ΠΎΡ‚ ΠΌΠΎΠΌΠ΅Π½Ρ‚ проявляСт сСбя Π² случаС ΠΊΠΎΠ³Π΄Π° Π² IE Π²Π½ΡƒΡ‚Ρ€ΠΈ ссылки Π΅ΡΡ‚ΡŒ Π±Π»ΠΎΠΊ со свойством hasLayout, Ρ‚ΠΎΠ³Π΄Π° ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅:

  • ΠΊΠ»ΠΈΠΊ ΠΏΠΎ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅, располоТСнной Π² Ρ‚Π°ΠΊΠΎΠΌ Π±Π»ΠΎΠΊΠ΅, Π½Π΅ Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ ΠΏΠΎ ссылкС;

  • ΠΏΡ€ΠΈ ΠΏΡ€Π°Π²ΠΎΠΌ ΠΊΠ»ΠΈΠΊΠ΅ ΠΏΠΎ Π±Π»ΠΎΠΊΡƒ с hasLayout Π½Π΅ появляСтся контСкстноС мСню ссылки (Ρ‚.Π΅. IE для контСкстного мСню считаСт этот Π±Π»ΠΎΠΊ просто ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ ΠΏΠΎ курсору Π½Π°Π΄ Ρ‚Π°ΠΊΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ).

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Ссли Π²Π½ΡƒΡ‚Ρ€ΠΈ ссылки с ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΌ (transparent) Ρ„ΠΎΠ½ΠΎΠΌ Π΅ΡΡ‚ΡŒ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ элСмСнт, Π° ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ ΠΏΠΎΠΌΠ΅Π½ΡΡ‚ΡŒ Π΅Π³ΠΎ свойства, скаТСм, Ρ‡Π΅Ρ€Π΅Π· Ρ‚Π°ΠΊΠΎΠΉ сСлСктор: A:hover EL {…}, Ρ‚ΠΎ, ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° этот элСмСнт, сСлСктор ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚.

БобствСнно, Ρ‚Π°ΠΊΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ сСлСктора исправляСтся просто — Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡ€ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ Ρ„ΠΎΠ½ для ссылки, Π² Ρ‚Π°ΠΊΠΎΠΌ случаС всё встанСт Π½Π° свои мСста (ΠΈΠ»ΠΈ ΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ

word-spacing:0, Ρ‡Ρ‚ΠΎ Ρ‚ΠΎΠΆΠ΅ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚, спасибо Π’Π°Π΄ΠΈΠΌΡƒ Макишвили Π·Π° этот ΠΌΠ΅Ρ‚ΠΎΠ΄.

Однако, Π² случаС с отсутствиСм контСкстного мСню ΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΎΠΉ всё слоТнСС.

Основной способ ΠΏΡ€ΠΎΡΠ²ΠΈΡ‚ΡŒ Π² Ρ‚Π°ΠΊΠΎΠΌ случаС контСкстноС мСню выполняСтся Π² Π΄Π²Π° шага:

  1. НСобходимо ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΊ ссылкС hasLayout ΠΈ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ Ρ„ΠΎΠ½ (скаТСм, ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ ΠΎΠ΄Π½ΠΎΠΏΠΈΠΊΡΠ΅Π»ΡŒΠ½Ρ‹ΠΉ Π³ΠΈΡ„ ΠΈΠ»ΠΈ ΠΆΠ΅ background: url(about:blank)Β β€” Ρ‚Π°ΠΊΠΎΠΉ Ρ„ΠΎΠ½, Π² дальнСйшСм, я Π±ΡƒΠ΄Ρƒ Π½Π°Π·Ρ‹Π²Π°Ρ‚ΡŒ «явный ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ Ρ„ΠΎΠ½Β»)

  2. Π‘Π°ΠΌΠΎΠΌΡƒ Π±Π»ΠΎΠΊΡƒ с hasLayout Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡ€ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ Ρ‚Π°ΠΊΠΎΠΉ ΠΆΠ΅ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ Ρ„ΠΎΠ½ ΠΈ ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ z-index

    с ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ.

Если всё ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΒ β€” ΠΎΡ‡Π΅Π½ΡŒ вСроятно, Ρ‡Ρ‚ΠΎ всё Π·Π°Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚. ΠžΡ‡Π΅Π½ΡŒ Π²Π°ΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ сама ссылка Π±Ρ‹Π»Π° с ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΌ Ρ„ΠΎΠ½ΠΎΠΌ (ΠΈΠ½Π°Ρ‡Π΅ Π±Π»ΠΎΠΊ с Π·-индСксом Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Π²ΠΈΠ΄Π½ΠΎ) ΠΈ Π±Π΅Π· Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ позиционирования (position:static), ΠΈΠ½Π°Ρ‡Π΅ ΠΎΠΏΡΡ‚ΡŒ ΠΆΠ΅ Π½Π΅ сработаСт.

ВСроятно — ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ с IE нСльзя Π±Ρ‹Ρ‚ΡŒ ΡƒΠ²Π΅Ρ€Π΅Π½Π½Ρ‹ΠΌ Π΄ΠΎ ΠΊΠΎΠ½Ρ†Π° πŸ™‚

К соТалСнию, Π±ΠΎΠ»Π΅Π΅ ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎΠ³ΠΎ ΠΈ простого фикса я Π½Π΅ Π½Π°ΡˆΡ‘Π», поэтому Π² Π΄Π°Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚, ΠΊΠΎΠ³Π΄Π° Ρƒ нас Π΅ΡΡ‚ΡŒ ссылка, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π½Π°Π΄ΠΎ «тяТСло» ΠΎΡ„ΠΎΡ€ΠΌΠΈΡ‚ΡŒ, ΠΆΠ΅Π»Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ всС Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ элСмСнты ΠΊΠ»Π°ΡΡ‚ΡŒ Π½Π΅ Π²Π½ΡƒΡ‚Ρ€ΡŒ ссылки, Π° ΠΎΠ±Ρ€Π°ΠΌΠ»ΡΡ‚ΡŒ Π΅Ρ‘ ΠΈΠΌΠΈ. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΏΠΎΠ»Π΅Π·Π½ΠΎ всСгда Π±Ρ‹Ρ‚ΡŒ ΡƒΠ²Π΅Ρ€Π΅Π½Π½Ρ‹ΠΌ, Ρ‡Ρ‚ΠΎ ссылка Π½Π΅ спозиционирована, Ρ‚.Π΅., ΠΏΠΎ возмоТности, ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ±Ρ€Π°ΠΌΠ»ΡΡŽΡ‰ΠΈΠ΅ Π΅Ρ‘ элСмСнты. Π–Π΅Π»Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ всСгда Ρ‚Π°ΠΊΠΈΠΌ ссылкам ΠΏΡ€ΠΎΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ

hasLayout ΠΈ явный ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ Ρ„ΠΎΠ½, Π² Ρ‚Π°ΠΊΠΎΠΌ случаС ΠΌΠΎΠΆΠ½ΠΎ ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ ΠΊΠ°ΠΊ с контСкстным мСню, Ρ‚Π°ΠΊ ΠΈ с сСлСкторами Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΡ… элСмСнтов. Надо ΡΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ явный ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ Ρ„ΠΎΠ½ Ρƒ ссылок Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΌΠΎΡ‡ΡŒ ΠΏΡ€ΠΎΡ‚ΠΈΠ² Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π±Π°Π³ΠΎΠ² Ρƒ ΠžΠΏΠ΅Ρ€Ρ‹, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π² Π±ΡƒΠ΄ΡƒΡ‰Π΅ΠΌ я ΠΎΠΏΠΈΡˆΡƒ ΠΈΡ….

Ну, Π° Π²ΠΎΡ‚ ΠΈ нСсколько ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ²Β β€” Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ссылок Π² IE ΠΈ ΠΏΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ ΠΊΠΎΠ΄.

ΠžΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½ΠΎ с ΠΌΠ΅Ρ‚ΠΊΠ°ΠΌΠΈ: #Practical #CSS #Bugs #Outdated

hover Β» Π‘ΠΊΡ€ΠΈΠΏΡ‚Ρ‹ для сайтов

3 971 Text / Codepen

Π‘ΠΊΠΎΠ»ΡŒΠ·ΡΡ‰ΠΈΠΉ тСкст ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

ΠŸΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора Π½Π° тСкст происходит Π²ΠΎΠ»Π½ΠΎΠΎΠ±Ρ€Π°Π·Π½ΠΎΠ΅ скольТСниС Π²Π²Π΅Ρ€Ρ… / Π²Π½ΠΈΠ· с ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ Ρ†Π²Π΅Ρ‚Π° тСкста

4 297 Animation / Codepen

Hover эффСкты Π½Π°Π΄ изобраТСниями Π½Π° CSS

Π­Ρ„Ρ„Π΅ΠΊΡ‚ навСдСния Π½Π° Π±Π»ΠΎΠΊΠΈ с изобраТСниями ΠΈ тСкстом.

2 490 Codepen

Π­Ρ„Ρ„Π΅ΠΊΡ‚ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅

Π”ΠΎΠ²ΠΎΠ»ΡŒΠ½ΠΎ-Ρ‚Π°ΠΊΠΈ смСлый hover эффСкт Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ. ΠŸΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ происходит Ρ€Π°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠ° Π½Π° ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ кусочки с ΠΎΠ±Ρ‰ΠΈΠΌ Ρ„ΠΎΠ½ΠΎΠΌ — ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΎΠΉ.

1 374 Codepen

Π­Ρ„Ρ„Π΅ΠΊΡ‚ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ clip-path

ИспользованиС свойства clip-path ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ для придания ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ Ρ„ΠΎΡ€ΠΌΡ‹ стрСлки с Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ.

3 423 Text / Codepen

Π­Ρ„Ρ„Π΅ΠΊΡ‚ fill для тСкста ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

Π­Ρ„Ρ„Π΅ΠΊΡ‚ заполнСния тСкста ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. Π Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS.

1 701 Codepen

ΠΠΎΡ‡ΡŒ Π² ΠΌΡƒΠ·Π΅Π΅

ΠŸΡ€ΠΈ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠΈ курсора разгораСтся Ρ„ΠΎΠ½Π°Ρ€ΡŒ ΠΈ освСщаСт ΠΊΠ°Ρ€Ρ‚ΠΈΠ½Ρ‹ Π² ΠΌΡƒΠ·Π΅Π΅. ΠŸΡ€ΠΈ ΠΊΠ»ΠΈΠΊΠ΅ происходит ΠΏΡ€ΠΈΠ±Π»ΠΈΠΆΠ΅Π½ΠΈΠ΅ изобраТСния.

3 577 Text / Codepen

Π–ΠΈΠ΄ΠΊΠΈΠΉ тСкст ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

ΠŸΡ€ΠΈ hover Π½Π° тСкст Π΅Π³ΠΎ Ρ„ΠΎΠ½ становится Ρ‚Π΅ΠΊΡƒΡ‡ΠΈΠΌ, ΠΊΠ°ΠΊ ΠΆΠΈΠ΄ΠΊΠΎΡΡ‚ΡŒ.

2 269 Codepen

ВСкстурный ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ ΠΌΠ΅ΠΆΠ΄Ρƒ изобраТСниями Π½Π° three.js

ΠŸΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ происходит ΠΏΠ»Π°Π²Π½Ρ‹ΠΉ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ сквозь тСкстуру для ΠΏΠΎΠΊΠ°Π·Π° Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ. ΠŸΡ€ΠΈ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠΈ курсора ΠΌΡ‹ΡˆΠΈ Ρ‚Π°ΠΊ ΠΆΠ΅ происходит Π½Π°ΠΊΠ»ΠΎΠ½ Π² 3d пространствС. Π Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ΠΎ Π½Π° three.js

3 265 Codepen

CSS Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Ρ‹ для hover эффСкта ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ

Hover эффСкт Π½Π° CSS ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰ΠΈΠΉ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Ρ‹ для Π·Π°Π±Π»ΡŽΡ€ΠΈΠ²Π°Π½ΠΈΡ Π½Π΅Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ

4 475 Animation / Menu & Nav / Codepen

Π­Ρ„Ρ„Π΅ΠΊΡ‚ навСдСния слСдящий Π·Π° курсором

ΠŸΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ссылки ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΏΡƒΠ½ΠΊΡ‚ мСню

2 673 Codepen

Π“Π»ΠΈΡ‚Ρ‡ эффСкт Π½Π° CSS ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

ΠŸΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ воспроизводится Π³Π»ΠΈΡ‚Ρ‡ эффСкт. Π‘Π΄Π΅Π»Π°Π½ΠΎ Π½Π° CSS Π·Π° счСт использования ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈ Ρ‚ΠΎΠ³ΠΎ ΠΆΠ΅ изобраТСния нСсколько Ρ€Π°Π·.

1 846 Codepen

Π­Ρ„Ρ„Π΅ΠΊΡ‚ тСссСляции ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ячСйку Π² grid css

Π­Ρ„Ρ„Π΅ΠΊΡ‚ тСссСляции ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ячСйки Π² сСткС. Π‘Π΅Ρ‚ΠΊΠ° grid построСна Π½Π° Π±Π°Π·Π΅ 200 Π±Π»ΠΎΠΊΠΎΠ². Π‘Π΄Π΅Π»Π°Π½ эффСкт Π½Π° чистом CSS

Как Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Π³ΠΎ курсора? CSS

МногиС ΠΈΠ· Вас Π΅Ρ‰Ρ‘, нСзависимо ΠΎΡ‚ Π·Π½Π°Π½ΠΈΠΉ вёрстки ΠΈ программирования, ΡΡ‚Π°Π»ΠΊΠΈΠ²Π°Π»ΠΈΡΡŒ с
Π·Π°ΠΌΠ΅Π½ΠΎΠΉ изобраТСния ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Π³ΠΎ. Π‘Π°ΠΌΡ‹ΠΉ частый ΠΏΡ€ΠΈΠΌΠ΅Ρ€ — Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ курсора ΠΌΡ‹ΡˆΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ. Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° мСнялась, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π΄Π°ΠΆΠ΅ Π² Ρ€Π°Π·ΠΌΠ΅Ρ€Π°Ρ… ΠΈ Ρ„ΠΎΡ€ΠΌΠ΅. Π’ Π΄Π°Π½Π½ΠΎΠΉ ΡΡ‚Π°Ρ‚ΡŒΠ΅ я ΠΏΠΎΠΊΠ°ΠΆΡƒ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Π³ΠΎ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ CSS.
На Π±ΡƒΠ΄ΡƒΡ‰Π΅Π΅, Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‚Π°ΠΊΠΎΠΉ ΠΌΠ΅Ρ‚ΠΎΠ΄, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡŒΠ·ΡƒΡΡΡŒ срСдствами JS Π’Ρ‹ рискуСтС ΠΏΠΎΠΏΠ°ΡΡ‚ΡŒ Π½Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, Ρƒ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ ΠΎΠ½ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½ Π² настройках Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, Π² Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ Ρ‡Π΅Π³ΠΎ Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊ ΠΌΠΎΠΆΠ΅Ρ‚ Π½Π΅ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΊΠ°ΠΊΠΈΡ…-Π»ΠΈΠ±ΠΎ Π΄Π΅Ρ‚Π°Π»Π΅ΠΉ ΠΈΠ»ΠΈ Π½Π΅ ΠΏΠΎΠ½ΡΡ‚ΡŒ смысла Π·Π°Π΄ΡƒΠΌΠΊΠΈ.

Π§Ρ‚ΠΎ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ? Нам достаточно псСвдоэлСмСнта hover ΠΈ свойства background. Из Ρ„Π°ΠΉΠ»ΠΎΠ² это сам html Ρ„Π°ΠΉΠ» ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.

Π’ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ всё просто. Код состоит ΠΈΠ· Π΄Π²ΡƒΡ… частСй:

1. html с Π½ΡƒΠΆΠ½Ρ‹ΠΌ div

Код HTML

<divΒ class="img"></div>

2. свойства css для div

Код CSS

.imgΒ {
Β Β background:Β url("image001.jpg")Β no-repeat;Β /*Β ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅Β ΠΏΠΎΒ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽΒ */
Β Β height:Β 120px;Β /* высота изобраТСния */
Β Β width:Β 120px;Β /*Β ΡˆΠΈΡ€ΠΈΠ½Π°Β ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡΒ */
}
.img:hoverΒ {
Β Β background:Β url("image002.jpg")Β no-repeat;Β /*Β Π½ΠΎΠ²ΠΎΠ΅Β ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅Β */
Β Β border:Β 2pxΒ solidΒ #f00;Β //Β Π£ΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌΒ ΠΊΡ€Π°ΡΠ½ΡƒΡŽΒ Ρ€Π°ΠΌΠΊΡƒ
Β Β height:Β 120px;Β /* высота изобраТСния */
Β Β width:Β 120px;Β /*Β ΡˆΠΈΡ€ΠΈΠ½Π°Β ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡΒ */
}

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽ Ρ€Π°ΡΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π·Π°Π½ΠΈΠΌΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΈ простой ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ€Π°Π±ΠΎΡ‚Ρ‹ ΠΊΠΎΠ΄Π°. ΠŸΡ€ΠΈ ΠΆΠ΅Π»Π°Π½ΠΈΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ ΠΈ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏ Ρ€Π°Π±ΠΎΡ‚Ρ‹ Ρƒ сСбя Π½Π° ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π΅.ДСмонстрация Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ исходники
Как Π²Ρ‹ Π²ΠΈΠ΄ΠΈΡ‚Π΅ Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅, ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ (Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ image001), появляСтся ΠΏΡ€ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅ страницы, Π° image002 Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора Π½Π° ΠΏΠ΅Ρ€Π²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.
Π’Π½ΠΈΠΌΠ°Π½ΠΈΠ΅! НуТно ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΈ высоту Π±Π»ΠΎΠΊΠ°, Π² ΠΏΡ€ΠΎΡ‚ΠΈΠ²Π½ΠΎΠΌ случаС div просто Π½Π΅ отобразится. Π’Π°ΠΊΠΆΠ΅ Π±ΡƒΠ΄ΡŒΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ с ΡƒΠΊΠ°Π·Π°Π½ΠΈΠ΅ΠΌ Ρ‚ΠΎΡ‡Π½Ρ‹Ρ… Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² Π±Π»ΠΎΠΊΠ°, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π²Π½ΡƒΡ‚Ρ€ΠΈ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΎ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΎΠ½ΠΎ считаСтся Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΌ. Если Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ Π±Π»ΠΎΠΊΠ° Π±ΡƒΠ΄ΡƒΡ‚ мСньшС, Ρ‚ΠΎ ΠΈ Π²ΠΈΠ΄Π½Π° Π±ΡƒΠ΄Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‡Π°ΡΡ‚ΡŒ изобраТСния.

Π§Π°Ρ‰Π΅ всСго ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‚Π°ΠΊΠΎΠΉ способ смСны изобраТСния. Если Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² Π΄Ρ€ΡƒΠ³ΠΈΡ… случаях, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΏΡ€ΠΈ ΠΊΠ»ΠΈΠΊΠ΅, Ρ‚ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π°Π΄ΠΎ ΡƒΠΆΠ΅ Π½Π΅ hover, Π° active.

Π”Π°, ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ способы Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅: JS, Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° jQuery, CSS3, Π½ΠΎ ΠΎ Π½ΠΈΡ… я Π½Π°ΠΏΠΈΡˆΡƒ Π² ΡΡ‚Π°Ρ‚ΡŒΡΡ… Π² ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… Ρ€Π°Π·Π΄Π΅Π»Π°Ρ….

Бпасибо за вниманиС!

CSS: ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΡŒ навСдСния


ΠŸΡ€ΠΈΠΌΠ΅Ρ€

Π’Ρ‹Π±ΠΎΡ€ ΠΈ ΡΡ‚ΠΈΠ»ΡŒ ссылки ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Π΅ курсора:

Π°: ΠΏΠ°Ρ€Π΅Π½ΠΈΠ΅ {
Ρ„ΠΎΠ½-Ρ†Π²Π΅Ρ‚ ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ;
}

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам »

Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ «ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами» Π½ΠΈΠΆΠ΅.


ΠžΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΈ использованиС

Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€ : hover ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для Π²Ρ‹Π±ΠΎΡ€Π° элСмСнтов ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½ΠΈΡ… указатСля ΠΌΡ‹ΡˆΠΈ.

Π‘ΠΎΠ²Π΅Ρ‚: Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€: hover ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для всСх элСмСнтов, Π° Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎ ссылкам.

Π‘ΠΎΠ²Π΅Ρ‚: Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ сСлСктор: link для стилизации ссылок Π½Π° нСпосСщСнныС страницы, сСлСктор: посСщСнный для стиля ссылки Π½Π° посСщСнныС страницы, ΠΈ : Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ сСлСктор для стилизации Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΉ ссылки.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: : hover Π”ΠžΠ›Π–Π•Π ΡΡ‚ΠΎΡΡ‚ΡŒ послС: link ΠΈ: loaded (Ссли ΠΎΠ½ΠΈ ΠΏΡ€ΠΈΡΡƒΡ‚ΡΡ‚Π²ΡƒΡŽΡ‚) Π² ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΈ CSS, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π±Ρ‹Ρ‚ΡŒ эффСктивным!


ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°

Числа Π² Ρ‚Π°Π±Π»ΠΈΡ†Π΅ ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ ΠΏΠ΅Ρ€Π²ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‰ΡƒΡŽ сСлСктор.

Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€
: ΠΏΠ°Ρ€Π΅Π½ΠΈΠ΅ 4.0 7,0 2,0 3,1 9,6

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Π’ IE Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ объявлСн Ρ‡Ρ‚ΠΎΠ±Ρ‹ сСлСктор: hover Ρ€Π°Π±ΠΎΡ‚Π°Π» с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ элСмСнтами, ΠΊΡ€ΠΎΠΌΠ΅ элСмСнта .


Бинтаксис CSS

: hover {
css Π΄Π΅ΠΊΠ»Π°Ρ€Π°Ρ†ΠΈΠΈ ;
} Π”Π΅ΠΌΠΎ

Π”Ρ€ΡƒΠ³ΠΈΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

Π’Ρ‹Π±ΠΎΡ€ ΠΈ ΡΡ‚ΠΈΠ»ΡŒ элСмСнта

,

ΠΈ

ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Π³ΠΎ курсора:

p: hover, h2: hover, a: hover {
background-color: yellow;
}

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам »

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

Π’Ρ‹Π±ΠΎΡ€ ΠΈ ΡΡ‚ΠΈΠ»ΡŒ нСпосСщСнных, посСщСнных, Π½Π°Π²Π΅Π΄Π΅Π½Π½Ρ‹Ρ… ΠΈ Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… ссылок:

/ * нСпосСщСнная ссылка * /
a: ссылка {
Ρ†Π²Π΅Ρ‚: Π·Π΅Π»Π΅Π½Ρ‹ΠΉ;
}

/ * посСщСнная ссылка * /
a: посСщСнная {
Ρ†Π²Π΅Ρ‚: Π·Π΅Π»Π΅Π½Ρ‹ΠΉ;
}

/ * Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ указатСля ΠΌΡ‹ΡˆΠΈ Π½Π° ссылку * /
a: hover {
Ρ†Π²Π΅Ρ‚: красный;
}

/ * выбранная ссылка * /
a: Π°ΠΊΡ‚ΠΈΠ²Π½Π° {
Ρ†Π²Π΅Ρ‚: ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ;
}

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам »

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

Π‘Ρ‚ΠΈΠ»ΠΈ ссылок с Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ стилями:

Π°.ex1: hover, a.ex1: active {
Ρ†Π²Π΅Ρ‚: красный;
}

a.ex2: hover, a.ex2: active {
font-size: 150%;
}

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам »

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

НавСдитС ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ Π½Π° элСмСнт , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ элСмСнт

(Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ подсказку):

div {
дисплСй: Π½Π΅Ρ‚;
}

span: hover + div {
display: block;
}

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам »

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

ΠŸΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΈ ΡΠΊΡ€Ρ‹Ρ‚ΡŒ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ мСню ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора ΠΌΡ‹ΡˆΠΈ:

ul {
дисплСй: встроСнный;
ΠΌΠ°Ρ€ΠΆΠ°: 0;
отступ: 0;
}
ul li {display: inline-block;}
ul li: hover {background: # 555;}
ul li: hover ul {display: block;}
ul li ul {
позиция: Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Π°Ρ;
ΡˆΠΈΡ€ΠΈΠ½Π°: 200 пиксСлСй;
дисплСй: Π½Π΅Ρ‚;
}
ul li ul li {
справочная информация: # 555;
дисплСй: Π±Π»ΠΎΡ‡Π½Ρ‹ΠΉ;
}
ul li ul li a {display: block! Important;}
ul li ul li: hover {background: # 666;}

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам »

БвязанныС страницы

Π£Ρ‡Π΅Π±Π½ΠΈΠΊ

CSS: ссылки CSS

Π£Ρ‡Π΅Π±Π½ΠΎΠ΅ пособиС ΠΏΠΎ CSS: ΠŸΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΡ‹ CSS



ΠžΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ зависания ΠΏΠΎ Merriam-Webster

Ρ…ΠΎΠ² Β· эр | \ ˈHΙ™-vΙ™r , ˈHΓ€- \ ΠΏΠ°Ρ€ΠΈΠ»; ΠΏΠ°Ρ€Π΅Π½ΠΈΠ΅ \ ˈHΙ™- v (Ι™-) riΕ‹ , ˈHΓ€- \

ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π½Ρ‹ΠΉ Π³Π»Π°Π³ΠΎΠ»

: для размСщСния (ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π½ΠΎΠ³ΠΎ курсора) Π½Π°Π΄ Ρ‡Π΅ΠΌ-Π»ΠΈΠ±ΠΎ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΈΠ»ΠΈ Π·Π½Π°Ρ‡ΠΊΠΎΠΌ), Π½Π΅ выбирая Π΅Π³ΠΎ МногиС Π² классС Π΄ΠΎΠ»Π³ΠΎΠ΅ врСмя Π½Π°Π²ΠΎΠ΄ΠΈΠ»ΠΈ курсоры Π½Π° слова ΠΈ Π·Π½Π°Ρ‡ΠΊΠΈ, ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ Ρ‰Π΅Π»ΠΊΠ½ΡƒΡ‚ΡŒ ΠΌΡ‹ΡˆΡŒΡŽ.- КСлли Π₯Π΅ΠΉΠ±ΠΎΠ΅Ρ€

Π½Π΅ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π½Ρ‹ΠΉ Π³Π»Π°Π³ΠΎΠ»

1Π° : для Ρ€Π°Π·Π²Π΅ΡˆΠΈΠ²Π°Π½ΠΈΡ Π² Π²ΠΎΠ·Π΄ΡƒΡ…Π΅ ΠΈΠ»ΠΈ Π½Π° ΠΊΡ€Ρ‹Π»Π΅ Над Π³ΠΎΠ»ΠΎΠ²ΠΎΠΉ ΠΏΠ°Ρ€ΠΈΠ» ястрСб.

Π± : ΠΎΡΡ‚Π°Π²Π°Ρ‚ΡŒΡΡ ΠΏΠΎΠ΄Π²Π΅ΡˆΠ΅Π½Π½Ρ‹ΠΌ Π½Π°Π΄ мСстом ΠΈΠ»ΠΈ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠΌ ΠΊΠΎΠ»ΠΈΠ±Ρ€ΠΈ ΠΏΠ°Ρ€ΠΈΡ‚ Π½Π°Π΄ Ρ†Π²Π΅Ρ‚Π°ΠΌΠΈ. Над Π½Π°ΠΌΠΈ ΠΏΠ°Ρ€ΠΈΠ»ΠΈ Π²Π΅Ρ€Ρ‚ΠΎΠ»Π΅Ρ‚Ρ‹.

2Π° : для пСрСмСщСния Π²Π·Π°Π΄ ΠΈ Π²ΠΏΠ΅Ρ€Π΅Π΄ рядом с мСстом : ΠΊΠΎΠ»Π΅Π±Π°Ρ‚ΡŒΡΡ Π²ΠΎΠΊΡ€ΡƒΠ³ Π·Π°Π΄Π°Π½Π½ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠΈ Π‘Π΅Π·Ρ€Π°Π±ΠΎΡ‚ΠΈΡ†Π° колСбалась Π² Ρ€Π°ΠΉΠΎΠ½Π΅ 10 ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚ΠΎΠ².

Π± : Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Π² состоянии нСопрСдСлСнности, Π½Π΅Ρ€Π΅ΡˆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ ΠΈΠ»ΠΈ нСопрСдСлСнности … НСудобно ΠΏΠ°Ρ€ΠΈΡ‚ΡŒ Π·Π° сигарой… — ВСннСсси Уильямс Π‘Ρ‚Ρ€Π°Π½Π° находится Π½Π° Π³Ρ€Π°Π½ΠΈ Π³ΠΎΠ»ΠΎΠ΄Π°.

: дСйствиС ΠΈΠ»ΠΈ состояниС парСния Π² Π²ΠΎΠ·Π΄ΡƒΡ…Π΅. Π‘ΠΊΠΎΠΏΡ‹ Π±Ρ‹Π»ΠΈ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡƒΡΠΏΠ΅ΡˆΠ½Ρ‹ΠΌΠΈ ΠΏΡ€ΠΈ ΠΎΡ…ΠΎΡ‚Π΅ с зависания ΠΈ Ρ‚Ρ€Π°Ρ‚ΠΈΠ»ΠΈ Π½Π° это Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ своСго ΠΎΡ…ΠΎΡ‚Π½ΠΈΡ‡ΡŒΠ΅Π³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ.- Π”ΠΆΠΎΠ½ П. Π’ΠΈΠ»ΠΈ-младший. ПослС Ρ‚Ρ‰Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ снаруТи, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ±Π΅Π΄ΠΈΡ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ Π΅Π³ΠΎ траСктория ΠΏΠΎΠ»Π΅Ρ‚Π° свободна, ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΠΏΠΈΠ»ΠΎΡ‚ΠΎΠ² поднял свой Π²Π΅Ρ€Ρ‚ΠΎΠ»Π΅Ρ‚ Π² Ρ€Π΅ΠΆΠΈΠΌ зависания, Π° Π·Π°Ρ‚Π΅ΠΌ ΠΌΠ°Π½Π΅Π²Ρ€ΠΈΡ€ΠΎΠ²Π°Π» ΠΊ сСрСдинС Π΄ΠΎΠ»ΠΈΠ½Ρ‹. — Π‘Ρ€Π΅ΠΊ Π₯СндСрсон

68 CSS Hover Effects

ΠšΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π½Π½Ρ‹Ρ… Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ бСсплатных HTML ΠΈ CSS эффСктов навСдСния ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² ΠΊΠΎΠ΄Π°: Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ, ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΎΠ² ΠΈ Ρ‚. Π”. .ОбновлСниС ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΠΈ Π·Π° Ρ„Π΅Π²Ρ€Π°Π»ΡŒ 2020 Π³ΠΎΠ΄Π°. 18 Π½ΠΎΠ²ΠΈΠ½ΠΎΠΊ.

  1. ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ эффСктов навСдСния курсора CSS
  2. Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ CSS эффСктов навСдСния
  1. jQuery Hover Effects
  2. Bootstrap Hover Effects

HTML ΠΈ CSS эффСкт навСдСния ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² ΠΊΠΎΠ΄Π°.

Автор
  • Амит Π¨ΠΈΠ½
О кодС

ΠžΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ полоТСния ΠΌΡ‹ΡˆΠΈ Π² CSS

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ: Π΄Π°

Зависимости: —

Автор
  • Ана Π’ΡƒΠ΄ΠΎΡ€
О кодС

ΠŸΠ°Ρ€ΡΡ‰ΠΈΠ΅ Π»ΡƒΡ‡ΠΈ с маскировкой ΠΈ ΠΌΠ°Π³ΠΈΠ΅ΠΉ Houdini

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Opera, Safari

ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ: Π΄Π°

Зависимости: —

Автор
  • Микаэль АйналСм
О кодС

О нас Π­Ρ„Ρ„Π΅ΠΊΡ‚ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎ ΠΎΠΊΠ½Π°

ИспользованиС clip-path: path (...) для создания эффСкта Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎ ΠΎΠΊΠ½Π°.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: Π½Π΅Ρ‚

Зависимости: —

Автор
  • Ана Π’ΡƒΠ΄ΠΎΡ€
О кодС

ΠšΡ€ΠΎΡΡΠ±Ρ€Π°ΡƒΠ·Π΅Ρ€Π½ΠΎΡΡ‚ΡŒ Π±Π΅Π· эффСкта дублирования изобраТСния с Ρ€Π΅Π°Π»ΡŒΠ½Ρ‹ΠΌ

img Elments

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ: Π΄Π°

Зависимости: —

Автор
  • Гиоргос
О кодС

НСзамСтный крСст ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора Π½Π° ΡƒΠ³Π»Ρ‹ ΠΏΡ€Π΅Π΄ΠΌΠ΅Ρ‚Π° сСтки

На основС эффСкта Windows 10 Fluent Design Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Β«ΠšΠ°Π»ΡŒΠΊΡƒΠ»ΡΡ‚ΠΎΡ€Β», Π³Π΄Π΅ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора Π½Π° элСмСнт отобраТаСтся Ρ‚ΠΎΠ½ΠΊΠΈΠΉ крСстик Π² ΡƒΠ³Π»Ρƒ, блиТайшСм ΠΊ курсору.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ: Π΄Π°

Зависимости: —

Автор
  • Π‘ΠΎΠΌ Π¨Π΅ΠΊΡ…Π°Ρ€ ΠœΡƒΠΊΠ΅Ρ€Π΄ΠΆΠΈ
О кодС

ΠŸΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠ½ΡƒΡ‚Ρ‹ΠΉ-Анимация

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ: Π΄Π°

Зависимости: —

Автор
  • Адам Аргайл
О кодС

Π­Ρ„Ρ„Π΅ΠΊΡ‚ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° ΠΏΡ€ΠΈ Π²Ρ‹Π²ΠΎΠ΄Π΅ ΠΌΡ‹ΡˆΠΈ ΠΈΠ· CSS

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ: Π΄Π°

Зависимости: —

Автор
  • Π‘Ρ€Π°ΠΉΠ°Π½ Бэйл
О кодС

Π£Π·ΠΎΡ€ + Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΉ ΠΊΠΎΠΌΠ±ΠΎ

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: Π½Π΅Ρ‚

Зависимости: —

Автор
  • Π Π°ΠΉΠ°Π½ Маллиган
О кодС

Supa Dupa Fly Hover

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ: Π΄Π°

Зависимости: —

Автор
  • Π’Π°ΠΊΠ°Π½Π΅ Π˜Ρ‡ΠΈΠ½ΠΎΡΠ΅
О кодС

Кнопка с эффСктом Π³ΠΎΠ»ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ CSS, Π·Π½Π°Ρ‡ΠΎΠΊ 3D

Π­Ρ‚ΠΎ ΠΊΠ½ΠΎΠΏΠΊΠ° Π±Π΅Π· Javascript; ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ указатСля ΠΌΡ‹ΡˆΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ появится Π·Π½Π°Ρ‡ΠΎΠΊ 3D, ΠΏΠΎΡ…ΠΎΠΆΠΈΠΉ Π½Π° эффСкт Π³ΠΎΠ»ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹.ΠšΠ½ΠΎΠΏΠΊΡƒ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ²Π΅Ρ€Π½ΡƒΡ‚ΡŒ, навСдя ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: Π½Π΅Ρ‚

Зависимости: —

Автор
  • Π‘ΠΈΠΊΡ€ΠΈΡ‚ΠΈ Π”Π°ΠΊΡƒΠ°
О кодС

ВзаимодСйствиС с ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠ΅ΠΉ ΠΎ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΠ°Ρ€Ρ‚Ρ‹

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: Π½Π΅Ρ‚

Зависимости: —

Автор
  • дугласмофСт
О кодС

ΠšΠ°Ρ€Ρ‚ΠΎΡ‡Π½Ρ‹ΠΉ псСвдоэлСмСнт Hover

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: Π½Π΅Ρ‚

Зависимости: —

О кодС

Π‘Π»Π΅ΠΏΠΎΠΊ CSS: стилизация Π±Ρ€Π°Ρ‚ΡŒΠ΅Π² ΠΈ сСстСр ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ CSS-сСлСктор : not для стилизации Π±Ρ€Π°Ρ‚ΡŒΠ΅Π² ΠΈ сСстСр ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ: Π΄Π°

Зависимости: —

Автор
  • HΓ₯vard Brynjulfsen
О кодС

Fancy Slide-in Hover, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ CSS

Π­Ρ„Ρ„Π΅ΠΊΡ‚ ΠΏΠ»Π°Π²Π½ΠΎΠ³ΠΎ навСдСния с использованиСм Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ позиционирования ΠΈ псСвдокласса. Π Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с Π»ΡŽΠ±Ρ‹ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ: Π΄Π°

Зависимости: —

Автор
  • АйсСнур Π’ΡŽΡ€ΠΊ
О кодС

ΠŸΡ€ΠΈΠ²Π΅Π΄ΠΈ Π΄Ρ€ΡƒΠ·Π΅ΠΉ Анимация навСдСния

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ: Π΄Π°

Зависимости: —

Автор
  • ΠœΠ°Ρ€Ρ‚ΠΈΠ½ Π£ΠΈΡ‚Π°ΠΊΠ΅Ρ€
О кодС

Π˜ΡΠΊΡƒΡΡΡ‚Π²ΠΎ бСссмыслСнно

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: Π½Π΅Ρ‚

Зависимости: —

Автор
  • Π‘Π°Ρ€Π° Ѐоссхайм
О кодС

Анимация Ρ€Π°Π΄ΡƒΠΆΠ½ΠΎΠ³ΠΎ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π°

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: Π½Π΅Ρ‚

Зависимости: —

Автор
  • ΠŸΠ°ΡƒΠ»ΠΈΠ½Π° Π“Π΅Ρ‚ΡŒΠΌΠ°Π½
О кодС

Π­Ρ„Ρ„Π΅ΠΊΡ‚ навСдСния с ΡƒΡ‡Π΅Ρ‚ΠΎΠΌ направлСния Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для CSS

ΠŸΠΎΡΡ‚Π°Π²Π»ΡΠ΅Ρ‚ΡΡ с Sass @mixin , Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ быстро ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ количСство столбцов ΠΈ элСмСнтов.Π’Π°ΠΊΠΆΠ΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΎΠΊΠ½Π°. Он ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΏΡ€ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ сСтки.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ: Π΄Π°

Зависимости: —

Автор
  • Π’Π»Π°Π΄ Π Π°ΠΊΠΎΠ°Ρ€
О кодС

Анимация ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора Π½Π° ΠΊΠ»ΠΈΠΏ

Анимация навСдСния курсора clip-path , ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ доступная с ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Firefox, Opera, Safari

Адаптивный: Π½Π΅Ρ‚

Зависимости: font-awesome.css

Автор
  • ДТСсси ΠšΠΎΡƒΡ‡
О кодС

РазвлСчСния с: зависаниСм

ΠŸΡ€ΠΎΡΡ‚ΠΎ ΠΏΠΎΠΈΠ³Ρ€Π°ΠΉΡ‚Π΅ с Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ интСрСсными Π²Π΅Ρ‰Π°ΠΌΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS : hover ΠΏΡ€ΠΈ стилизации Ρ‚Π΅Ρ… ΠΆΠ΅ элСмСнтов HTML (ΠΈ ΠΈΡ… Π±Ρ€Π°Ρ‚ΡŒΠ΅Π² ΠΈ сСстСр).

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ: Π΄Π°

Зависимости: —

О кодС

ΠœΠ½ΠΎΠ³ΠΎΠΊΠ½ΠΎΠΏΠΎΡ‡Π½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° для навСдСния Π½Π° ΠΏΠ»ΠΈΡ‚ΠΊΡƒ

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Firefox, Opera, Safari

ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ: Π΄Π°

Зависимости: —

О кодС

ΠŸΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ CSS Hover FX

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ: Π΄Π°

Зависимости: —

О кодС

CSS Hover FX

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ: Π΄Π°

Зависимости: —

Автор
  • МСлисса Π­ΠΌ
О кодС

Гладкая ΠΈ рСзкая

ΠŸΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ эффСкта навСдСния ΠΊΡ€Π°Π΅Π² Π½Π° чистом CSS.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Firefox, Opera, Safari

ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ: Π΄Π°

Зависимости: —

Автор
  • Π­Π½Π΄ΠΈ Бэрфут
О кодС

ВСссСляции ЭлСктронная торговля

ВСссСляция элСмСнтов сСтки элСктронной ΠΊΠΎΠΌΠΌΠ΅Ρ€Ρ†ΠΈΠΈ с эффСктами навСдСния.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Firefox, Opera, Safari

ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ: Π΄Π°

Зависимости: —

Автор
  • ΠšΡ€ΠΈΡ ΠšΠΎΠΉΠ΅Ρ€
О кодС

Анимация Π² ΡˆΠ°Ρ…ΠΌΠ°Ρ‚Π½ΠΎΠΌ порядкС

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ: Π΄Π°

Зависимости: —

О кодС

Чистый CSS Box Hover с Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΌ эффСктом

ΠŸΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора Π½Π° Ρ†ΠΈΡ‚Π°Ρ‚Ρ‹ Ρ„ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ ΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π²Ρ‹ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚Π΅ курсор.Π›ΡƒΡ‡ΡˆΠ΅ всСго ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ Π½Π° экранС ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚Π° ΠΈΠ»ΠΈ ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π°. Полная ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²ΠΎΡΡ‚ΡŒ всС Π΅Ρ‰Π΅ ΠΆΠ΅Π»Π°Ρ‚Π΅Π»ΡŒΠ½Π°.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: Π½Π΅Ρ‚

Зависимости: —

Автор
  • Π”Ρ€ΠΎΠ½ΠΊΠ° Π Π°ΡƒΠ»ΡŒ
БдСлано с
  • HTML / CSS (SCSS) / JavaScript (Babel)
О кодС

ΠšΠΈΠ½Π΅Ρ‚ΠΈΡ‡Π΅ΡΠΊΠ°Ρ магнитная Ρ‚ΠΎΡ‡ΠΊΠ°

ΠšΠΈΠ½Π΅Ρ‚ΠΈΡ‡Π΅ΡΠΊΠ°Ρ магнитная Ρ‚ΠΎΡ‡ΠΊΠ° с нСбольшим количСством JavaScript.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: Π½Π΅Ρ‚

Зависимости: —

О кодС

Π­Ρ„Ρ„Π΅ΠΊΡ‚ навСдСния для ящиков

Π­Ρ„Ρ„Π΅ΠΊΡ‚ навСдСния Π½Π° Π±Π»ΠΎΠΊΠΈ Π² HTML ΠΈ CSS.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ: Π΄Π°

Зависимости: font-awesome.css

Автор
  • Брэдли Π‘ΡƒΠ΄Π°Ρ‡
О кодС

Π­Ρ„Ρ„Π΅ΠΊΡ‚ парСния ΠΊΡ€ΡƒΠ³Π°

Π­Ρ„Ρ„Π΅ΠΊΡ‚ навСдСния ΠΊΡ€ΡƒΠΆΠΊΠ° Π½Π° чистом CSS.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: Π½Π΅Ρ‚

Зависимости: —

Автор
  • Π’ΠΈΠΊΡ‚ΠΎΡ€ΠšΠΎΡ€ΠΎΠ»ΡŽΠΊ
О кодС

Π­Ρ„Ρ„Π΅ΠΊΡ‚ навСдСния ΠΊΡ€ΡƒΠ³ΠΎΠ²ΠΎΠΉ ряби Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ

НавСдитС ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ Π½Π° ΠΊΠ°ΠΆΠ΄ΡƒΡŽ ΠΈΠ· ΠΊΠ½ΠΎΠΏΠΎΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ эффСкт Π² дСйствии.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Firefox, Opera, Safari

ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ: Π΄Π°

Зависимости: —

Автор
  • Π‘ΠΈΠ΄Π΄Ρ…Π°Ρ€Ρ‚Ρ… Π₯ΡƒΠ±Π»ΠΈ
О кодС

НавСдитС ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ Π½Π° ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π΅

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ свойства CSS: filter: drop-shadow () , clip-path: polygon () , CSS Grid.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Firefox, Opera, Safari

ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ: Π΄Π°

Зависимости: —

Автор
  • Π€ΠΈΡ‚Ρ€ΠΈ Али
О кодС

Π­Ρ„Ρ„Π΅ΠΊΡ‚ навСдСния, ΠΊΠ°ΠΊ Super Team Deluxe

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ: Π΄Π°

Зависимости: —

Автор
  • Π–ΡƒΠ°Π½ ΠœΠ°Ρ€ΡΠ΅Π»ΡŒ
О кодС

ЀутуристичСский 3D эффСкт навСдСния

МоТно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ, мСню ΠΈΠ»ΠΈ эффСкт.Он ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ CSS , ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ пСрспСктиву для создания ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ эффСкта, ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ³ΠΎ гололСнсам. ΠœΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ для ΠΌΠ½ΠΎΠ³ΠΈΡ… Π΄Ρ€ΡƒΠ³ΠΈΡ… случаСв использования, Ρƒ вас, вСроятно, Π±ΡƒΠ΄ΡƒΡ‚ свои собствСнныС ΠΈΠ΄Π΅ΠΈ. Π­Ρ‚ΠΎ ΡΠΊΡΠΏΠ΅Ρ€ΠΈΠΌΠ΅Π½Ρ‚Π°Π»ΡŒΠ½Π°Ρ идСя, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π΅ для использования Π² ΠΏΡ€ΠΎΠ΄Π°ΠΊΡˆΠ΅Π½Π΅.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: Π½Π΅Ρ‚

Зависимости: —

О кодС

ΠŸΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ содСрТимоС ΠΊΠ°Ρ€Ρ‚Ρ‹ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора

Π­Ρ„Ρ„Π΅ΠΊΡ‚ навСдСния чистой ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ Π² HTML ΠΈ CSS.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ: Π΄Π°

Зависимости: material-icons.css

Автор
  • Вобиас Глаус
О кодС

ΠŸΠΎΠ·Π²ΠΎΠ»ΡŒΡ‚Π΅ ΠΌΠ½Π΅ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Ρƒ вас Π΅ΡΡ‚ΡŒ!

Π­Ρ„Ρ„Π΅ΠΊΡ‚ навСдСния для бокса с ΠΌΠ΅Π΄ΠΈΠ°-ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ Π² HTML ΠΈ CSS.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ: Π΄Π°

Зависимости: —

О кодС

ΠšΠΎΡ€ΠΎΠ±ΠΊΠ° с эффСктом волшСбного Π·ΡƒΠΌΠ°

ΠšΠΎΡ€ΠΎΠ±ΠΊΠ° с Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌ Π²ΠΎΠ»ΡˆΠ΅Π±Π½Ρ‹ΠΌ эффСктом ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡ Π½Π° чистом CSS.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ: Π΄Π°

Зависимости: —

О кодС

Анимированный Π±Π»ΠΎΠΊ с эффСктами навСдСния

Анимированный бокс с эффСктами навСдСния Π² HTML ΠΈ CSS.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ: Π΄Π°

Зависимости: —

Автор
  • Π›ΡƒΠΊΠ°Ρˆ Π’Π΅Ρ€Π½Π΅Ρ€
О кодС

Анимация ΡƒΠ³Π»ΠΎΠ² ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ

Анимация ΡƒΠ³Π»ΠΎΠ² ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ° ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора Π½Π° чистый CSS.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ: Π΄Π°

Зависимости: —

Автор
  • Дэвид Π›Π΅ΠΉΠ½ΠΈΠ½Π³Π΅Ρ€
О кодС

Π­Ρ„Ρ„Π΅ΠΊΡ‚ навСдСния: Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ анимация ΠΈ фоновая анимация

Π­Ρ„Ρ„Π΅ΠΊΡ‚ навСдСния Π½Π° Ρ‚ΠΎΠ²Π°Ρ€. Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ выскакиваСт Π²Π²Π΅Ρ€Ρ… ΠΈ Π²Π½ΠΈΠ·, Π° Π·Π°Ρ‚Π΅ΠΌ Ρ„ΠΎΠ½ выдвигаСтся ΠΈ ΠΎΠΆΠΈΠ²Π°Π΅Ρ‚.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: Π½Π΅Ρ‚

Зависимости: —

Автор
  • ΠŸΠ°Ρ€ΠΊ Π”ΠΆΠΎΡ€Π΄ΠΆΠ° Π£.
БдСлано с
  • HTML
  • CSS
  • JavaScript / Babel
О кодС

Π­Ρ„Ρ„Π΅ΠΊΡ‚ ΠΏΡ€ΠΎΠΆΠ΅ΠΊΡ‚ΠΎΡ€Π° с Ρ€Π°Π΄ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΌ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠΌ

Π­Ρ‚ΠΎ ΠΏΠ΅Ρ€ΠΎ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, ΠΊΠ°ΠΊ Ρ€Π°Π΄ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Ρ‹ CSS ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для создания эффСкта фокусируСмого ΠΏΡ€ΠΎΠΆΠ΅ΠΊΡ‚ΠΎΡ€Π°.

Автор
  • Инь Π‘Π·Π΅Ρ‚ΠΎ
О кодС

Иконки парят

Π‘ΠΈΠΌΠΏΠ°Ρ‚ΠΈΡ‡Π½Ρ‹Π΅ эффСкты навСдСния для ΠΈΠΊΠΎΠ½ΠΎΠΊ.

О кодС

Π­Ρ„Ρ„Π΅ΠΊΡ‚ сбоя ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

Π£Π·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ эффСкт сбоя с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS clip-path Π±Π΅Π· JS.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Firefox, Opera, Safari

ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ: Π΄Π°

Зависимости: —

Автор
  • ΠšΠ²Π΅Π½Ρ‚ΠΈΠ½ Π’Π΅Ρ€ΠΎΠ½
БдСлано с
  • HTML / Мопс
  • CSS / SCSS
  • JavaScript
О кодС

Адаптивный 16/9 Thumbnail & Shine Hover Effect

Π­Ρ‚ΠΎΡ‚ эскиз ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ сторон 16/9 ΠΏΡ€ΠΈ любом Ρ€Π°Π·ΠΌΠ΅Ρ€Π΅.Π•ΡΡ‚ΡŒ эффСкт ΡΠΈΡΡŽΡ‰Π΅Π³ΠΎ навСдСния ΠΈ нСбольшая анимация ΠΏΡ€ΠΈ запускС Π²ΠΈΠ΄Π΅ΠΎ. Π­Ρ„Ρ„Π΅ΠΊΡ‚ сияния с использованиСм ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Ρ… CSS, Π²Π΄ΠΎΡ…Π½ΠΎΠ²Π»Π΅Π½Π½Ρ‹Ρ… Π Π°ΡƒΠ»Π΅ΠΌ Π”Ρ€ΠΎΠ½ΠΊΠ°.

Автор
  • Кэссиди Уильямс
О кодС

Анимация навСдСния

Один div анимация навСдСния.

ДСмонстрационный GIF: Attract Hover Effect

Attract Hover Effect

ΠŸΡ€ΠΈΠ²Π»Π΅ΠΊΠ°ΠΉΡ‚Π΅ эффСкт навСдСния с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ HTML, CSS ΠΈ JavaScript.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Π›ΡƒΠΈ Π₯ёбрСгсом
6 июля 2017 г.

Π”Π΅ΠΌΠΎ-ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅: Π­Ρ„Ρ„Π΅ΠΊΡ‚ навСдСния пСрспСктивы Π½Π° чистом CSS

Π­Ρ„Ρ„Π΅ΠΊΡ‚ навСдСния пСрспСктивы Π½Π° чистом CSS

Бписок Π±Π»ΠΎΠΊΠΎΠ² с эффСктом пСрспСктивы.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Максимом Π›Π°Ρ„Π°Ρ€ΠΈ
6 июля 2017 г.

ДСмонстрационноС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅: Π­Ρ„Ρ„Π΅ΠΊΡ‚ навСдСния изобраТСния

Π­Ρ„Ρ„Π΅ΠΊΡ‚ навСдСния Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅

Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с эффСктом отраТСния ΠΈ приблиТСния ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Вьяго АлСксандр ЛопСс
2 июня 2017 г.

ДСмонстрационноС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅: Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ навСдСния для слоТСнных ΠΊΠ°Ρ€Ρ‚

Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ навСдСния для слоТСнных ΠΊΠ°Ρ€Ρ‚

ΠŸΡ€ΠΎΡΡ‚ΠΎ ΠΏΠΎΠΈΠ³Ρ€Π°ΠΉΡ‚Π΅ с Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ CSS-ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π°ΠΌΠΈ ΠΈ эффСктами навСдСния.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Кайл Π‘Ρ€Π°ΠΌΠΌ
17 мая 2017 г.

Автор
  • ΠŸΠ°Ρ‚Π΅Π½Ρ‚ Π ΡƒΡΡŒ
О кодС

Π Π°Π·ΠΌΡ‹Ρ‚ΠΈΠ΅ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° чистый CSS

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ: Π΄Π°

Зависимости: —

ДСмонстрационноС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅: CSS 3D Hover

CSS 3D Hover

Чистый 3D-эффСкт навСдСния CSS для ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ахил Π‘Π°ΠΉ Π Π°ΠΌ
24 дСкабря 2016 Π³.

Автор
  • Бастиан АндрС
О кодС

ΠŸΠΎΠ΄Π½ΡΡ‚Ρ‹Π΅ Π±ΡƒΠΌΠ°ΠΆΠ½Ρ‹Π΅ полоски

ΠŸΠΎΠ΄Π½ΡΡ‚Ρ‹Π΅ Π±ΡƒΠΌΠ°ΠΆΠ½Ρ‹Π΅ полоски (эффСкт навСдСния).

Π”Π΅ΠΌΠΎ-ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅: 10 ΡΡ‚ΠΈΠ»ΡŒΠ½Ρ‹Ρ… эффСктов навСдСния с LESS

10 ΡΡ‚ΠΈΠ»ΡŒΠ½Ρ‹Ρ… эффСктов навСдСния с LESS

НСбольшая коллСкция ΡΡ‚ΠΈΠ»ΡŒΠ½Ρ‹Ρ… эффСктов с LESS.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Π Π΅Π½Π°Π½ΠΎΠΌ К. АрауТо
13 октября 2016 Π³.

ДСмонстрационноС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅: 10 ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΠΈΡ… эффСктов ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° SCSS

10 ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΠΈΡ… эффСктов ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° SCSS

НСбольшая коллСкция ΡΡ‚ΠΈΠ»ΡŒΠ½Ρ‹Ρ… эффСктов с SCSS.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Π Π΅Π½Π°Π½ΠΎΠΌ К. АрауТо
13 октября 2016 Π³.

ДСмонстрационноС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅: Визуализация Ρ‚Ρ€Π΅Ρ…ΠΌΠ΅Ρ€Π½ΠΎΠΉ пСрспСктивы Π½Π° чистом CSS с : Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Анимация

Визуализация Ρ‚Ρ€Π΅Ρ…ΠΌΠ΅Ρ€Π½ΠΎΠΉ пСрспСктивы Π½Π° чистом CSS с

: Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Анимация

Π‘ΠΎΠ²Π΅Ρ‚: Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ этот Ρ‚Ρ€Π΅Ρ…ΠΌΠ΅Ρ€Π½Ρ‹ΠΉ Π²ΠΈΠ΄, Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π·Π½Π°Ρ‚ΡŒ Π΄Π΅Ρ‚Π°Π»ΠΈ, Π΄Π»ΠΈΠ½Π° слова Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Π° Π½ΠΎΠΌΠ΅Ρ€Ρƒ свойства пСрспСктивы Ρ‚Π΅Π»Π°.Если Π΄Π»ΠΈΠ½Π° этого слова увСличиваСтся, Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒ пСрспСктиву πŸ™‚
Π‘Π΄Π΅Π»Π°Π½ΠΎ РафаэлСм ГонсалСсом
16 сСнтября 2016 Π³.

О кодС

CSS Only Fade Siblings On Hover

Π£Π±Ρ€Π°Ρ‚ΡŒ всСх Π±Ρ€Π°Ρ‚ΡŒΠ΅Π² ΠΈ сСстСр ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора Π½Π° элСмСнт, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ CSS.

Автор
  • Π”ΠΆΠ΅Ρ€Π΅ΠΌΠΈ Π‘ΡƒΠ»Π΅
О кодС

Π­Ρ„Ρ„Π΅ΠΊΡ‚ навСдСния для Discover A Project Link

Π­Ρ„Ρ„Π΅ΠΊΡ‚ навСдСния, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, для обнаруТСния названия ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° Π² ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ.

Π”Π΅ΠΌΠΎ-ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅: Hover Squares

Hover Squares

Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ΠΎΠ² HTML ΠΈ CSS.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Π ΡƒΠ΄ΠΎΠ»ΡŒΡ„ΠΎΠΌ Π²Π°Π½ Π΄Π΅Ρ€ Π’Π΅Π½ΠΎΠΌ
8 дСкабря 2015 Π³.

Автор
  • Никола ΠŸΡ€Π΅ΡΡ
О кодС

Π­Ρ„Ρ„Π΅ΠΊΡ‚ навСдСния

Анимационный эффСкт навСдСния.

Автор
  • Николай Π’Π°Π»Π°Π½ΠΎΠ²
О кодС

ΠšΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΡ вопросника Π½Π° чистом CSS

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: Π½Π΅Ρ‚

Зависимости: —

ДСмонстрационный GIF: 3D-эффСкт навСдСния с ΡƒΠΊΠ°Π·Π°Π½ΠΈΠ΅ΠΌ направлСния

3D-эффСкт навСдСния с ΡƒΠΊΠ°Π·Π°Π½ΠΈΠ΅ΠΌ направлСния

CSS ΠΈ Π±ΠΈΡ‚Ρ‹ JS.
Π‘Π΄Π΅Π»Π°Π½ΠΎ НоэлСм Π”Π΅Π»ΡŒΠ³Π°Π΄ΠΎ
30 октября 2014 Π³.

ДСмонстрационный GIF: CSS3 Hover Effects

CSS3 Hover Effects

На основС tympanus.net, дСмонстрации Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π° эффСктов навСдСния курсора CSS3.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Π² honglio
21 ноября 2013 Π³.

ДСмонстрация GIF: Анимация навСдСния

Анимация навСдСния

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ jQuery для добавлСния / удалСния классов ΠΈ запуска Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора ΠΌΡ‹ΡˆΠΈ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠœΡΡ‚Ρ‚ΠΎΠΌ Π‘ΠΎΠ»Π΄Ρ‚ΠΎΠΌ
8 июля 2013 г.

Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ эффСктов зависания

HTML ΠΈ CSS (5 элСмСнтов).

Π”Π΅ΠΌΠΎ-ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅: Hover.css

Hover.css

ΠšΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡ CSS3-эффСктов навСдСния, примСняСмых ΠΊ ссылкам, ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ, Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠ°ΠΌ, SVG, ΠΈΠ·Π±Ρ€Π°Π½Π½Ρ‹ΠΌ изобраТСниям ΠΈ Ρ‚. Π”. Π›Π΅Π³ΠΊΠΎ примСняйтС ΠΊ своим собствСнным элСмСнтам, измСняйтС ΠΈΠ»ΠΈ просто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ для вдохновСния. ДоступСн Π² CSS, Sass ΠΈ LESS.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Π―Π½ΠΎΠΌ Π›Π°Π½Π½ΠΎΠΌ

Π”Π΅ΠΌΠΎ-ΠΎΠ±Ρ€Π°Π·: iHover.css

iHover.css

iHover — это коллСкция эффСктов навСдСния с использованиСм чистого CSS, вдохновлСнная ΡΡ‚Π°Ρ‚ΡŒΠ΅ΠΉ codrops, созданной Π½Π° Sass.
Π‘Π΄Π΅Π»Π°Π½ΠΎ gudh

ДСмонстрационноС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅: Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ навСдСния Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅

Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ навСдСния Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅

Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ навСдСния изобраТСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ с Bootstrap ΠΈΠ»ΠΈ Π±Π΅Π· Π½Π΅Π³ΠΎ.
БдСлано Майклом

Π”Π΅ΠΌΠΎ-ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅: Mocassin.css

Mocassin.css

Mocassin.css — это Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Π½Π°Π±ΠΎΡ€ эффСктов навСдСния для подписСй, созданный Π½Π° основС Sass. КаТдая подпись адаптируСтся ΠΊ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρƒ изобраТСния.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ЭлиэзСром ΠŸΡƒΠΉΠΎΠ»ΡŒΡΠΎΠΌ

Π”Π΅ΠΌΠΎ-ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅: HoverEffects.css

HoverEffects.css

НСсколько эффСктов навСдСния для Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ (CSS3).
БдСлано КСвином Яннисом

ΠŸΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ | Webflow University

Π’ этом Π²ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊΠ΅ ΠΌΡ‹ рассмотрим использованиС Ρ‚Ρ€ΠΈΠ³Π³Π΅Ρ€Π½ΠΎΠ³ΠΎ элСмСнта, Ρ‚Π°ΠΊΠΎΠ³ΠΎ ΠΊΠ°ΠΊ этот Π±Π»ΠΎΠΊ ссылок, для воздСйствия Π½Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ Π΅Π³ΠΎ Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΡ… элСмСнтов (Π·Π½Π°Ρ‡ΠΎΠΊ сСрдца ΠΈ нСпристойныС Ρ†Π΅Π½Ρ‹ Π½Π° ΠΏΠΎΠ½Ρ‡ΠΈΠΊΠΈ).

Π‘Π΄Π΅Π»Π°Π΅ΠΌ это Π·Π° 3 шага. Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡƒΡŽ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ, ΠΏΡ€ΠΎΠ΄Π΅Π»Ρ‹Π²Π°Π΅ΠΌ Ρ‚ΠΎ ΠΆΠ΅ самоС для зависания, Π° Π·Π°Ρ‚Π΅ΠΌ примСняСм Π΅Π΅ ΠΊΠΎ всСм Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°ΠΌ ΠΏΠΎΠ½Ρ‡ΠΈΠΊΠ°.

НачнСм с создания Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора.

Π‘Π΄Π΅Π»Π°Π΅ΠΌ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ссылка Π±Π»ΠΎΠΊΠΈΡ€ΠΎΠ²Π°Π»Π° Ρ‚Ρ€ΠΈΠ³Π³Π΅Ρ€. Π”Ρ€ΡƒΠ³ΠΈΠΌΠΈ словами, Π²Ρ‹Π±Ρ€Π°Π² наш Π±Π»ΠΎΠΊ ссылок, ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΡΠ»Π΅Π΄ΠΈΡ‚ΡŒ Π·Π° Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора ΠΌΡ‹ΡˆΠΈ (ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора Π½Π° этот Π±Π»ΠΎΠΊ ссылок) Π·Π°ΠΏΡƒΡΠΊΠ°Π»Π°ΡΡŒ анимация. (ΠœΡ‹ воспроизвСдСм Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ собираСмся ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ, ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора Π½Π° этот Π±Π»ΠΎΠΊ ссылок.)

Как Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΌΡ‹ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Π΅ΠΌ ΠΊ созданию этой Π½ΠΎΠ²ΠΎΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, ΠΌΡ‹ Π΄Π°Π΄ΠΈΠΌ Π΅ΠΉ имя, ΠΈ ΠΌΡ‹ смоТСм сразу Π½Π°Ρ‡Π°Ρ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ. Π”Π°Π²Π°ΠΉΡ‚Π΅ Π½Π°Ρ‡Π½Π΅ΠΌ с Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ возьмСм нашС сСрдцС ΠΈ пСрСмСстим Π΅Π³ΠΎ Π²Π»Π΅Π²ΠΎ. ΠœΡ‹ просто Π΄Π΅Π»Π°Π΅ΠΌ дСйствиС (ΠΈΠ»ΠΈ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠΉ ΠΊΠ°Π΄Ρ€), ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Π΅Ρ‚ сСрдцС Π²Π»Π΅Π²ΠΎ. ΠœΡ‹ Ρ‚Π°ΠΊΠΆΠ΅ Ρ…ΠΎΡ‚ΠΈΠΌ ΡƒΠ±Π΅Π΄ΠΈΡ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ это Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅ состояниС (ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‚Π°ΠΊ Π±ΡƒΠ΄Π΅Ρ‚ располоТСно сСрдцС ΠΏΡ€ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅ страницы).

Π‘Π΄Π΅Π»Π°Π΅ΠΌ Π½Π΅Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ΅ ΠΏΠΎ Ρ†Π΅Π½Π΅. Π’Ρ‹Π±Ρ€Π°Π² Ρ†Π΅Π½Ρƒ, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π΅Π΅ Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅ состояниС Ρ‚Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΌΡ‹ установили Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅ состояниС для нашСго сСрдца.Π—Π° ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ΠΌ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Π΅ΠΌ Π΅Π³ΠΎ Π²ΠΏΡ€Π°Π²ΠΎ.

И всС, Ρ‡Ρ‚ΠΎ Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ послС этого? Π­Ρ‚ΠΎ Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ Π² ΠΏΠΎΠ»Π΅ зрСния сСрдцС ΠΈ Ρ†Π΅Π½Ρƒ. И ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ это сразу для Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… элСмСнтов. ΠœΡ‹ просто ΡƒΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅ΠΌ Shift ΠΈ Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ Π²Ρ‚ΠΎΡ€ΠΎΠΉ элСмСнт. Π—Π°Ρ‚Π΅ΠΌ ΠΌΡ‹ Ρ‰Π΅Π»ΠΊΠ½Π΅ΠΌ ΠΏΡ€Π°Π²ΠΎΠΉ ΠΈΠ»ΠΈ Π»Π΅Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄ΡƒΠ±Π»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ.

Для этой Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ ΠΊΠ°ΠΆΠ΄ΡƒΡŽ ΠΈΠ· Π½ΠΈΡ… ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎ Π² Π½Π°Ρ‡Π°Π»ΠΎ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚. 0 пиксСлСй.

А Ссли Π½Π°ΠΆΠ°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ воспроизвСдСния прямо сСйчас, Ρ‚ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚. ΠŸΡ€ΠΎΡΡ‚ΠΎ это Π±Ρ‹Π²Π°Π΅Ρ‚ скучно ΠΈ Π»ΠΈΠ½Π΅ΠΉΠ½ΠΎ. Для смягчСния Π΄Π°Π²Π°ΠΉΡ‚Π΅ Π²Ρ‹Π±Π΅Ρ€Π΅ΠΌ Ρ‡Ρ‚ΠΎ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ, Ρ‡Ρ‚ΠΎ сгладит это.ΠœΡ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΎΠΊΡ€Π°Ρ‚ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ…ΠΎΠ΄ Π±Ρ‹Π» Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ быстрСС. Если сСйчас Π½Π°ΠΆΠ°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ воспроизвСдСния? Π­Ρ‚ΠΎ Π½Π°Ρ‡ΠΈΠ½Π°Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ Π»ΡƒΡ‡ΡˆΠ΅.

И Ссли ΠΌΡ‹ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Π΅ΠΌ Π² Ρ€Π΅ΠΆΠΈΠΌ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ просмотра, ΠΌΡ‹ ΡƒΠ²ΠΈΠ΄ΠΈΠΌ, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ указатСля ΠΌΡ‹ΡˆΠΈ ΠΎΠ½ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ ΠΌΡ‹ ΠΎΠΆΠΈΠ΄Π°Π»ΠΈ. Волько это случаСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ Ρ€Π°Π·. ΠŸΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ происходит, ΠΊΠΎΠ³Π΄Π° ΠΌΡ‹ зависаСм.

Π­Ρ‚ΠΎ Π²ΠΈΡ‚Π°Π΅Ρ‚ Π² Π²ΠΎΠ·Π΄ΡƒΡ…Π΅. Π”Π°Π²Π°ΠΉ займСмся зависаниСм.

Π˜Ρ‚Π°ΠΊ. Π”Π°Π²Π°ΠΉΡ‚Π΅ Π·Π°ΠΊΡ€ΠΎΠ΅ΠΌ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‡Ρ‚ΠΎ ΡΠΎΠ·Π΄Π°Π½Π½ΡƒΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ. Π­Ρ‚ΠΎ Π±Ρ‹Π»Π° анимация, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΌΡ‹ создали для навСдСния … Π΄Π°Π²Π°ΠΉΡ‚Π΅ просто ΠΏΡ€ΠΎΠ΄ΡƒΠ±Π»ΠΈΡ€ΡƒΠ΅ΠΌ Π΅Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΌΡ‹ ΠΌΠΎΠ³Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π΅ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора.И ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ — ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΡ€ΠΎΠ΄ΡƒΠ±Π»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ это прямо здСсь. Как Ρ‚ΠΎΠ»ΡŒΠΊΠΎ это Π±ΡƒΠ΄Π΅Ρ‚ сдСлано, ΠΌΡ‹ займСмся настройкой.

НачнСм с Π΅Π³ΠΎ пСрСимСнования. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°Π·Π²Π°Ρ‚ΡŒ своС ΠΊΠ°ΠΊ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅. Никакого суТдСния. И, ΠΏΠΎ сути, для Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ всС, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ здСсь Π΄Π΅Π»Π°Π΅ΠΌ, — это пытаСмся Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ наши элСмСнты Π² ΠΈΡ… исходныС ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ послСднюю Ρ‡Π°ΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΌΡ‹ сдСлали Ρ€Π°Π½ΡŒΡˆΠ΅, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π½Π΅Ρ‚ ΠΏΡ€ΠΈΡ‡ΠΈΠ½ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ-Π»ΠΈΠ±ΠΎ Π² Π½Π°Ρ‡Π°Π»ΠΎ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚.

И для этих Π΄Π²ΡƒΡ…, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΎΠ±Π° сразу, Π° просто Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅ состояниС.Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ, ΠΎΡ‚ΠΊΡƒΠ΄Π° Π±Ρ‹ ΠΎΠ½ΠΈ Π½ΠΈ Π±Ρ‹Π»ΠΈ, ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎ Π² свои ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ здСсь установлСны (Π²Π½Π΅ Π±Π»ΠΎΠΊΠ° ссылок). ΠœΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ослаблСниС, ΠΊΠ°ΠΊ ΠΈ Ρ€Π°Π½ΡŒΡˆΠ΅, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ.

Π’Π°ΠΊ Ρ‡Ρ‚ΠΎ это Π·Π½Π°Ρ‡ΠΈΡ‚? Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Ссли ΠΌΡ‹ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Π΅ΠΌ Π² Ρ€Π΅ΠΆΠΈΠΌ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ просмотра, это Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора — ΠΈ ΠΎΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора. Но сСйчас ΠΎΠ½ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с ΠΎΠ΄Π½ΠΈΠΌ элСмСнтом.

Π”Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠΌ Π΅Π³ΠΎ ΠΊ Π΄Ρ€ΡƒΠ³ΠΈΠΌ ΠΏΠΎΠ½Ρ‡ΠΈΠΊΠ°ΠΌ.

Как Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ? Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, Π² ΠΎΠ±Π΅ΠΈΡ… анимациях (ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора) с Π»ΡŽΠ±Ρ‹ΠΌ дСйствиСм (ΠΈΠ»ΠΈ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹ΠΌ ΠΊΠ°Π΄Ρ€ΠΎΠΌ), Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹ΠΌ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ элСмСнта, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΠΎΠ²Π»ΠΈΡΡ‚ΡŒ Π½Π° класс.Π­Ρ‚ΠΎ Π²Π°ΠΆΠ½ΠΎ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΌΡ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΠΌ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π΅Π³ΠΎ для воздСйствия Π½Π° Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠ΅ элСмСнты Ρ‚Ρ€ΠΈΠ³Π³Π΅Ρ€Π°. Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅: ΠΊΠΎΠ³Π΄Π° ΠΌΡ‹ запускаСм Π±Π»ΠΎΠΊ ссылок, наводя Π½Π° Π½Π΅Π³ΠΎ курсор, Π΅Π³ΠΎ Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠ΅ элСмСнты (Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠ΅ элСмСнты этого Π±Π»ΠΎΠΊΠ° ссылок) Π±ΡƒΠ΄ΡƒΡ‚ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Ρ‹.

ΠœΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ это с ΠΎΠ±Π΅ΠΈΠΌΠΈ анимациями — это ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΠΈΡ‚ΡŒ ΠΈ ΠΏΡ€ΠΎΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚ΠΎ ΠΆΠ΅ самоС с Π΄Ρ€ΡƒΠ³ΠΎΠΉ. И ΠΊΠ°ΠΊ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΌΡ‹ это сдСлаСм, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π·Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ ΠΈ ΡƒΠ±Π΅Π΄ΠΈΡ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ запускаСм эти Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ для всСх Π½Π°ΡˆΠΈΡ… Π±Π»ΠΎΠΊΠΎΠ² ссылок — всСх ΠΏΠΎΠ½Ρ‡ΠΈΠΊΠΎΠ².

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚? Π£ нас Π΅ΡΡ‚ΡŒ анимация, которая ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΈ Π²Ρ‹Ρ…ΠΎΠ΄Π΅ ΠΈΠ· ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° ссылок.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ CSS-анимация ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора ΠΈ ΠΊΠ°ΠΊ Π΅Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ?

CSS-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠ΅Ρ€ΡΠΎΠ½Π°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ваш сайт ΠΈ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ приятныС впСчатлСния для посСтитСлСй. Когда ΠΏΠΎΡΠ΅Ρ‚ΠΈΡ‚Π΅Π»ΡŒ Π²Π΅Π±-сайта Π½Π°Π²ΠΎΠ΄ΠΈΡ‚ курсор Π½Π° Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ элСмСнт, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ссылку ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΊΡƒ, ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ†Π²Π΅Ρ‚, ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Ρ‚ΡŒΡΡ, ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Ρ‚ΡŒΡΡ, Π²Ρ€Π°Ρ‰Π°Ρ‚ΡŒΡΡ ΠΈ Ρ‚. Π”. Π’ зависимости ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Ρ‹ Π΅Π³ΠΎ Π·Π°ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²Π°Π»ΠΈ. Π­Ρ‚ΠΎ приятно для посСтитСля ΠΈ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ваш сайт Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚.

Благодаря CSS интСрфСйсныС Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΠΎΠ³ΡƒΡ‚ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ ΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹ Π±Π΅Π· JavaScript ΠΈΠ»ΠΈ Flash.Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ созданиС Ρ‚Π°ΠΊΠΎΠΉ интСрактивности стало ΠΏΡ€ΠΎΡ‰Π΅ ΠΈ дСшСвлС, Ρ‡Π΅ΠΌ Ρ€Π°Π½ΡŒΡˆΠ΅.

Как анимация CSS, Ρ‚Π°ΠΊ ΠΈ свойства ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΡƒΠΊΠ°Π·Π°Π½Ρ‹ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ псСвдоклассов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ особоС состояниС элСмСнта. Волько Π² этом состоянии элСмСнт измСнится с ΠΎΠ΄Π½ΠΎΠ³ΠΎ стиля Π½Π° Π΄Ρ€ΡƒΠ³ΠΎΠΉ. ΠŸΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΡ‹ Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚:

  • : hover — ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚ курсор Π½Π° элСмСнт
  • : фокус — ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Ρ‰Π΅Π»ΠΊΠ°Π΅Ρ‚ ΠΈΠ»ΠΈ касаСтся элСмСнта, ΠΈΠ»ΠΈ Π²Ρ‹Π±ΠΈΡ€Π°Π΅Ρ‚ Π΅Π³ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ клавиши Tab Π½Π° своСй ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Π΅
  • : Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ — ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ‚ Π½Π° элСмСнт
  • : Ρ†Π΅Π»ΡŒ — ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ‚ Π½Π° Π΄Ρ€ΡƒΠ³ΠΎΠΉ элСмСнт

Из ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹Ρ… Π²Ρ‹ΡˆΠ΅ псСвдоклассов: hover являСтся Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ распространСнным.

Π’ этом постС ΠΌΡ‹ прСдоставим всС, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π·Π½Π°Ρ‚ΡŒ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ ΠΈΠ»ΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° своСм Π²Π΅Π±-сайтС.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ CSS-анимация навСдСния?

CSS-анимация ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ‚, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚ курсор Π½Π° элСмСнт, ΠΈ элСмСнт ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠΌ эффСктом ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π°. Он ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для выдСлСния ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… элСмСнтов Π½Π° Π²Π΅Π±-страницС ΠΈ являСтся эффСктивным способом ΠΏΠΎΠ²Ρ‹ΡˆΠ΅Π½ΠΈΡ интСрактивности вашСго сайта.

ВзглянитС Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π½ΠΈΠΆΠ΅.Если Π²Ρ‹ Π½Π°Π²Π΅Π΄Π΅Ρ‚Π΅ курсор Π½Π° div, ΠΎΠ½ постСпСнно измСнится ΠΎΡ‚ свСтло-Ρ€ΠΎΠ·ΠΎΠ²ΠΎΠ³ΠΎ Π΄ΠΎ Ρ‚Π΅ΠΌΠ½ΠΎ-Ρ€ΠΎΠ·ΠΎΠ²ΠΎΠ³ΠΎ.

Π‘ΠΌ. CSS-ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ ΠΏΠ΅Ρ€Π° ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора ΠšΡ€ΠΈΡΡ‚ΠΈΠ½Ρ‹ ΠŸΠ΅Ρ€Ρ€ΠΈΠΊΠΎΠ½Π΅ (@hubspot) Π½Π° CodePen.

Π₯отя это ΠΏΠΎΡ…ΠΎΠΆΠ΅ Π½Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ, Π½Π° самом Π΄Π΅Π»Π΅ это ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄. Π­Ρ‚ΠΈ Π΄Π²Π° Ρ‚Π΅Ρ€ΠΌΠΈΠ½Π° часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ ΠΊΠ°ΠΊ синонимы, Π½ΠΎ анимация ΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹ Ρ€Π°Π·Π»ΠΈΡ‡Π°ΡŽΡ‚ΡΡ.

ΠŸΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΈ внСшний Π²ΠΈΠ΄ элСмСнта, Π½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΡ€ΠΈ Π½Π°Π»ΠΈΡ‡ΠΈΠΈ Ρ‚Ρ€ΠΈΠ³Π³Π΅Ρ€Π°, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚ курсор Π½Π° элСмСнт.ПослС срабатывания ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΈΠ· Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ состояния Π² ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠ΅. Π’Ρ‹ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΎΡ‡Π½Ρ‹Π΅ Ρ‚ΠΎΡ‡ΠΊΠΈ, ΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ Ρ€Π°Π·.

Анимации, с Π΄Ρ€ΡƒΠ³ΠΎΠΉ стороны, ΠΌΠΎΠ³ΡƒΡ‚ Π·Π°Ρ†ΠΈΠΊΠ»ΠΈΠ²Π°Ρ‚ΡŒΡΡ, ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒΡΡ Π² ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠΌ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠΈ ΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΎΡ‚ Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ состояния ΠΊ ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΎΡ‡Π½ΠΎΠΌΡƒ ΡΠΎΡΡ‚ΠΎΡΠ½ΠΈΡŽ ΠΊ ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΌΡƒ ΡΠΎΡΡ‚ΠΎΡΠ½ΠΈΡŽ благодаря ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹ΠΌ ΠΊΠ°Π΄Ρ€Π°ΠΌ.

ΠšΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ ΠΊΠ°Π΄Ρ€Ρ‹ ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ Π½Π°Ρ‡Π°Π»ΠΎ ΠΈ ΠΊΠΎΠ½Π΅Ρ† Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π»ΡŽΠ±Ρ‹Π΅ ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΎΡ‡Π½Ρ‹Π΅ шаги ΠΌΠ΅ΠΆΠ΄Ρƒ Π½Π°Ρ‡Π°Π»ΠΎΠΌ ΠΈ ΠΊΠΎΠ½Ρ†ΠΎΠΌ. Π”Ρ€ΡƒΠ³ΠΈΠΌΠΈ словами, ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠΉ ΠΊΠ°Π΄Ρ€ описываСт, ΠΊΠ°ΠΊ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ элСмСнт Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π² Π·Π°Π΄Π°Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Π²ΠΎ врСмя ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.

Π”Π°Π²Π°ΠΉΡ‚Π΅ посмотрим Π½Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ отскока Π½ΠΈΠΆΠ΅.

ΠžΡ‚ΡΠΊΠΎΠΊ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ посСтитСля вашСго Π²Π΅Π±-сайта, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ эффСкт отскока, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚ курсор Π½Π° элСмСнт. ВсС, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, это ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ свойства Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΈ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ ΠΊΠ°Π΄Ρ€Ρ‹. ПозТС Π² этом постС ΠΌΡ‹ рассмотрим, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ шаг Π·Π° шагом; Π° ΠΏΠΎΠΊΠ° ΠΌΡ‹ просто ΠΊΡ€Π°Ρ‚ΠΊΠΎ рассмотрим этот ΠΏΡ€ΠΈΠΌΠ΅Ρ€.

Π’ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ я ΠΏΠΎΠΌΠ΅Ρ‰Π°ΡŽ div Π² Π³ΠΈΠ±ΠΊΠΈΠΉ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² этой ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ области ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° ΠΈ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒΡΡ с Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ ΠΈΠ»ΠΈ Π°Π±Π·Π°Ρ†Π΅ΠΌ.

Π—Π°Ρ‚Π΅ΠΌ я ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ, которая Π·Π°Π²Π΅Ρ€ΡˆΠΈΡ‚ отскок Π·Π° Π΄Π²Π΅ сСкунды ΠΈ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ бСсконСчно (ΠΏΠΎΠΊΠ° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°Π΅Ρ‚ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚ΡŒ курсор Π½Π° div). Π― Ρ‚Π°ΠΊΠΆΠ΅ установил для Π½Π΅Π³ΠΎ врСмя Π»Π΅Π³ΠΊΠΎΡΡ‚ΡŒ , Ρ‡Ρ‚ΠΎΠ±Ρ‹ анимация Π½Π°Ρ‡ΠΈΠ½Π°Π»Π°ΡΡŒ ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎ, ΡƒΡΠΊΠΎΡ€ΡΠ»Π°ΡΡŒ, Π° Π·Π°Ρ‚Π΅ΠΌ замСдлялась.

НаконСц, я ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡŽ Ρ‚Ρ€ΠΈ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… ΠΊΠ°Π΄Ρ€Π°. ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ установит Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅ состояниС Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. Π’ 0% , ΠΈΠ»ΠΈ Π² ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, элСмСнт Π±ΡƒΠ΄Π΅Ρ‚ Π² 0 пиксСлСй ΠΏΠΎ оси Y. ΠŸΡ€ΠΈ 50% ΠΈΠ»ΠΈ Π½Π° сСрСдинС ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ элСмСнт пСрСмСстится Π½Π° 100 пиксСлСй Π²Π²Π΅Ρ€Ρ… ΠΏΠΎ оси Y.Π’ Ρ‚ΠΎΡ‡ΠΊΠ΅ 100% ΠΈΠ»ΠΈ Π² ΠΊΠΎΠ½Ρ†Π΅ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΎΠ½ вСрнСтся Ρ‚ΡƒΠ΄Π°, Π³Π΄Π΅ ΠΎΠ½ Π±Ρ‹Π» Π½Π°Ρ‡Π°Ρ‚ ΠΏΠΎ оси Y, Π·Π°Π²Π΅Ρ€ΡˆΠΈΠ² свой отскок.

ВзглянитС Π½Π° Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π½ΠΈΠΆΠ΅.

Π‘ΠΌ. «ΠžΡ‚скок ΠΏΠ΅Ρ€Π° ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ» ΠšΡ€ΠΈΡΡ‚ΠΈΠ½Ρ‹ ΠŸΠ΅Ρ€Ρ€ΠΈΠΊΠΎΠ½Π΅ (@hubspot) Π½Π° CodePen.

Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Ρ‹ ΡƒΠΆΠ΅ Π·Π°ΠΌΠ΅Ρ‚ΠΈΠ»ΠΈ, Ρ‡Ρ‚ΠΎ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ эффСкт отскока с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойства ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π°. Π­Ρ‚ΠΎ ΠΏΠΎΡ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅ ΠΈ ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠ΅ состояниС ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π½ΠΎΠ³ΠΎ элСмСнта, Π° Π½Π΅ ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΎΡ‡Π½ΡƒΡŽ Ρ‚ΠΎΡ‡ΠΊΡƒ.Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π΄Π²ΠΈΠ³Π°Ρ‚ΡŒΡΡ Π²Π²Π΅Ρ€Ρ… ΠΏΠΎ оси Y, Π½ΠΎ Π²Ρ‹ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ двигался Π½Π°Π·Π°Π΄ ΠΏΠΎ оси Y, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°Π²Π΅Ρ€ΡˆΠΈΡ‚ΡŒ отскок.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ, ΠΊΠΎΠ³Π΄Π° ΠΌΡ‹ Π±ΠΎΠ»Π΅Π΅ Π·Π½Π°ΠΊΠΎΠΌΡ‹ с CSS-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ навСдСния ΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π°ΠΌΠΈ, Π΄Π°Π²Π°ΠΉΡ‚Π΅ посмотрим, Π·Π°Ρ‡Π΅ΠΌ Π²Π°ΠΌ Ρ‚Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ врСмя ΠΈ рСсурсы Π½Π° ΠΈΡ… созданиС.

Как ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ CSS ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

ИспользованиС псСвдокласса: hover Π² CSS ΠΈΠΌΠ΅Π΅Ρ‚ нСсколько ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… прСимущСств.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ для ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡ΠΈ Π²Π°ΠΆΠ½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ вашим посСтитСлям. НапримСр, ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π²Π΅Π±-сайты Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ эффСкт навСдСния курсора Π½Π° свои ссылки, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΈΡ… ΠΎΡ‚ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ тСкста Π½Π° своСм сайтС.

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ изобраТСния

НСкоторыС Π²Π΅Π±-сайты Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ эффСкт навСдСния, поэтому Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ информация появляСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚ΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚ курсор Π½Π° элСмСнт. Π’ ΠΏΡ€ΠΎΡ‚ΠΈΠ²Π½ΠΎΠΌ случаС ΠΎΠ½ остаСтся скрытым. Π­Ρ‚ΠΎ идСально ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для добавлСния подсказок Π½Π° ваш сайт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ принСсти ΠΏΠΎΠ»ΡŒΠ·Ρƒ Π½ΠΎΠ²ΠΈΡ‡ΠΊΠ°ΠΌ, Π½ΠΎ Ρ€Π°Π·Π΄Ρ€Π°ΠΆΠ°ΡŽΡ‚ Π±ΠΎΠ»Π΅Π΅ ΠΎΠΏΡ‹Ρ‚Π½Ρ‹Ρ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ. Π’ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° Баши Π’Ρ€Π°Π½.

Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ эффСкт навСдСния, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ±ΡƒΠ΄ΠΈΡ‚ΡŒ посСтитСлСй ΡΠΎΠ²Π΅Ρ€ΡˆΠΈΡ‚ΡŒ дСйствиС Π½Π° вашСм сайтС. НапримСр, ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚ Π½Π° Π½Π΅Π΅ курсор, ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΌΠΎΡ‡ΡŒ ΡƒΠ±Π΅Π΄ΠΈΡ‚ΡŒ Π΅Π³ΠΎ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ Ρ„ΠΎΡ€ΠΌΡƒ, ΡΠΎΠ²Π΅Ρ€ΡˆΠΈΡ‚ΡŒ ΠΏΠΎΠΊΡƒΠΏΠΊΡƒ ΠΈΠ»ΠΈ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ любой ΠΏΡ€ΠΈΠ·Ρ‹Π² ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ, ΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ ΠΊΠ½ΠΎΠΏΠΊΠ°.Π­Ρ‚ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ±ΡƒΠ΄ΠΈΡ‚ΡŒ ΠΈΡ… Π½Π°ΠΆΠΈΠΌΠ°Ρ‚ΡŒ Π½Π° элСмСнты, ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹Π΅ ΠΎΡ‚ ΠΊΠ½ΠΎΠΏΠΎΠΊ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π½Π° Π·Π½Π°Ρ‡ΠΊΠΈ ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… сСтСй. НиТС ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Адама ΠœΠΎΡ€Π³Π°Π½Π°.

Однако Π²Π°ΠΆΠ½ΠΎ ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ псСвдокласс: hover Π½Π΅ всСгда Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ Π½Π° сСнсорных экранах. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ ΠΌΠΎΠΆΠ΅Ρ‚ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ Π½Π°Ρ‡Π°Ρ‚ΡŒ свой ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ ΠΈΠ»ΠΈ эффСкт Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚ Π½Π° Π½Π΅Π³ΠΎ курсор. Или ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒΡΡ Ρ‡Π΅Ρ€Π΅Π· ΠΌΠ³Π½ΠΎΠ²Π΅Π½ΠΈΠ΅ послС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚ курсор Π½Π° элСмСнт. Или ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ Π½Π΅ΠΏΡ€Π΅Ρ€Ρ‹Π²Π½ΠΎ Π²ΠΎΡΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚ΡŒ свою Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½ΡƒΡŽ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π² Ρ†ΠΈΠΊΠ»Π΅, Π΄Π°ΠΆΠ΅ Ссли ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ большС Π½Π΅ Π½Π°Π²Π΅Π΄Π΅Π½ Π½Π° Π½Π΅Π΅, ΠΈ ΠΎΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°Ρ‚ΡŒΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ послС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚ курсор ΠΈΠ»ΠΈ Ρ‰Π΅Π»ΠΊΠ°Π΅Ρ‚ Π½Π° Π΄Ρ€ΡƒΠ³ΠΎΠΌ элСмСнтС.Π•Π³ΠΎ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ зависит ΠΎΡ‚ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°.

ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ Π²Π°ΠΌ слСдуСт ΡƒΠ±Π΅Π΄ΠΈΡ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ ваш ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ доступСн Π½Π° всСх устройствах, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ устройства с ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½Ρ‹ΠΌΠΈ ΠΈΠ»ΠΈ ΠΎΡ‚ΡΡƒΡ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌΠΈ возмоТностями зависания. Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ навСдСния Π½Π° свой сайт, Π½ΠΎ ΠΎΠ½ΠΈ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΠΌΠ΅Ρ‚ΡŒ сущСствСнного значСния для смысла ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΈΠ»ΠΈ взаимодСйствия с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ.

Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ навСдСния курсора CSS

Π’ΠΎΡ‚ ΠΊΠ°ΠΊ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ CSS-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ навСдСния Π½Π° элСмСнт:

1. НастройтС свойство Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ свойство animation ΠΈΠ»ΠΈ Π΅Π³ΠΎ подсвойства для стилизации элСмСнта.

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ здСсь настраиваСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ, врСмя ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π΄Π΅Ρ‚Π°Π»ΠΈ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π·Π²ΠΈΠ²Π°Ρ‚ΡŒΡΡ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. Π§Ρ‚ΠΎΠ±Ρ‹ фактичСски Π½Π°Ρ‡Π°Ρ‚ΡŒ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΈ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ элСмСнт Π΄Π²ΠΈΠ³Π°Ρ‚ΡŒΡΡ, Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ @keyframes .

2. ΠžΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚Π΅ подсвойства свойства Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.

Бвойство Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ состоит ΠΈΠ· ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… подсвойств:

имя-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ

Ат-ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ @keyframes .ОбъявлСниС animation-name ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΊΠ°ΠΊ свойство, Π° имя Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ — ΠΊΠ°ΠΊ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, animation-name: bounce; ).

ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ

Π­Ρ‚ΠΎ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Ρ†ΠΈΠΊΠ»Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. Он ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ установлСн Π² сСкундах (с) ΠΈΠ»ΠΈ миллисСкундах (мс) (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, animation-duration: 3s;) .

функция синхронизации Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ

Π­Ρ‚ΠΎ Ρ‚ΠΎ, ΠΊΠ°ΠΊ анимация пСрСмСщаСтся ΠΏΠΎ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹ΠΌ ΠΊΠ°Π΄Ρ€Π°ΠΌ. Он опрСдСляСт ΠΊΡ€ΠΈΠ²ΡƒΡŽ скорости Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, обСспСчивая ΠΏΠ»Π°Π²Π½ΠΎΡΡ‚ΡŒ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ.Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€Π΅Π΄ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ значСния, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ Π»Π΅Π³ΠΊΠΎΡΡ‚ΡŒ, Π»ΠΈΠ½Π΅ΠΉΠ½ΠΎΡΡ‚ΡŒ, Π»Π΅Π³ΠΊΠΎΡΡ‚ΡŒ Π²Ρ…ΠΎΠ΄Π° ΠΈ Π»Π΅Π³ΠΊΠΎΡΡ‚ΡŒ Π²Ρ‹Ρ…ΠΎΠ΄Π°. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ свои собствСнныС значСния для этой Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ.

Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠ° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ

ВрСмя Π΄ΠΎ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½Π½Ρ‹ΠΉ элСмСнт запустит ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. Он опрСдСляСтся Π² сСкундах ΠΈΠ»ΠΈ миллисСкундах. ЗначСния: врСмя (Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ), Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅ (устанавливаСт для свойства Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ) ΠΈ Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ (наслСдуСт свойство ΠΎΡ‚ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта).

Π”ΠΎΠΏΡƒΡΠΊΠ°ΡŽΡ‚ΡΡ ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ значСния. Если установлСно ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, анимация запускаСтся, ΠΊΠ°ΠΊ Ссли Π±Ρ‹ ΠΎΠ½Π° ΡƒΠΆΠ΅ Π²ΠΎΡΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΠ»Π°ΡΡŒ.НапримСр, Π² animation-delay: -2s; , анимация Π±ΡƒΠ΄Π΅Ρ‚ вСсти сСбя Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ Π±ΡƒΠ΄Ρ‚ΠΎ ΠΎΠ½Π° Π½Π°Ρ‡Π°Π»Π° Π²ΠΎΡΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ 2 сСкунды Π½Π°Π·Π°Π΄.

количСство ΠΈΡ‚Π΅Ρ€Π°Ρ†ΠΈΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ

Π­Ρ‚ΠΎ количСство ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΠΎΠ² Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ Π΅Π³ΠΎ ΠΊΠ°ΠΊ бСсконСчноС , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ бСсконСчно. ЗначСния свойств ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅: число (Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ — 1), бСсконСчноС, Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅ (устанавливаСт для свойства Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ) ΠΈ наслСдованиС.

Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ

НастраиваСт Π½Π°Ρ‡Π°Π»ΡŒΠ½ΡƒΡŽ Ρ‚ΠΎΡ‡ΠΊΡƒ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Ρ†ΠΈΠΊΠ»ΠΎΠ².Анимация ΠΌΠΎΠΆΠ΅Ρ‚ ΠΌΠ΅Π½ΡΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ ΡΠ±Ρ€Π°ΡΡ‹Π²Π°Ρ‚ΡŒΡΡ ΠΈ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒΡΡ. ЗначСния свойств: Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ (воспроизвСдСниС Π²ΠΏΠ΅Ρ€Π΅Π΄), ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠ΅ (воспроизвСдСниС Π½Π°Π·Π°Π΄), Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½ΠΎΠ΅ (воспроизвСдСниС Π²ΠΏΠ΅Ρ€Π΅Π΄, Π·Π°Ρ‚Π΅ΠΌ Π½Π°Π·Π°Π΄), Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½ΠΎ-ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠ΅ (воспроизвСдСниС Π½Π°Π·Π°Π΄, Π·Π°Ρ‚Π΅ΠΌ Π²ΠΏΠ΅Ρ€Π΅Π΄), Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅ ΠΈ наслСдованиС.

Ρ€Π΅ΠΆΠΈΠΌ Π·Π°Π»ΠΈΠ²ΠΊΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ

Π­Ρ‚ΠΎ значСния, примСняСмыС элСмСнтом, ΠΊΠΎΠ³Π΄Π° анимация Π½Π΅ воспроизводится (Ρ‚.Π΅. ΠΏΠ΅Ρ€Π΅Π΄ ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹ΠΌ ΠΊΠ°Π΄Ρ€ΠΎΠΌ ΠΈ послС воспроизвСдСния послСднСго). ЗначСния свойств: Π½Π΅Ρ‚ (ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, ΠΊ элСмСнту Π½Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½Ρ‹ стили), Π²ΠΏΠ΅Ρ€Π΅Π΄ (элСмСнт сохраняСт значСния стиля, Π·Π°Π΄Π°Π½Π½Ρ‹Π΅ послСдним ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹ΠΌ ΠΊΠ°Π΄Ρ€ΠΎΠΌ), Π½Π°Π·Π°Π΄ (элСмСнт сохраняСт значСния, установлСнныС ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹ΠΌ ΠΊΠ°Π΄Ρ€ΠΎΠΌ), ΠΎΠ±Π° (анимация слСдуСт ΠΏΡ€Π°Π²ΠΈΠ»Π°ΠΌ для ΠΎΠ±ΠΎΠΈΡ… Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠΉ. ), Π½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΈ наслСдуСмый.

состояниС воспроизвСдСния Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ

ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ статус Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ (Π·Π°ΠΏΡƒΡ‰Π΅Π½Π° ΠΈΠ»ΠΈ приостановлСна). Π­Ρ‚ΠΎ позволяСт воспроизвСдСнной Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π²ΠΎΠ·ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ с Ρ‚ΠΎΠ³ΠΎ мСста, Π³Π΄Π΅ ΠΎΠ½Π° Π±Ρ‹Π»Π° приостановлСна, Π° Π½Π΅ Π½Π°Ρ‡ΠΈΠ½Π°Ρ‚ΡŒ Π·Π°Π½ΠΎΠ²ΠΎ. ЗначСния свойств: приостановлСно, Π·Π°ΠΏΡƒΡ‰Π΅Π½ΠΎ, Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΈ наслСдованиС.

3. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ ΠΊΠ°Π΄Ρ€Ρ‹ для опрСдСлСния ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ CSS-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора.

ПослС опрСдСлСния свойства Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… свойств Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ at-ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ @keyframes . Π­Ρ‚ΠΎ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°ΠΌ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΏΠΎ ΠΊΡ€Π°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅Ρ€Π΅ Π΄Π²Π° ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… ΠΊΠ°Π΄Ρ€Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‚, ΠΊΠ°ΠΊ анимация Π΄ΠΎΠ»ΠΆΠ½Π° ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π² ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… случаях Π²ΠΎ врСмя ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ.

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΡ‚ΡŒ Π½Π°ΠΈΠ»ΡƒΡ‡ΡˆΡƒΡŽ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ Π²ΠΎ всСх Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…, ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ @keyframes Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΈΠΌΠ΅Ρ‚ΡŒ прСфикс поставщика, ΠΊΠ°ΠΊ ΠΈ всС ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ свойства transition ΠΈ animation .

ΠŸΡ€Π΅Ρ„ΠΈΠΊΡΡ‹ поставщиков Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊ:

@ -moz-ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ ΠΊΠ°Π΄Ρ€Ρ‹

@ -o-ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ ΠΊΠ°Π΄Ρ€Ρ‹

@ -webkit-keyframes

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Π½Π΅ ΠΈΠΌΠ΅Π»ΠΈ прСфиксов поставщика, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ выглядСли ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΎΡ‰Π΅.

Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Ρ€Π°Π·Π½Ρ‹Π΅ Ρ‚ΠΎΡ‡ΠΊΠΈ останова ΠΏΠΎ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹ΠΌ ΠΊΠ°Π΄Ρ€Π°ΠΌ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ <ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚> , Π³Π΄Π΅ 0% являСтся ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ ΠΌΠΎΠΌΠ΅Π½Ρ‚ΠΎΠΌ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ, Π° 100% — послСдним. Π”Π²Π΅ Ρ‚ΠΎΡ‡ΠΊΠΈ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΏΠΎ ΠΈΡ… псСвдонимам ΠΎΡ‚ ΠΈ Π΄ΠΎ соотвСтствСнно.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΎΡ‡Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ Π½Π° 50% ΠΈ / ΠΈΠ»ΠΈ Π»ΡŽΠ±Ρ‹Π΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Ρ‚ΠΎΡ‡ΠΊΠΈ останова, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Π°ΠΌ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ.

Бвойства для Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ( слСва ΠΈ Π²Π²Π΅Ρ€Ρ…Ρƒ ) пСрСчислСны Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ‚ΠΎΡ‡Π΅ΠΊ останова, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Шэя Π₯ΠΎΡƒ Π½ΠΈΠΆΠ΅.

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ свойства.

НапримСр, Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ элСмСнт свСрху Π²Π½ΠΈΠ·, ΠΏΡ‹Ρ‚Π°ΡΡΡŒ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΡ‚ top: 0; ΠžΡ‚ Π΄ΠΎ Π²Π½ΠΈΠ·Ρƒ: 0; Π½Π΅ сработаСт.

ВмСсто этого Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ с top: 0; ΠžΡ‚ Π΄ΠΎ Π²Π΅Ρ€Ρ…: 100%; .

4. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ сокращСниС CSS Hover Animation.

Как ΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹, Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ Π² сокращСнном Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅. Π­Ρ‚ΠΎ достигаСтся Π·Π° счСт использования ΠΎΠ΄Π½ΠΎΠ³ΠΎ свойства animation вмСсто Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… объявлСний.

По порядку, Π²ΠΎΡ‚ ΠΊΠ°ΠΊ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ значСния Π² свойствС animation : animation-name, animation-duration, animation-time-function, animation-delay, animation-iteration-count, animation-direction, animation-fill- Ρ€Π΅ΠΆΠΈΠΌ ΠΈ состояниС воспроизвСдСния Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Π·Π½Π°Π΅Ρ‚Π΅, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ CSS-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора, Π΄Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим нСсколько ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ вдохновят вас.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ навСдСния курсора CSS

Когда Π΄Π΅Π»ΠΎ Π΄ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ Π΄ΠΎ настройки CSS-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ навСдСния, вашС Π²ΠΎΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ — ΠΏΡ€Π΅Π΄Π΅Π».Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ элСмСнты, ΠΏΠ΅Ρ€Π΅Π²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Ρ‚ΡŒ, Π²Ρ€Π°Ρ‰Π°Ρ‚ΡŒ ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ ΠΎΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°Ρ‚ΡŒ воспроизвСдСниС ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора. Π’Ρ‹ Π΄Π°ΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹ΠΉΡ‚ΠΈ Π·Π° Ρ€Π°ΠΌΠΊΠΈ простых эффСктов ΠΈ Π·Π°Ρ‚Ρ€ΠΎΠ½ΡƒΡ‚ΡŒ ΡƒΠΌΡ‹ Π΄Ρ€ΡƒΠ³ΠΈΡ… Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€ΠΈΠ΄ΡƒΠΌΠ°Π»ΠΈ слоТныС ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.

Π’ΠΎΡ‚ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠ· самых ΠΊΡ€ΡƒΡ‚Ρ‹Ρ… Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для своСго сайта.

1. Sass Hover Effects

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ изобраТСния

Π­Ρ‚ΠΎΡ‚ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ дСлится ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°ΠΌΠΈ эффСктов навСдСния, ΠΎΡ€Π³Π°Π½ΠΈΠ·ΠΎΠ²Π°Π½Π½Ρ‹ΠΌΠΈ ΠΏΠΎ отраслям, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ сайты ΠΎ ΠΏΡƒΡ‚Π΅ΡˆΠ΅ΡΡ‚Π²ΠΈΡΡ…, Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ ΠΈ ΡΡ‚Ρ€ΠΎΠΈΡ‚Π΅Π»ΡŒΡΡ‚Π²Π΅.ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· Π½ΠΈΡ… поставляСтся с ΠΊΠΎΠ΄ΠΎΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π² HTML ΠΈ CSS своСй страницы.

2. Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ изобраТСния

Π­Ρ‚ΠΎ Π½Π°Π±ΠΎΡ€ ΠΈΠ· пяти эффСктов ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора. Когда ваша ΠΌΡ‹ΡˆΡŒ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚ курсор Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ, ΠΎΠ½ΠΈ Ρ€Π΅Π°Π³ΠΈΡ€ΡƒΡŽΡ‚ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ. ВсС ΠΎΠ½ΠΈ ΡƒΠ΄ΠΎΠ±Π½Ρ‹, просты ΠΈ Π³ΠΎΡ‚ΠΎΠ²Ρ‹ ΠΊ использованию Π½Π° вашСм Π²Π΅Π±-сайтС ΠΈΠ»ΠΈ Ρ†Π΅Π»Π΅Π²ΠΎΠΉ страницС.

3. CSS-эффСкты ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅

Π’ΠΎΡ‚ ΠΏΡΡ‚Π½Π°Π΄Ρ†Π°Ρ‚ΡŒ эффСктов навСдСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ ΠΆΠΈΠ·Π½ΠΈ вашим изобраТСниям. Π•ΡΡ‚ΡŒ Ρ‚Π°ΠΊΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°ΡŽΡ‚ ΠΈ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°ΡŽΡ‚ ΠΌΠ°ΡΡˆΡ‚Π°Π±, ΡΠΊΠΎΠ»ΡŒΠ·ΡΡ‚ ΠΈ Π²Ρ€Π°Ρ‰Π°ΡŽΡ‚.

4. Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора Π½Π° творчСскоС мСню

Π­Ρ‚ΠΈ эффСкты навСдСния курсора CSS ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ Π²Π°ΡˆΠ΅ΠΌΡƒ сайту Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒΡΡ благодаря интСрактивности Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ.

5. Π­Ρ„Ρ„Π΅ΠΊΡ‚ навСдСния Π·Π½Π°Ρ‡ΠΊΠΎΠ² ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… сСтСй

ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ увидят ΠΊΠ»Π°ΡΡΠ½ΡƒΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠΉ сСти. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΌ ΠΏΠΎΠ±ΡƒΠΆΠ΄Π΅Π½ΠΈΠ΅ΠΌ ΠΊ Ρ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ подСлились вашим сайтом с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ.

6. Анимация ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ изобраТСния

Π£Π²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°ΠΉΡ‚Π΅, ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°ΠΉΡ‚Π΅ ΠΌΠ°ΡΡˆΡ‚Π°Π± ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΡΡ‚ΠΈΠ»ΡŒ навСдСния для создания эффСкта увСличСния изобраТСния.Π­Ρ‚ΠΎ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для выдСлСния ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ аспСкта изобраТСния.

7. ΠŸΠ΅Ρ€Π΅Π²ΠΎΡ€ΠΎΡ‚ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ изобраТСния

Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ эффСкт пСрСворачивания ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ доступноС пространство экрана для ΠΎΠ±ΠΌΠ΅Π½Π° Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠ΅ΠΉ. Π­Ρ‚ΠΎ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для страницы профиля ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚ΠΎΠ², Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ прСдставлСны ваши сотрудники ΠΈΠ»ΠΈ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π²Ρ‹ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚Π΅.

8. ΠŸΠΎΠ²ΠΎΡ€ΠΎΡ‚ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ изобраТСния

ΠŸΠΎΠ²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°ΠΉΡ‚Π΅ изобраТСния с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ навСдСния для получСния Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ спСцэффСкта. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π·Π°Π±Π°Π²Π½Ρ‹ΠΉ ΠΈ Π±Π΅Π·Π·Π°Π±ΠΎΡ‚Π½Ρ‹ΠΉ способ Π·Π°ΠΈΠ½Ρ‚Π΅Ρ€Π΅ΡΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ.

9. ΠŸΠ°ΡƒΠ·Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ изобраТСния

Π”Π°ΠΉΡ‚Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ ΠΏΠΎΠ²ΠΎΠ΄ ΠΎΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒΡΡ с этой Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ ΠΏΠ°ΡƒΠ·Ρ‹ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора. Он идСально ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для привлСчСния внимания посСтитСлСй, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ ΡƒΠ²ΠΈΠ΄Π΅Π»ΠΈ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ элСмСнт Π½Π° вашСй страницС.

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ навСдСния Π½Π° ваш Π²Π΅Π±-сайт

Π˜Π½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ — ΠΊΠ»ΡŽΡ‡ ΠΊ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡Π΅Π½ΠΈΡŽ Ρ…ΠΎΡ€ΠΎΡˆΠ΅Π³ΠΎ взаимодСйствия с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅. CSS-анимация навСдСния ΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹ — ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ способ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ вашСго сайта.Они ΠΌΠΎΠ³ΡƒΡ‚ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ваш сайт Π±ΠΎΠ»Π΅Π΅ интСрСсным, Π½ΠΎ ΠΈ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π²Π°ΠΆΠ½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ вашим посСтитСлям ΠΈ ΠΏΠΎΠ±ΡƒΠ΄ΠΈΡ‚ΡŒ ΠΈΡ… ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ Π½Π° вашСм сайтС. Π‘Π°ΠΌΠΎΠ΅ приятноС: Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π·Π½Π°Ρ‚ΡŒ HTML ΠΈ CSS, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΡ… ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ.

Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… подсказок: созданиС красивых Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… подсказок Π±Π΅Π· HTML ΠΈΠ»ΠΈ CSS

ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ ΠΎ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… подсказках

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка?

Π’Π°ΠΊΠΆΠ΅ извСстСн ΠΊΠ°ΠΊ подсказка, Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка, информационная подсказка ΠΈΠ»ΠΈ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка — Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка — это сообщСниС (Ρ‚.Π΅. тСкстовая ΠΌΠ΅Ρ‚ΠΊΠ° ΠΈΠ»ΠΈ тСкстовоС ΠΏΠΎΠ»Π΅), ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ появляСтся, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚ курсор, фокусируСтся ΠΈΠ»ΠΈ Ρ‰Π΅Π»ΠΊΠ°Π΅Ρ‚ элСмСнт Π² графичСском ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠΌ интСрфСйсС. ЦСлью Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… подсказок являСтся прСдоставлСниС ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΎ Ρ‚ΠΎΠΌ, для Ρ‡Π΅Π³ΠΎ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Ρ‹ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ вашСго прилоТСния ΠΈΠ»ΠΈ Π²Π΅Π±-сайта ΠΈ / ΠΈΠ»ΠΈ ΠΊΠ°ΠΊ ΠΈΡ… ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ.

Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ подсказку ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊ нСбольшой Ρ€Π΅Ρ‡Π΅Π²ΠΎΠΉ ΠΏΡƒΠ·Ρ‹Ρ€ΡŒ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Π»ΡƒΡ‡ΡˆΠ΅ ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π² ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠΌ интСрфСйсС. НапримСр, ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора Π½Π° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, Π³ΠΎΡ€ΡΡ‡ΡƒΡŽ ссылку ΠΈΠ»ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΡΠ²ΠΈΡ‚ΡŒΡΡ тСкст, Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ ΠΎΠ±ΡŠΡΡΠ½ΡΡŽΡ‰ΠΈΠΉ, Π½Π° Ρ‡Ρ‚ΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ смотрит ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΈ ΠΊΠ°ΠΊΠΎΠ² Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Ρ‰Π΅Π»Ρ‡ΠΊΠ° ΠΏΠΎ рассматриваСмому элСмСнту.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠΈΡ‚ΡŒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ подсказку практичСски ΠΊ Π»ΡŽΠ±ΠΎΠΌΡƒ элСмСнту вашСго ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса; Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ языков программирования ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ Π²Π°ΠΌ ΡΡ‚ΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ соотвСтствовали Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΌ элСмСнтам ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠΉ части вашСго ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса.

Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки ΠΈ HTML

Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки Π½Π΅ ΠΈΠΌΠ΅ΡŽΡ‚ Π²Ρ…ΠΎΠ΄Π½Ρ‹Ρ… Π΄Π°Π½Π½Ρ‹Ρ… HTML, Π½ΠΎ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ содСрТат Ρ‚ΠΎΠ»ΡŒΠΊΠΎ элСмСнты Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки HTML, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ тСкст, ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ / ΠΈΠ»ΠΈ изобраТСния. (Π’ΠΎ ΠΆΠ΅ самоС касаСтся Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… подсказок CSS ΠΈΠ»ΠΈ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… подсказок Javascript ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ.)

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки, помСщая тСкст Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки Π²Π½ΡƒΡ‚Ρ€ΠΈ встроСнного элСмСнта (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, tooltip)

Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠ»ΡΡ‚ΡŒ ΠΊ ΠΎΡ‡Π΅Π²ΠΈΠ΄Π½Ρ‹ΠΌ Β«Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚Ρ‹Β», ΠΎΠ΄Π½Π°ΠΊΠΎ, Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΌΠΈ; Π΄Π°ΠΆΠ΅ «пустоС» ΠΏΠΎΠ»Π΅ Π² Ρ„ΠΎΡ€ΠΌΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΌ ΠΊΠ°Π½Π΄ΠΈΠ΄Π°Ρ‚ΠΎΠΌ для Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки, Ссли ΠΎΠ½ΠΎ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΠΎΠ½ΡΡ‚ΡŒ, ΠΊΠ°ΠΊΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ Ρ‚ΡƒΠ΄Π° Π²Π²ΠΎΠ΄ΠΈΡ‚ΡŒ.

ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π·Π½Π°Ρ‡ΠΎΠΊ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки Π½Π΅ отобраТаСтся Π½Π° страницС ΠΏΡ€ΠΈ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠΌ использовании, ΠΎΠ½ появляСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚ΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°ΠΌΠ΅Ρ€Π΅Π½Π½ΠΎ Π°ΠΊΡ‚ΠΈΠ²ΠΈΡ€ΡƒΠ΅Ρ‚ ΠΈΡ…. Π­Ρ‚ΠΎ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ способ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ, сохраняя ΠΏΡ€ΠΈ этом чистый ΠΈ минималистичный Π΄ΠΈΠ·Π°ΠΉΠ½. Π”Π°ΠΆΠ΅ для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡƒΠΆΠ΅ Π·Π½Π°ΠΊΠΎΠΌΡ‹ с ΠΎΠ±Ρ‰ΠΈΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ ΠΈ структурой Π΄Π°Π½Π½ΠΎΠ³ΠΎ прилоТСния, Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΡ‡Π΅Π½ΡŒ Ρ†Π΅Π½Π½Ρ‹ΠΌΠΈ для объяснСния Π½ΠΎΠ²Ρ‹Ρ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ ΠΏΠΎ ΠΌΠ΅Ρ€Π΅ ΠΈΡ… Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ — Π±Π΅Π· нСобходимости Π΄Π°Π²Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Ρ‹Π΅ инструкции Π³Π΄Π΅-Π»ΠΈΠ±ΠΎ Π΅Ρ‰Π΅. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, всС инструкции ΠΎΡΡ‚Π°ΡŽΡ‚ΡΡ Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ, ΠΈ ΠΏΡ€ΠΈ этом избСгаСтся Π½Π΅Π½ΡƒΠΆΠ½Ρ‹ΠΉ бСспорядок.

Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки Π½Π° Ρ€Π°Π±ΠΎΡ‡Π΅ΠΌ столС появились ΠΏΠΎ ΠΊΡ€Π°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅Ρ€Π΅ Π² сСрСдинС дСвяностых Π³ΠΎΠ΄ΠΎΠ², ΠΊΠΎΠ³Π΄Π° Π² Microsoft Word Π±Ρ‹Π» прСдставлСн Π·Π½Π°ΠΌΠ΅Π½ΠΈΡ‚Ρ‹ΠΉ Π·Π½Π°Ρ‡ΠΎΠΊ Clippy — «говорящСй» скрСпки, которая Π΄Π°Π΅Ρ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ совСты ΠΈ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΈ ΠΏΠΎ Ρ€Π°Π±ΠΎΡ‚Π΅ с ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½Ρ‹ΠΌ обСспСчСниСм. ПослС этого Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки стали стандартными Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ… прилоТСниях. Однако, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки Ρ‚Ρ€Π°Π΄ΠΈΡ†ΠΈΠΎΠ½Π½ΠΎ всСгда Π°ΠΊΡ‚ΠΈΠ²ΠΈΡ€ΠΎΠ²Π°Π»ΠΈΡΡŒ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора, этот ΠΌΠ΅Ρ‚ΠΎΠ΄ прСдоставлСния ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ практичСски исчСз Π² ΠΏΠ΅Ρ€Π²Ρ‹Π΅ Π΄Π½ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ — ΠΈΠ·-Π·Π° нСвозмоТности навСдСния курсора Π½Π° сСнсорный экран.

БСгодня Ρ„Ρ€Π°Π·Π° Β«Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈΒ» всС Π΅Ρ‰Π΅ ΡˆΠΈΡ€ΠΎΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ. Однако Π½Π° ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅, ΠΊΠΎΠ³Π΄Π° всС Ρ‡Π°Ρ‰Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ устройства с сСнсорным экраном, Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ с большСй Π²Π΅Ρ€ΠΎΡΡ‚Π½ΠΎΡΡ‚ΡŒΡŽ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠ·Π½Π°Ρ‡Π°Ρ‚ΡŒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ подсказку ΠΏΡ€ΠΈ касании ΠΈ ΡƒΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠΈ. Π—Π΄Π΅ΡΡŒ Π΄ΠΎΠ»Π³ΠΎΠ΅ Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅ (Π² ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ касания) элСмСнта ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ тСкстовоС ΠΏΠΎΠ»Π΅ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки.

Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, нСзависимо ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, являСтся Π»ΠΈ это зависаниСм ΠΈΠ»ΠΈ ΡƒΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅ΠΌ, ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏ остаСтся Π½Π΅ΠΈΠ·ΠΌΠ΅Π½Π½Ρ‹ΠΌ. А Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора ΠΌΠΎΠΆΠ΅Ρ‚ ΡΡ‚Π°Ρ‚ΡŒ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΌ способом ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ взаимодСйствиС с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ Π±Π΅Π· ΡƒΡ‰Π΅Ρ€Π±Π° для ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠΎΠ² Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

Π§Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈ Ρ‡Π΅Π³ΠΎ нСльзя Π΄Π΅Π»Π°Ρ‚ΡŒ с Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказкой ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора

  • Do ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки для объяснСния ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. Π›ΠΎΠ³ΠΎΡ‚ΠΈΠΏ ΠΏΠ΅Ρ‡Π°Ρ‚ΠΈ Π² тСкстовом процСссорС Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅Ρ‚ΡŒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ подсказку, которая ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ указатСля ΠΌΡ‹ΡˆΠΈ ΠΎΠ±ΡŠΡΡΠ½ΡΠ΅Ρ‚, Ρ‡Ρ‚ΠΎ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ ΠΏΡ€ΠΈΠ½Ρ‚Π΅Ρ€Π° ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ Β«ΠŸΠ•Π§ΠΠ’Π¬Β», ΠΈ содСрТит сочСтаниС клавиш, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ для Π΅Π³ΠΎ Π°ΠΊΡ‚ΠΈΠ²Π°Ρ†ΠΈΠΈ. Π­Ρ‚ΠΎ Π½Π°Π΄Π΅ΠΆΠ½Ρ‹ΠΉ способ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ контСкст ΠΈ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ.
  • НС ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ подсказку ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΠΈΡ‚ΡŒ тСкст Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ. Если Π½Π° Ρ‚ΠΎΠΉ ΠΆΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠ΅ написано слово Β«ΠŸΠ•Π§ΠΠ’Π¬Β», Π½Π΅Ρ‚ нСобходимости Π² Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказкС для ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎΠ³ΠΎ объяснСния Π²ΠΈΠ΄ΠΈΠΌΠΎΠ³ΠΎ тСкста ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса.
  • Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π»ΠΈ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ, Ρ‡Π΅ΠΌ ΠΏΠΎΡ…ΠΎΠΆΠΈΠ΅ элСмСнты Ρ€Π°Π·Π»ΠΈΡ‡Π°ΡŽΡ‚ΡΡ. На ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ взгляд, Π²Ρ‹Ρ€Π΅Π·Π°Π½Π½Ρ‹Π΅, ΠΊΠΎΠΏΠΈΡ€ΡƒΠ΅ΠΌΡ‹Π΅ ΠΈ вставляСмыС изобраТСния Π² вашСм тСкстовом Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅ выглядят ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ; тСкст навСдСния ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡ΠΈΡ‚ΡŒ ΠΈΡ… для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ.
  • НС ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Ρ‚Π΅Π½ΠΈ ΠΈΠ»ΠΈ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ Π²ΠΎ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… подсказках. Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, слишком ΠΌΠ°Π»Ρ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΡ… ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΡ‚ΡŒ Π½Π΅Π²ΠΎΠΎΡ€ΡƒΠΆΠ΅Π½Π½Ρ‹ΠΌ Π³Π»Π°Π·ΠΎΠΌ, ΠΈ ΠΎΠ½ΠΈ ΠΏΠΎΡ‚Ρ€Π΅Π±Π»ΡΡŽΡ‚ Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ Π²Ρ‹Ρ‡ΠΈΡΠ»ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ ΠΌΠΎΡ‰Π½ΠΎΡΡ‚ΡŒ.Π’ΠΎ ΠΆΠ΅ самоС касаСтся Π½Π°Π΄Π΅ΠΆΠ½Ρ‹Ρ…, ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ большого количСства ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ. Π—Π΄Π΅ΡΡŒ примСняСтся ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏ KISS (Keep It Simple, Stupid).
  • Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚Π΅ Π»ΠΈ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки Π² ΠΎΠΊΠ½Π΅. Π£Π±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ информация Π²ΠΎ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказкС Π½Π΅ обрСзаСтся Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Π°ΠΌΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ экрана.
  • НС ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки для объяснСния ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ, которая Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠ° Π²Π°ΡˆΠ΅ΠΌΡƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ взаимодСйствия со стороны ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, Π½Π΅ рСкомСндуСтся Π² ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡ‚ΡŒ ΠΎΡ‚ Π½Π΅Π³ΠΎ Π² Ρ€Π°Π±ΠΎΡ‚Π΅ с вашим инструмСнтом.Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π·Π½Π°Ρ‡ΠΊΠΈ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ стилистичСскиС элСмСнты, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±ΡŠΡΡΠ½ΠΈΡ‚ΡŒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π²Π°ΡˆΠ΅ΠΌΡƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ; Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки Π΄ΠΎΠ»ΠΆΠ½Ρ‹ просто ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ контСкст ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΡŒ ΠΏΠΎ ΠΌΠ΅Ρ€Π΅ нСобходимости.

Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ подсказку ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора Π²ΠΎ Framer?

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ подсказку ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора Π²ΠΎ Framer, Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΏΠ°ΠΊΠ΅Ρ‚ Switch ΠΈΠ· мСню Β«Π’ΡΡ‚Π°Π²ΠΈΡ‚ΡŒΒ». ΠŸΠ°ΠΊΠ΅Ρ‚ Switch позволяСт Π²Π°ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ взаимодСйствия Π½Π° основС состояния, поэтому Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄Π΅Π»Π°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π² зависимости ΠΎΡ‚ состояния элСмСнта Π² ΠΎΠΊΠ½Π΅ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ просмотра. Π’Π°ΠΌ понадобится ΠΎΠ΄ΠΈΠ½ экран, созданный с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ инструмСнта Β«Π€Ρ€Π΅ΠΉΠΌΒ», Π° Π·Π°Ρ‚Π΅ΠΌ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ, Ρ„Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΡƒΡŽ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ подсказку ΠΈ пустоС состояниС, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Ρ‚Π°ΠΊΠΆΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ Π½Π°Ρ‡ΠΈΠ½Π°Ρ‚ΡŒΡΡ с Ρ„Ρ€Π΅ΠΉΠΌΠΎΠ².

ΠŸΠ°ΠΊΠ΅Ρ‚ Switch состоит ΠΈΠ· Π΄Π²ΡƒΡ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ²: Switch ΠΈ SwitchToStateAction. РазмСститС ΠΈΡ… ΠΎΠ±Π° Π½Π° Π³Π»Π°Π²Π½ΠΎΠΌ экранС, ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅ SwitchToStateAction ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ΅ ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅ Switch ΠΊ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказкС ΠΈ пустому ΡΠΎΡΡ‚ΠΎΡΠ½ΠΈΡŽ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки. Π’Π΅ΠΏΠ΅Ρ€ΡŒ ваша Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора Π³ΠΎΡ‚ΠΎΠ²Π° ΠΊ Ρ€Π°Π±ΠΎΡ‚Π΅!

ΠŸΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΈ ΡΠΊΡ€Ρ‹Ρ‚ΡŒ содСрТимоС ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора

ВрСмя чтСния: 2 ΠΌΠΈΠ½ΡƒΡ‚Ρ‹.

ВзаимодСйствия ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΡΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ ΠΏΠ°ΠΏΠΊΠΈ, ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ ΠΈΠ»ΠΈ Π³Ρ€ΡƒΠΏΠΏΡ‹, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚ ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ Π½Π° ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹ΠΉ Ρ‚Ρ€ΠΈΠ³Π³Π΅Ρ€.Π•ΡΡ‚ΡŒ Π΄Π²Π° способа Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ взаимодСйствиС ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора Π² Ceros.

ИспользованиС состояний ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°:

  • Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π°ΠΊΡ‚ΠΈΠ², Π½Π°Π΄ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π΄ΠΎΠ»ΠΆΠ΅Π½ навСсти курсор.
  • На Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ Β«Π”ΠΈΠ·Π°ΠΉΠ½Β» справа Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Π·Π½Π°Ρ‡ΠΎΠΊ «Плюс» рядом с «Бостояниями».
  • . Π’Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π΅ состояниС ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½ΠΎ ΠΊΠ°ΠΊ «По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽΒ» ”
  • Π’ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΌΡΡ мСню Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ состояниС« НавСдСниС Β»ΠΈ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΡƒΠΉΡ‚Π΅ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ выглядСл ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ‚Π°ΠΊΠΈΠ΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹, ΠΊΠ°ΠΊ Ρ†Π²Π΅Ρ‚, Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈ ΠΏΠΎΠ²ΠΎΡ€ΠΎΡ‚ состояния навСдСния.
  • Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° ΠΊ состояниям ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΈ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора создаст ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ ΠΌΠ΅ΠΆΠ΄Ρƒ состояниями, сглаТивая ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π½ΠΈΠ΅.
  • ПослС внСсСния ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π² состояниС зависания взглянитС Π½Π° ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ просмотр, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ созданноС состояниС навСдСния.

ИспользованиС горячих Ρ‚ΠΎΡ‡Π΅ΠΊ ΠΈ взаимодСйствий:

  • НарисуйтС Ρ‚ΠΎΡ‡ΠΊΡƒ доступа Π½Π°Π΄ ΠΎΠ±Π»Π°ΡΡ‚ΡŒΡŽ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π΄ΠΎΠ»ΠΆΠ΅Π½ навСсти.
  • Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ‚ΠΎΡ‡ΠΊΡƒ доступа ΠΈ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΡƒ «ВзаимодСйствиС» Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ инспСктора
  • Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π² качСствС Ρ‚Ρ€ΠΈΠ³Π³Π΅Ρ€Π°
  • Π£ΠΊΠ°ΠΆΠΈΡ‚Π΅ дСйствиС, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ:
    • ΠŸΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ — ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚ курсор Π½Π° Ρ‚ΠΎΡ‡ΠΊΡƒ доступа, ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹Π΅ ΠΏΠ°ΠΏΠΊΠΈ, ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ ΠΈΠ»ΠΈ Π³Ρ€ΡƒΠΏΠΏΡ‹
    • Π‘ΠΊΡ€Ρ‹Ρ‚ΡŒ — ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора ΠΌΡ‹ΡˆΠΈ Π½Π° Ρ‚ΠΎΡ‡ΠΊΡƒ доступа ΡΠΊΡ€Ρ‹Ρ‚ΡŒ Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹Π΅ ΠΏΠ°ΠΏΠΊΠΈ, ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ ΠΈΠ»ΠΈ Π³Ρ€ΡƒΠΏΠΏΡ‹
    • ΠŸΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ ΠΈ ΠΎΡΡ‚Π°Π²Π°Ρ‚ΡŒΡΡ Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΌ — ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚ курсор Π½Π° Ρ‚ΠΎΡ‡ΠΊΡƒ доступа, ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹Π΅ Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹Π΅ ΠΏΠ°ΠΏΠΊΠΈ, ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ ΠΈΠ»ΠΈ Π³Ρ€ΡƒΠΏΠΏΡ‹ ΠΈ ΡΠΎΡ…Ρ€Π°Π½ΡΡ‚ΡŒ ΠΈΡ… Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΌΠΈ Π΄Π°ΠΆΠ΅ ΠΏΡ€ΠΈ Π²Ρ‹Ρ…ΠΎΠ΄Π΅ ΠΈΠ· Ρ‚ΠΎΡ‡ΠΊΠΈ доступа
    • Hide and Stay Hidden — ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚ курсор Π½Π° Ρ‚ΠΎΡ‡ΠΊΡƒ доступа, ΡΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹Π΅ ΠΏΠ°ΠΏΠΊΠΈ, ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ ΠΈΠ»ΠΈ Π³Ρ€ΡƒΠΏΠΏΡ‹ ΠΈ ΡΠΎΡ…Ρ€Π°Π½ΡΡ‚ΡŒ ΠΈΡ… скрытыми Π΄Π°ΠΆΠ΅ ΠΏΡ€ΠΈ Π²Ρ‹Ρ…ΠΎΠ΄Π΅ ΠΈΠ· Ρ‚ΠΎΡ‡ΠΊΠΈ доступа
  • Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΏΠ°ΠΏΠΊΡƒ, ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ ΠΈΠ»ΠΈ Π³Ρ€ΡƒΠΏΠΏΡƒ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΈΠ»ΠΈ ΡΠΊΡ€Ρ‹Ρ‚ΡŒ.
Автор записи

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *