10.1 Свойство cursor
CSS предоставляет возможность изменять вид курсора при наведении на элементы с помощью свойства cursor. Это свойство позволяет задавать различные типы курсоров, улучшая интерактивность и визуальную привлекательность веб-страниц.
Свойство cursor определяет вид курсора мыши, когда он находится над элементом. Значения могут быть предопределенными или пользовательскими (кастомными) изображениями.
Синтаксис:
element {
cursor: value;
}
Значения:
Свойство cursor поддерживает множество значений, которые можно разделить на предопределенные и пользовательские.
Предопределенные значения:
default: курсор по умолчаниюpointer: курсор в виде руки, обычно используется для ссылокtext: курсор в виде текстового курсора (I-образный), обычно используется для текстовых полейmove: курсор для перемещенияwait: курсор в виде песочных часов или индикатора ожиданияhelp: курсор в виде вопросительного знакаcrosshair: курсор в виде прицелаnot-allowed: курсор в виде запрещающего знака (зачеркнутый круг)grabиgrabbing: курсоры для перетаскивания элементов
Пример использования предопределенных значений:
.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;
}
<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: предопределенное значение, которое используется, если пользовательское изображение не может быть загружено
Пример использования кастомных курсоров:
.custom-cursor {
cursor: url('https://via.placeholder.com/32'), auto;
padding: 10px;
border: 1px solid black;
}
<body>
<div class="custom-cursor">Кастомный курсор</div>
</body>
Спецификации и ограничения для кастомных курсоров:
- Формат изображений: поддерживаются форматы
.cur,.png,.jpg,.gif. - Размеры изображений: рекомендуется использовать изображения размером 32x32 пикселя или меньше для лучшей производительности и совместимости.
- Координаты точки клика: в изображении курсора можно задать координаты точки клика (hotspot). По умолчанию это верхний левый угол (0,0).
10.3 Детали использования пользовательских курсоров
Форматы изображений
Пользовательские курсоры могут быть в различных форматах, таких как PNG, GIF, JPG и SVG. Рекомендуется использовать форматы с поддержкой прозрачности (например, PNG), чтобы курсор выглядел корректно на любом фоне.
Размеры изображений
Изображения курсоров не должны быть слишком большими. Рекомендуемые размеры — 32x32 пикселя или меньше. Большие изображения могут некорректно отображаться в некоторых браузерах.
Указание координат фокуса
Можно указать координаты фокуса (горячей точки) курсора с помощью дополнительных значений после URL изображения.
Синтаксис
element {
cursor: url("custom-cursor.png") x y, fallback;
}
Где:
xиy: координаты фокуса относительно верхнего левого угла изображения.
Пример использования с координатами фокуса:
.custom-cursor-focus {
cursor: url('https://via.placeholder.com/32') 16 16, auto;
padding: 10px;
border: 1px solid black;
}
<body>
<div class="custom-cursor-focus">Кастомный курсор с фокусом</div>
</body>
Объяснение кода:
.custom-cursor-focus: устанавливает кастомный курсор с координатами фокуса (16, 16), что делает середину изображения горячей точкой
Практическое применение:
- Улучшение UI/UX: использование пользовательских курсоров может значительно улучшить пользовательский интерфейс, делая его более интуитивно понятным и эстетически приятным.
- Интерактивные элементы: кастомные курсоры могут применяться к интерактивным элементам, таким как кнопки, ссылки, иконки и т. д.
- Игры и приложения: в играх и веб-приложениях кастомные курсоры помогают создать уникальный стиль и атмосферу.
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ