Лекції
Почати
Почати навчання
JavaRush /Курси /Frontend SELF UA /Кастомні курсори

Кастомні курсори

Frontend SELF UA
Рівень 19 , Лекція 4
Відкрита

10.1 Властивість cursor

CSS надає можливість змінювати вигляд курсору при наведенні на елементи за допомогою властивості cursor. Ця властивість дозволяє задавати різні типи курсорів, покращуючи інтерактивність і візуальну привабливість веб-сторінок.

Властивість cursor визначає вигляд курсору миші, коли він знаходиться над елементом. Значення можуть бути попередньо заданими або користувацькими (кастомними) зображеннями.

Синтаксис:

    
      element {
         cursor: value;
      }

Значення:

Властивість cursor підтримує багато значень, які можна поділити на попередньо задані та користувацькі.

Попередньо задані значення:

  • default: курсор за замовчуванням
  • pointer: курсор у вигляді руки, зазвичай використовується для посилань
  • text: курсор у вигляді текстового курсору (I-подібний), зазвичай використовується для текстових полів
  • move: курсор для переміщення
  • wait: курсор у вигляді пісочного годинника або індикатора очікування
  • help: курсор у вигляді знака питання
  • crosshair: курсор у вигляді прицілу
  • not-allowed: курсор у вигляді заборонного знака (закреслене коло)
  • grab і grabbing: курсори для перетягування елементів
Telegram

Приклад використання попередньо заданих значень:

CSS 
    
      .default-cursor {
        cursor: default;
        padding: 10px;
        border: 1px solid black;
      }

      .pointer-cursor {
        cursor: pointer;
        padding: 10px;
        border: 1px solid black;
      }

      .text-cursor {
        cursor: text;
        padding: 10px;
        border: 1px solid black;
      }
HTML 
    
      <div class="default-cursor">Курсор за замовчуванням</div>
      <div class="pointer-cursor">Курсор указівник</div>
      <div class="text-cursor">Текстовий курсор</div>

10.2 Користувацькі значення (кастомні курсори)

Властивість cursor також підтримує використання користувацьких зображень як курсорів. Для цього використовується значення url.

Синтаксис:

    
      element {
        cursor: url("custom-cursor.png"), fallback;
      }

Де:

  • url('custom-cursor.png'): вказує шлях до зображення курсору
  • fallback: попередньо задане значення, яке використовується, якщо користувацьке зображення не може бути завантажене

Приклад використання кастомних курсорів:

CSS 
    
      .custom-cursor {
        cursor: url('https://via.placeholder.com/32'), auto;
        padding: 10px;
        border: 1px solid black;
      }
HTML 
    
      <body>
        <div class="custom-cursor">Кастомний курсор</div>
      </body>

Специфікації та обмеження для кастомних курсорів:

  1. Формат зображень: підтримуються формати .cur, .png, .jpg, .gif.
  2. Розміри зображень: рекомендується використовувати зображення розміром 32x32 пікселі або менше для кращої продуктивності та сумісності.
  3. Координати точки кліку: у зображенні курсора можна задати координати точки кліку (hotspot). За замовчуванням це верхній лівий кут (0,0).

10.3 Деталі використання користувацьких курсорів

Формати зображень

Користувацькі курсори можуть бути в різних форматах, таких як PNG, GIF, JPG і SVG. Рекомендується використовувати формати з підтримкою прозорості (наприклад, PNG), щоб курсор виглядав коректно на будь-якому фоні.

Розміри зображень

Зображення курсорів не повинні бути занадто великими. Рекомендовані розміри — 32x32 пікселі або менше. Великі зображення можуть некоректно відображатися в деяких браузерах.

Вказання координат фокуса

Можна вказати координати фокуса (гарячої точки) курсору за допомогою додаткових значень після URL зображення.

Синтаксис

    
      element {
        cursor: url("custom-cursor.png") x y, fallback;
      }

Де:

  • x і y: координати фокуса відносно верхнього лівого кута зображення.

Приклад використання з координатами фокуса:

CSS 
    
      .custom-cursor-focus {
        cursor: url('https://via.placeholder.com/32') 16 16, auto;
        padding: 10px;
        border: 1px solid black;
      }
HTML 
    
      <body>
        <div class="custom-cursor-focus">Кастомний курсор з фокусом</div>
      </body>

Пояснення коду:

  • .custom-cursor-focus: встановлює кастомний курсор з координатами фокуса (16, 16), що робить середину зображення гарячою точкою

Практичне застосування:

  1. Покращення UI/UX: використання користувацьких курсорів може значно покращити інтерфейс користувача, роблячи його більш інтуїтивно зрозумілим і естетично приємним.
  2. Інтерактивні елементи: кастомні курсори можуть застосовуватись до інтерактивних елементів, таких як кнопки, посилання, іконки тощо.
  3. Ігри та додатки: у іграх та веб-додатках кастомні курсори допомагають створити унікальний стиль і атмосферу.
Коментарі
ЩОБ ПОДИВИТИСЯ ВСІ КОМЕНТАРІ АБО ЗАЛИШИТИ КОМЕНТАР,
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ