Как изменить курсор браузера с помощью CSS

Как изменить курсор браузера с помощью CSS

От автора: браузер автоматически меняет курсор мыши в контексте множества элементов интерфейса. Например, при наведении на ссылки он меняется на руку. Однако есть ситуации, когда вам потребуется вручную менять иконку указателя мыши для определенных операций (иконка компаса, показывающая, что элемент можно передвинуть). Обычно это делается через CSS, в частности через свойство cursor.

Думайте, куда наводите указатель

Крайне важно понимать, что нельзя изменять курсор мыши просто «потому что». Указатель мыши – первичный метод взаимодействия пользователя с вашим сайтом, и его изменение просто потому, что вам так хочется, может полностью разрушить ожидания пользователя от интерфейса, что приведет к разочарованию. Пользователь просто покинет сайт. Если вы используете свойство cursor, оно всегда должно подходить под вашу текущую задачу и соответствовать ожиданиям пользователя.

Также важно отметить тот факт, что изменение курсора в CSS не затрагивает его функционал. Если задать свойство cursor: grab, предмет автоматически не станет перетаскиваемым. Функциональная сторона вопроса обрабатывается на стороне JavaScript. CSS всего лишь изменяет представление курсора.

Свойство cursor задается для конкретных элементов. Часто это может быть :hover или другое похожее состояние.

div#inked-painted:hover {
	cursor: col-resize;
}

Диапазон иконок курсора в браузерах крайне велик. В разных операционных системах одни и те же курсоры выглядят по-разному. Единственный способ обеспечить полную идентичность в разных операционных системах – использовать свои изображения (смотрите руководство в конце данной статьи). Ниже можно просмотреть иконки курсоров, наведя указатель мыши на название в левом столбце.

default — Значение по умолчанию, обычный указатель

auto — Курсор меняется в зависимости от текущего контекста в браузере. Курсор не всегда будет принимать подходящий вид или тот, который вы хотите.

none — Курсор отсутствует. Осторожно используйте это значение, оно может запутать пользователя.

context-menu — Контекстное меню доступно.

help — Есть справка

pointer — Ассоциируется с наведением мыши на ссылки. Иконка в виде руки

progress — Веб-приложение или сайт выполняют операции в фоновом режиме, но вы все еще можете с ними работать. Не путайте с тегом progress. Часто отображается как wait (см. ниже).

wait — Приложение занято (обычно иконка в виде крутящегося кольца или часов).

cell — Показывает, что ячейки таблицы можно выбрать.

crosshair — Крест. Часто используется для индикации выбранной области на изображениях.

text — Горизонтальный текст можно выделить.

vertical-text — Вертикальный текст можно выделить.

alias — Можно создать алиас, ярлык или символическую ссылку.

copy — Контент можно скопировать.

move — Элемент можно переместить.

no-drop — В данную область нельзя переместить элемент. (Часто иконка совпадает с not-allowed – смотрите ниже).

not-allowed — В этой области действие не может быть выполнено.

all-scroll — Элемент можно прокручивать в любых направлениях.

col-resize — Размер элемента или колонки можно изменять по горизонтали.

row-resize — Размер элемента или ряда можно изменять по вертикали.

n-resize — Размер элемента можно изменять только по вертикали.

e-resize — Размер элемента можно изменять только по горизонтали.

w-resize — Элемент можно расширить влево.

s-resize — Элемент можно расширить только вниз.

ne-resize — Правый верхний угол элемента можно перетащить.

nw-resize — Верхний левый угол элемента можно перетащить.

se-resize — Нижний правый угол элемента можно перетащить.

sw-resize — Нижний левый угол элемента можно перетащить.

ew-resize — Размер элемента можно менять по горизонтали.

ns-resize — Размер элемента можно менять по вертикали.

nesw-resize — Размер элемента можно менять по диагонали в указанных направлениях.

nwse-resize — Размер элемента можно менять по диагонали в указанных направлениях.

zoom-in — Элемент можно увеличить. Не поддерживается в IE.

zoom-out — Элемент можно уменьшить. Не поддерживается в IE.

grab — Элемент можно захватить. Не поддерживается в IE; в других браузерах необходимы вендорные префиксы перед значением(cursor: -webkit-grab и т.д.).

grabbing — Элемент захвачен. Не поддерживается в IE; как и в предыдущем примере, тут нужны вендорные префиксы.

Само значение не влияет на поведение курсора: значение nesw-resize может спокойно выделять текст.

Пользовательские курсоры

В качестве иконки курсора можно указать изображение. Ставится оно точно так же, как и фоновое изображение. Однако с данным методом есть ряд проблем:

IE поддерживает только файлы форматов .cur и .ani, остальные браузеры поддерживают рекомендуемый PNG (так как в нем есть альфа канал);

Все браузеры кроме IE поддерживают быструю смену курсоров – активация части курсора. IE игнорирует координаты Х и У.

Дизайн курсора мыши, как и фавикона, требует особенной осторожности. Эти элементы могут быть расположены как на светлом, так и на темном фоне. Именно поэтому они должны прекрасно работать во всех условиях. Пример на рисунке ниже:

Для пользовательского курсора необходимо прописывать указатель по умолчанию и фолбэк, которые нужны для браузеров типа IE:

canvas {
    cursor:  crosshair;
    cursor: url(circular-cursor.png) 53 53, crosshair;
}

Значение 53 53 показывает сам курсор, его центр.

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (2)

  1. Михаил

    «Для пользовательского курсора необходимо прописывать указатель по умолчанию и фолбэк…»
    Господа, Вы на каком языке пишите? У Вас отличный журнал, но уважайте же читателей. Если Вы не знаете английский в пределах темы, ну не публикуйте тогда статью сразу — посмотрите словарь, что ли! Или русское слово «отступ» Вас как-то унижает?

    • Андрей Кудлай

      Михаил, в любой профессиональной среде есть масса жаргонизмов, профессиональных терминов, которые не переводятся. И веб-разработка здесь не исключение. Здесь также есть много таких терминов: баг, дебаг, див, линк, урл, сайдбар, фолбэк… это первое, что пришло на ум. Переводить их… ну, как бы даже и не принято, поскольку эти термины как раз и являются нормой. Кстати, слово fallback все же означает в данном случае не отступ, а запасной вариант.
      Так что ни о каком унижении речи нет, это просто профессиональная терминология.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree