Как сделать красивый курсор на сайте html

cursor

Устанавливает форму курсора, когда он находится в пределах элемента. Вид курсора зависит от операционной системы и установленных параметров.

Прежде чем воспользоваться возможностью переделать вид курсора, решите, а будет ли он использоваться к месту. Многих пользователей подобные изменения могут ввести в заблуждение, когда, например, вместо традиционной руки, появляющейся при наведении на ссылку, возникает нечто другое. В большинстве случаев, лучше оставить все как есть.

Синтаксис

cursor: [url(‘путь к курсору’),] | [ auto | crosshair | default | e-resize | help | move | n-resize | ne-resize | nw-resize | pointer | progress | s-resize | se-resize | sw-resize | text | w-resize | wait | inherit ]

Значения

url Позволяет установить свой собственный курсор, для этого нужно указать путь к файлу с курсором. auto Вид курсора по умолчанию для текущего элемента. inherit Наследует значение родителя.

Остальные допустимые значения приведены в табл. 1.

Табл. 1. Вид курсора

Вид	Значение	Тест	Пример
	default	P
	crosshair	P
	help	P
	move	P
	pointer	P
	progress	P
	text	P
	wait	P
	n-resize	P
	ne-resize	P
	e-resize	P
	se-resize	P
	s-resize	P
	sw-resize	P
	w-resize	P
	nw-resize	P

В зависимости от операционной системы и ее настроек вид курсора может отличаться от приведенных в таблице.

При добавлении курсора из файла синтаксис несколько видоизменится.

cursor: url(‘путь к курсору1’), url(‘путь к курсору2’), .

Через запятую допускается указывать несколько значений url , в этом случае браузер попытается открыть первый файл с курсором и если это по каким-либо причинам не получится, перейдет к следующему файлу. Список обязательно заканчивается ключевым словом, например, auto или pointer , допустимые значения перечислены выше.

HTML5 CSS2.1 IE Cr Op Sa Fx

     .cross < cursor: crosshair; >.help  
 
   

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства cursor

HTML5 CSS2.1 IE Cr Op Sa Fx

       
Обычный текст
 
Ссылка 1 Ссылка 2 Ссылка 3
  

Объектная модель

[window.]document.getElementById(» elementID «).style.cursor

Браузеры

Некоторые браузеры поддерживают дополнительные формы курсоров. Например, Internet Explorer и Opera работает со значением hand , которое является аналогом значения pointer . Кроме того, в браузерах Safari, Chrome и Firefox будут действовать следующие значения: all-scroll , col-resize , no-drop , not-allowed , row-resize , vertical-text . Учтите, что указанные значения не входят в спецификацию CSS 2.1, но соответствуют спецификации CSS3 (кроме hand ).

Internet Explorer в качестве формата файла курсора поддерживает CUR и ANI. Firefox, Chrome, Safari поддерживают форматы CUR, PNG, GIF, JPG.

Opera не работает с файлами курсора.

Красивый курсор при помощи CSS и JavaScript

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

В этой статье мы с вами разберем какие способы создания пользовательских курсоров мыши существуют. После прочтения статьи можно будет сразу бежать дополнять свои сайты креативными курсорами, чтобы заинтересовать вашу аудиторию!

Настроим курсор мыши с помощью CSS

Настроить курсор мыши с помощью CSS довольно просто, так как CSS уже имеет свойство для обработки этого. Все, что нам нужно сделать, это определить это свойство и использовать его.

CSS свойство cursor — это то, что нам нужно для создания кастомного курсора, но, думаю, перед тем как создавать что-то необычное, стоит разобраться с встроенными видами курсора (не знаю как вы, но до этой статьи я использовала всего пару ��‍♀️).

Из приведенного выше фрагмента кода и результатов вы можете увидеть и протестировать различные курсоры мыши, которые есть в CSS, наведя курсор мыши на каждое из этих полей, содержащих имя каждого значения свойства CSS cursor.

В приведенной выше песочнице вы можете посмотреть на варианты стандартного изменения курсора и соответствующее им имя значения свойства CSS cursor .

Но как же нам использовать свойство cursor для создания кастомного курсора?

Чтобы это сделать, нужно просто указать CSS , какое изображение вы собираетесь использовать в качестве курсора.

body

Из приведенного выше фрагмента кода вы можете видеть, что я правило на курсор я установила в теле документа, чтобы оно могло применяться к курсору независимо от того, куда он перемещается, но абсолютно так же это можно применять с любым другим селектором.

Следующее значение свойства является запасным, на случай, когда изображение не загружается или не может быть найдено. Думаю, вы не хотите оставить ваш сайт был «без курсора», поэтому добавление резервной копии очень важно!

Вы также можете добавить столько резервных URL-адресов, сколько сможете или захотите.

body

Меньше слов — больше песка, так что ловите песочницу:

Настроим курсор мыши с помощью JavaScript

Для того, чтобы кастомизировать курсор при помощи JavaScript нам нужно получить доступ к необходимому элементу из DOM и произвести с ним манипуляции.

Для начала давайте добавим простой HTML :

Предлагаю в коде выше создать два div элемента, которые в дальнейшем станут нашим курсором. План состоит в том, чтобы управлять этими элементами из скрипта, чтобы их перемещение по странице прокручивалось событием mousemove с использованием координат X и Y движения мыши.

Но сначала давайте немного добавим стилей:

body < background-color: #FAFAFA; cursor: none; >.circle < width: 10px; height: 10px; border: 2px solid #000; border-radius: 50%; >.square

Как вы могли заметить на body я повесила свойство cursor: none , а это сделает основной курсор невидимым, позволяя отобразить только кастомный.

Сейчас пора перейти к нашему скрипту:

Получим нужные нам элементы:

const cursorCircle = document.querySelector('.circle'); const cursorSquare = document.querySelector('.square');

И добавим обработку события:

const moveCursor = (event) => < const mouseY = event.clientY; const mouseX = event.clientX; cursorCircle.style.transform = `translate3d($px, $px, 0)`; cursorSquare.style.transform = `translate3d($px, $px, 0)`; >; window.addEventListener('mousemove', moveCursor);

Я добавила обработку событий к глобальному объекту window для отслеживания любого движения мыши.

При перемещении мыши вызывается выражение функции перемещения курсора, которое получает объект события в качестве параметра. С помощью этого параметра можно получить координаты X и Y, а после этого переместить полученные нами элементы DOM в любую точку страницы управляя свойствами преобразования стиля с помощью значения translate3d .

Просто, верно? А на самом деле это и все, что я сегодня хотела вам показать!

Ловите еще одну песочницу с примеров выше:

Каком метод использовать лучше?

Теперь вам, как разработчику, решать, какой метод лучше всего подходит для вас. Вы можете использовать CSS , если хотите использовать в качестве курсора красивые смайлики или изображения. С другой стороны, вы можете захотеть использовать JavaScript , чтобы вы могли настраивать сложные фигуры по своему выбору и анимировать движение курсора.

В любом случае теперь у вас больше возможности для творчества, а значит творите и удивляете всех посетителей вашего сайта!

Читайте больше интересных заметок в Telegram канале или в моем блоге !

Интересное:

Как изменить стандартный курсор на сайте?

В CSS существует свойство, с помощью которого вы сможете легко изменить курсор на своем сайте. Часто бывает так, что стандартный курсор Windows не вписывается в общую картину сайта. Чтобы изменить это, сделаем небольшие поправки в коде.

Делаем нестандартный курсор на сайте

Если вы хотите изменить курсор на всем сайте, то в стили вашего сайта добавьте следующее:

 body { cursor: url('/пусть к файлу/sword.cur'), auto; >

В коде вам нужно изменить адрес до вашего курсора. Сам курсор может быть как обычное изображение (расширений *.png, *.gif, *.jpg, *.ico) или же иметь специальное расширение курсоров *.cur

Если же вы хотите изменить курсор, например, только при наведении на ссылку или нужный вам объект, то вставьте:

 .link:hover { cursor: url('/путь к файлу/sword.cur'), auto; >

Здесь .link – это класс у ссылки, и при наведении на нее будет появляться наш курсор.

Стандартные свойства CSS для изменения курсора

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

cursor: auto;	cursor: default;	cursor: none;
cursor: context-menu;	cursor: help;	cursor: pointer;
cursor: progress;	cursor: wait;	cursor: cell;
cursor: crosshair;	cursor: text;	cursor: vertical-text;
cursor: alias;	cursor: copy;	cursor: move;
cursor: no-drop;	cursor: not-allowed;	cursor: all-scroll;
cursor: n-resize;	cursor: e-resize;	cursor: s-resize;
cursor: w-resize;	cursor: col-resize;	cursor: row-resize;
cursor: nw-resize;	cursor: se-resize;	cursor: sw-resize;
cursor: ew-resize;	cursor: nesw-resize;	cursor: nwse-resize;
cursor: zoom-in;	cursor: zoom-out;	cursor: grabbing;
cursor: grab;	cursor: ns-resize;	cursor: ne-resize;

Для применения этих свойств вы так же копируете нужное вам и применяете к объектам на вашем сайте, например:

 .link:hover { cursor: w-resize; >

А в качестве бонуса мы предлагаем вам небольшую подборку красивых курсоров, которые вы можете использовать на своем сайте.

Как изменить курсор при наведении мыши в CSS

Почти все веб-страницы меняют курсоры для лучшего восприятия пользователем или без какой-либо причины. Настройка курсора является простым способом добавления дополнительного эффекта на вашей веб-странице.

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

Эта статья поможет вам контролировать, какими способами может курсор в CSS помочь в вопросе улучшения пользовательского восприятия.

Представим вам следующие методы контролирования курсора:

• Как сделать курсор в виде руки при наведении мыши на элемент списка
• Как изменить курсор гиперссылки при наведении мыши
• Как установить изображение для курсора
• Пример со всеми видами маркеров

Как сделать курсор в виде руки при наведении мыши на элемент списка

Код будет иметь следующий вид, если хотите установить курсор в виде указателя:

li < cursor: pointer; >

Давайте рассмотрим пример вышеуказанного метода:

Пример

html> html> head> title>Заголовок документа title> style> li< margin-bottom:15px; > li.pointer < cursor: pointer; > li:hover < background-color: #ccc; > style> head> body> h4>Наведите курсор мыши на элемент списка и увидите, как меняется курсор по умолчанию в указатель: h4> ul> li>Элемент списка 1 с курсором по умолчанию. li> li class="pointer">Элемент списка 2 с курсором-указателем по умолчанию. li> li>Элемент списка с с курсором по умолчанию. li> ul> body> html>

Другой пример, где меняется курсор-указатель. Здесь мы используем селектор :nth-child вместе с nth-child(odd) как cursor: progress и nth-child(even) как cursor: pointer для отдельных типов курсора на разных элементах.

Пример

html> html> head> title>Заголовок документа title> style> li:nth-child(odd) < background: #1c87c9; cursor: progress; width: 50%; padding: 5px; > li:nth-child(even) < background: #ccc; cursor: pointer; width: 50%; padding: 5px; > style> head> body> p>Наведите курсор мыши на элементы, чтобы увидеть как меняется курсор: p> ul> li>Элемент списка 1 li> li>Элемент списка 2 li> li>Элемент списка 3 li> li>Элемент списка 4 li> li>Элемент списка 5 li> li>Элемент списка 6 li> li>Элемент списка 7 li> ul> body> html>

Как изменить курсор гиперссылки при наведении мыши

Известно, что курсор по умолчанию для гиперссылки устанавливается как «pointer». Если хотите изменить его, нужно указать тип курсора для элемента с помощью CSS селектора :hover.

Чтобы изменить «pointer» в «default», вам понадобится эта часть кода:

a:hover < cursor: default; >

Смотрите следующий пример:

Пример

html> html> head> title>Заголовок документа title> style> .link:hover < cursor: default; > style> head> body> h4>Наведите курсор мыши на гиперссылку и увидите, как "pointer" меняется в "default": h4> p>a href="https://www.w3docs.com">W3docs a> ссылка с исходным видом "pointer". p> p>a class="link" href="https://www.w3docs.com">W3docs a>ссылка с измененным курсором "default". p> body> html>

Так как ссылки имеют color: blue и text-decoration: underline по умолчанию, рекомендуется изменить цвет и продолжить работу с гиперссылками.

Смотрите статью Как изменить цвет ссылки с помощью CSS.

Как установить изображение для курсора

Давайте научимся, как еще можно работать с курсором! Можно также установить выбранное вами изображение как курсор на вашей веб-странице.

После этой части кода установите свойство cursor как image:

.mycursor < cursor: url("myimage.png"), pointer; >

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

Это довольно интересный способ. Можете добавить его на вашу веб-страницу, и пользователи будут в восторге. Представьте, что у вас есть форма, которая соответствует определенной эмоции. Здесь отлично подойдет использование эмоджи.

Пример

html> html> head> title>Заголовок документа title> style> body < background: #eee; text-align: center; > button < display: inline-block; background-color: #1c87c9; color: #eee; margin: 25px; position: relative; width: 140px; height: 45px; border-radius: 3px; border: none; font-size: 1.5em; text-align: center; text-decoration: none; box-shadow: 0 2px 8px 0 #999; > button:hover < background-color: #999; color: #ffcc00; > #happy < cursor: url("/uploads/media/default/0001/02/ee4486d1b3fc998e444c3b0100c73db282760eb5.png"), auto; > #sad < cursor: url("/uploads/media/default/0001/02/38cb87a27305100311d9c96e5a5ebb88f04d8034.png"), auto; > #love < cursor: url("/uploads/media/default/0001/02/4be757cf6e9ffc865861649ca423654484ad3dc1.png"), auto; > style> head> body> h2>Какое у вас впечатление от нашей веб-страницы? h2> button id="happy">Радостное button> button id="sad">Грустное button> button id="love">Влюбленное button> body> html>

Рассмотрим другой пример, где использованы иконки. Можете использовать их из веб-страниц, где возможно применить код Base64, просто вставляя этот код в URL значение курсора. Или можно загрузить иконку на вашу веб-страницу и использовать URL для установления курсора.

Пример

html> html> head> title>Заголовок документа title> style> body < width: 600px; margin: 0.5em auto; > img < width: 280px; height: 186px; margin: 5px; display: inline-block; background-position: 50% 50%; > .dog < cursor: url("/uploads/media/default/0001/02/53f34c2d574ce31a424df7855ef3e8f2ece589d6.png"), auto; > .cactus < cursor: url("/uploads/media/default/0001/02/ea8020fd3fdb96affa77c8164f80d88f8c419e0f.png"), auto; > .nature < cursor: url("/uploads/media/default/0001/02/edcafd9e202ae5f2ae6ae839d21d1d642b2ace00.png"), auto; > .house < cursor: url("/uploads/media/default/0001/02/bb6f118f3b06838624b4297992457093f40fd92b.png"), auto; > style> head> body> img class="cactus" src="/uploads/media/default/0001/02/fc16e475b5cefcbe57924b1a4a3b3e38e936b77c.png" alt="cactus"> img class="nature" src="/uploads/media/default/0001/02/2a85e41725d19aeae7066836accaababd42e638d.png" alt="nature"> img class="dog" src="/uploads/media/default/0001/02/23df99002f94be0d1ca915058e2216c756be155e.png" alt="dog"> img class="house" src="/uploads/media/default/0001/02/1492763b186dabd60c4fbad49ce6d4ba3925b712.png" alt="house"> body> html>

Пример со всеми видами курсора

Здесь увидите пример, который содержит все возможные виды курсора.

Для значений «zoom-in», «zoom-out», «grab» и «grabbing» добавляется расширение -webkit- .

Пример

html> html> head> title>Заголовок документа title> style> body < text-align: center; font-family: Roboto, Helvetica, Arial, sans-serif; > .cursor < display: flex; flex-wrap: wrap; > .cursor > div < flex: 120px; padding: 10px 2px; white-space: nowrap; border: 1px solid #666; border-radius: 5px; margin: 0 5px 5px 0; > .cursor > div:hover < background: #1c87c9; > .auto < cursor: auto; > .default < cursor: default; > .none < cursor: none; > .context-menu < cursor: context-menu; > .help < cursor: help; > .pointer < cursor: pointer; > .progress < cursor: progress; > .wait < cursor: wait; > .cell < cursor: cell; > .crosshair < cursor: crosshair; > .text < cursor: text; > .vertical-text < cursor: vertical-text; > .alias < cursor: alias; > .copy < cursor: copy; > .move < cursor: move; > .no-drop < cursor: no-drop; > .not-allowed < cursor: not-allowed; > .all-scroll < cursor: all-scroll; > .col-resize < cursor: col-resize; > .row-resize < cursor: row-resize; > .n-resize < cursor: n-resize; > .e-resize < cursor: e-resize; > .s-resize < cursor: s-resize; > .w-resize < cursor: w-resize; > .ns-resize < cursor: ns-resize; > .ew-resize < cursor: ew-resize; > .ne-resize < cursor: ne-resize; > .nw-resize < cursor: nw-resize; > .se-resize < cursor: se-resize; > .sw-resize < cursor: sw-resize; > .nesw-resize < cursor: nesw-resize; > .nwse-resize < cursor: nwse-resize; > .grab < cursor: -webkit-grab; cursor: grab; > .grabbing < cursor: -webkit-grabbing; cursor: grabbing; > .zoom-in < cursor: -webkit-zoom-in; cursor: zoom-in; > .zoom-out < cursor: -webkit-zoom-out; cursor: zoom-out; > style> head> body> h2>Пример свойства cursor h2> p> Наведите курсор мыши на элемент и увидите изменения: p> div class="cursor"> div class="auto">auto div> div class="default">default div> div class="none">none div> div class="context-menu">context-menu div> div class="help">help div> div class="pointer">pointer div> div class="progress">progress div> div class="wait">wait div> div class="cell">cell div> div class="crosshair">crosshair div> div class="text">text div> div class="vertical-text">vertical-text div> div class="alias">alias div> div class="copy">copy div> div class="move">move div> div class="no-drop">no-drop div> div class="not-allowed">not-allowed div> div class="all-scroll">all-scroll div> div class="col-resize">col-resize div> div class="row-resize">row-resize div> div class="n-resize">n-resize div> div class="s-resize">s-resize div> div class="e-resize">e-resize div> div class="w-resize">w-resize div> div class="ns-resize">ns-resize div> div class="ew-resize">ew-resize div> div class="ne-resize">ne-resize div> div class="nw-resize">nw-resize div> div class="se-resize">se-resize div> div class="sw-resize">sw-resize div> div class="nesw-resize">nesw-resize div> div class="nwse-resize">nwse-resize div> div class="grab">grab div> div class="grabbing">grabbing div> div class="zoom-in">zoom-in div> div class="zoom-out">zoom-out div> div> body> html>