Сделать свой курсор на сайт с помощью CSS

Какие курсоры бывают? Как изменить курсор мыши на вашем сайте? Как сделать необычный курсор в определенном блоке на вашем сайте.

Если вы захотели легко и быстро поменять курсор на Вашем сайте или блоке сайта, то вы попали по адресу. Давайте коротко о главном.

Какие курсоры бывают? Стандартные курсоры

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

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; как и в предыдущем примере, тут нужны вендорные префиксы.

Если для вашего случая приглянулся какой-либо стандартный курсор из вышеперечисленных, то чтобы его показывать на определенной области экрана, элемента или всей страницы - вы должны прописать в CSS свойствах этого элемента следущий код: cursor: название курсора;, где прописываете название необходимого курсора.

Пример:


div#int {
 cursor: grabbing;
}

Пример в действии:

See the Pen Курсор при наведении на блок by pyampa (@pyampa) on CodePen.


Как поставить свой курсор на сайт?

Вот мы и перешли к главной части статьи. Не будем долго разглагольствовать.

See the Pen Свой курсора на сайт с CSS by pyampa (@pyampa) on CodePen.


Всё очень просто. В свойство cursor мы указываем путь до картинки, которая и будет нашим курсором. Там же настраиваем размер и выравнивание. Картинки курсоров можно брать в интернете. Просто введите в google "cursors icon" и т.п и выбирайте.


Comments