Переглядач CSS-курсорів
Візуалізуйте кожен прийнятний стан для курсорів браузера. Наведіть курсор для експериментів, натисніть для копіювання!
Щоб переглянути типи CSS-курсорів, наведіть мишу на будь-яку плитку курсора, щоб побачити його наживо, потім натисніть плитку, щоб скопіювати оголошення, як-от cursor: pointer;.
Last updated:
Переглядач CSS-курсорів. Візуалізуйте кожен прийнятний стан для курсорів браузера. Наведіть курсор для експериментів, натисніть для копіювання!
Миттєво відкривайте та тестуйте кожен доступний стиль курсору браузера за допомогою нашого безкоштовного онлайн-переглядача CSS-курсорів. Ця преміальна утиліта для дизайну інтерфейсу використовує нативні API браузера.
Для кращого результату перевірте вихідні дані перед копіюванням або завантаженням, особливо якщо вони будуть використані в коді, звітах, документації чи спільних файлах.
Такий браузерний процес зберігає швидкість і допомагає уникнути ручного очищення в окремих програмах. Пов’язані інструменти: Продовжте роботу з Парсер URL, Кодувальник і декодувальник URL, Витяг URL / доменів.
Ці пов’язані інструменти допомагають із суміжними завданнями конвертації, форматування, перевірки, генерування та очищення.
Поширені запитання
Як протестувати й скопіювати значення CSS-курсора?
Наведіть мишу на плитку, щоб побачити курсор; назва на плитці є значенням CSS. Натисніть плитку (або Enter), щоб вибрати її та скопіювати оголошення, наприклад cursor: grab;. Панель Вибраний курсор показує опис, область для тестування та кнопку Копіювати CSS.
Який CSS-курсор показує руку?
Використовуйте cursor: pointer; для посилань і клікабельних елементів — він показує руку. Використовуйте grab і grabbing для перетягуваних елементів, not-allowed для вимкнених елементів керування, text для курсора у формі I, а wait або progress для стану зайнятості.
Як швидко знайти потрібний тип курсора?
Введіть запит у поле пошуку, щоб фільтрувати за назвою чи описом, наприклад drag, resize або zoom, або скористайтеся кнопками категорій: Загальні, Посилання й стан, Виділення, Перетягування, Розмір і прокрутка та Масштаб. Лічильник показує, скільки з 36 курсорів відповідають запиту.
Як створити власний курсор із зображенням?
У розділі Генератор CSS для власного курсора вставте URL зображення або data URI (PNG, SVG чи CUR), за бажання задайте Активну точку X і Активну точку Y у пікселях (від 0 до 127) і виберіть Резервний курсор. Інструмент створює правило на кшталт cursor: url("cursor.png") 16 16, pointer;, яке можна перевірити в області перегляду та скопіювати.
Чому моє зображення власного курсора не відображається?
Браузери ігнорують зображення курсора, більші за 128 на 128 пікселів, тож найбезпечніший розмір — 32 на 32. URL зображення також має завантажуватися зі сторінки, на якій Ви його використовуєте. Якщо зображення не можна використати, показується резервне ключове слово.
Чому деякі курсори на моєму комп’ютері виглядають однаково або інакше?
Ключові слова курсорів малює Ваша операційна система, тож те саме значення може виглядати по-різному у Windows, macOS і Linux, а деякі системи використовують одне зображення для кількох значень. Сенсорні пристрої взагалі не показують курсор миші.
Як користуватися цим онлайн-інструментом
Переглядач CSS-курсорів створено для швидких робочих процесів у браузері, коли потрібно форматувати, перевіряти, конвертувати, декодувати, кодувати, генерувати або аналізувати дані без важкої настільної програми. Почніть з поля введення або видимих параметрів, перевірте результат і скопіюйте або завантажте вихідні дані.
Приватна обробка у браузері
Переглядач CSS-курсорів залишає звичайний етап обробки локально у вашому браузері. Це корисно для фрагментів коду, токенів, документів, значень конфігурації, текстів та інших матеріалів, які не слід без потреби надсилати на віддалений сервіс.
Коли цей інструмент корисний
Використовуйте Переглядач CSS-курсорів для повторюваних задач розробника, технічної документації, QA-перевірок, швидких конвертацій, налагодження, очищення контенту та внутрішніх командних процесів. Сторінка робить акцент на зрозумілих вхідних даних, швидкому відгуку та результаті, який легко використати далі.
Практичні поради
Перед копіюванням фінального результату перевірте пробіли, регістр, імена файлів, кодування, структуру токенів, переноси рядків або формат виводу. Такі невеликі перевірки зменшують помилки у коді, звітах, задачах, листах або технічних нотатках.