Жовтий курсор-це невеликий, але ефектний елемент, який може привернути увагу користувачів та додати оригінальності дизайну веб-сайту чи програми. Як створити такий курсор самостійно? У цій покрокової інструкції ми розповімо, як це зробити без особливих зусиль.
Першим кроком є вибір потрібного кольору курсору. У нашому випадку ми хочемо використовувати жовтий колір, оскільки він чудово вписується в багато дизайнів і чудово привертає увагу. Для цього нам знадобиться код кольору в форматі RGB. Жовтий колір має такі значення: R=255, G=255, b = 0. Запам'ятайте ці значення або запишіть їх, щоб потім використовувати в коді.
Далі ми повинні створити стиль CSS для курсору. Для цього ми використовуємо псевдоелемент:: cursor, який дозволяє нам встановити курсор за допомогою властивостей CSS. Ось приклад коду для створення жовтого курсору:
::cursor
Тепер наш жовтий курсор готовий до використання! Щоб застосувати його до сайту, додайте цей стиль CSS у файл стилів або вставте його безпосередньо на сторінку за допомогою тегу . Потім просто застосуйте клас або ідентифікатор із цим стилем до елемента, до якого потрібно застосувати курсор. Наприклад, якщо ви хочете застосувати жовтий курсор до всього документа, ви можете використовувати такий код:
body cursor: yellow;>
Тепер ваша сторінка матиме жовтий курсор, який буде видно при наведенні миші на будь-яку частину сторінки. Це чудовий спосіб додати трохи оригінальності та особистості до вашого проекту. Спробуйте створити жовтий курсор самостійно і здивуйте своїх користувачів!
Крок 1: Підготовка до встановлення курсору
Для того щоб встановити жовтий курсор навколо миші, Вам буде потрібно наступне:
- Редактор коду: виберіть відповідний редактор коду, в якому будете працювати. Можна використовувати такі редактори, як Sublime Text, Visual Studio Code або Atom.
- HTML-файл: створіть новий HTML-файл з будь-якою назвою, наприклад, "index.html". У цьому файлі будемо розміщувати код, який встановить жовтий курсор.
- Тег style: відкрийте файл HTML у редакторі коду та додайте тег style всередині відкриває і закриває тегів head. Тег style призначений для визначення стилів елементів на веб-сторінці.
Тепер, коли ми підготувалися до встановлення жовтого курсору, переходимо до наступного кроку - визначення стилів для курсору.
Скачайте курсор
Першим кроком для створення жовтого курсору навколо миші Вам буде потрібно завантажити відповідний курсор. Ви можете знайти безліч безкоштовних ресурсів з курсорами в Інтернеті. Скористайтеся пошукачем і знайдіть надійне джерело, який надає різноманітні курсори для завантаження.
Коли Ви знайшли відповідний ресурс, знайдіть і скачайте жовтий курсор в форматі .cur або .ani. Зверніть увагу на те, що деякі ресурси можуть надавати курсори в форматі .zip або .rar. В такому випадку вам буде потрібно розпакувати файли з курсором після завантаження.
Важливо: Переконайтеся, що курсор, який ви завантажили, має прозорий фон. Якщо фон у курсора не прозорий, то ви не зможете створити ефект жовтого курсора навколо миші.
Після успішного завантаження жовтого курсору перейдіть до наступного кроку.
Розпакуйте завантажений файл
Перед тим як почати використовувати жовтий курсор навколо миші, Вам необхідно розпакувати скачаний файл. Цей файл містить усі необхідні файли та ресурси для створення жовтого курсору.
Для розпакування файлу, пройдіть по наступних кроках:
- Знайдіть завантажений файл на вашому комп'ютері. Зазвичай файли завантаження зберігаються в папці "завантаження" або в папці, вказаній у налаштуваннях вашого браузера.
- Клацніть правою кнопкою миші на файлі та виберіть опцію "витягти" або "розпакувати" у контекстному меню. У деяких випадках ви можете побачити опцію "Відкрити архів", яка автоматично витягує вміст архіву.
- Виберіть місце, куди потрібно витягти файли. Наприклад, ви можете створити нову папку на робочому столі та вибрати її як місце для вилучення файлів.
- Натисніть кнопку "Витягти" або "ОК", щоб розпочати розпакування файлів. Залежно від розміру архіву та продуктивності вашого комп'ютера, процес розпакування може зайняти деякий час.
- Після завершення процесу розпакування, ви побачите витягнуті файли в обраній вами папці. Потім ви можете перейти до наступного кроку встановлення жовтого курсору.
Тепер, після того як ви розпакували завантажений файл, ви готові перейти до наступного етапу установки жовтого курсору навколо миші.
Крок 2: Налаштування курсору
Після створення зображення жовтого курсору, ми можемо приступити до його налаштування в CSS. Для цього нам знадобиться окреме правило для курсору всередині файлу стилів.
1. Знайдіть файл стилів вашого проекту (зазвичай це файл із розширенням .css).
2. У відкритому файлі додайте наступне правило всередині секції body :
body cursor: url(path/to/your/image.png), auto;
width: 100vw;
height: 100vh;
>
У цьому правилі ми використовуємо властивість cursor, щоб встановити шлях до нашого зображення за допомогою функції url() . Ми також встановили значення auto як альтернативний курсор, який відображатиметься у випадках, коли Жовтий курсор недоступний або не підтримується.
Крім того , ми встановили значення 100vw та 100vh для ширини та висоти елемента body, щоб курсор був видимим у всій видимій області вікна браузера.
3. Збережіть файл стилів.
Тепер ваш жовтий курсор повинен бути встановлений і відображатися під час запуску веб-сторінки. Наступним кроком буде перевірка його працездатності і подальша настройка при необхідності.