Всё, что вы хотели знать, но стеснялись спросить о кастомных курсорах в CSS

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

Также сравним плюсы и минусы применения CSS и JavaScript для создания кастомных курсоров. Обсудим, когда стоит отказаться от курсоров по умолчанию и как учитывать потребности пользователей с ограниченными возможностями. Чтобы во всё это вникнуть, вам понадобятся базовые представления об HTML, CSS и JavaScript.

Свойство cursor

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

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

Вот как выглядит базовый синтаксис:

selector {     cursor: value; }

Значение по умолчанию auto означает, что браузер отображает курсор в зависимости от контекста.

Список всех значений cursor

Давайте для начала пройдёмся по всем доступным параметрам cursor в CSS:

Наведите курсор на поля ниже, чтобы увидеть разные виды курсора в действии:

По этой ссылке можно посмотреть полный список курсоров CSS. Разумеется, у этих курсоров есть оформление и они выполняют свою функцию. Но всё-таки можно придумать что-нибудь поинтереснее.

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

Создание кастомного курсора в CSS — задача несложная. Прежде всего найдите картинку, которая заменит курсор по умолчанию. Можно придумать дизайн самостоятельно или выбрать подходящий PNG в библиотеке, например в Font Awesome.

Далее, чтобы создать кастомный курсор, используйте свойство cursor с функцией url() — она передаёт на курсор местоположение изображения:

body {       cursor: url('path-to-image.png'), auto; }

Чтобы применить курсор ко всем разделам сайта, лучше всего использовать свойство cursor в теге body HTML-кода. Но можно задавать кастомные курсоры и для конкретных элементов, а не для сайта в целом.

Можно добавить в свойство cursor значение fallback. Иногда изображение, используемое для кастомного свойства, бывает недоступным или не загружается. Тогда благодаря этому значению пользователям будет доступен другой вариант.

В этом случае auto является дескриптором fallback для кастомного свойства cursor. Если кастомный курсор недоступен, пользователи увидят стандартный курсор.

А ещё можно задать для сайта несколько кастомных курсоров в качестве резервных вариантов. Для этого всего лишь нужно добавить их пути в свойство cursor:

body {       cursor: url('path-to-image.png'), url('path-to-image-2.svg'), url('path-to-image-3.jpeg'), auto; }

В приведённом выше коде три резервных курсора.

Поскольку кастомные курсоры привлекают внимание к элементам, которые вы хотите выделить, их лучше приберечь для определённых сценариев использования. К таким сценариям можно отнести:

• указание на конкретные действия пользователя,

• сторителлинг,

• элементы геймификации,

• эффекты наведения курсора.

Общие рекомендации по созданию кастомных курсоров

Вот несколько дельных советов по созданию кастомных курсоров:

• используйте файлы PNG или SVG для эффекта прозрачности;

• используйте файлы небольшого размера, чтобы не снижать производительность;

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

Меняем курсор на указатель

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

Вот пример:

<style>   /* Style the table */   table {     font-family: arial, sans-serif;     border-collapse: collapse;     width: 100%;   }    /* Style the table cells */   td, th {     border: 1px solid #dddddd;     text-align: left;     padding: 8px;   }    /* Style the table rows */   tr:hover {     cursor: pointer;   } </style>  <table>   <tr>     <th>Name</th>     <th>Age</th>     <th>City</th>   </tr>   <tr>     <td>John</td>     <td>30</td>     <td>New York</td>   </tr>   <tr>     <td>Jane</td>     <td>25</td>     <td>Chicago</td>   </tr>   <tr>     <td>Bill</td>     <td>35</td>     <td>Los Angeles</td>   </tr> </table>

В этом коде мы используем селектор tr:hover, чтобы применить свойство cursor ко всем строкам таблицы при наведении курсора. Задайте для свойства cursor значение pointer, и курсор поменяется на иконку в виде руки.

Скрываем курсор мыши с помощью CSS

Чтобы скрыть курсор с помощью CSS, используйте свойство cursor со значением none. Пример:

<style>   /* Style the body element */   body {     cursor: none;   } </style>  <body>   <!-- Your content goes here --> </body>

В этом случае курсор не виден на веб-странице. Если нужно скрыть его только над определённым элементом, примените свойство cursor к этому элементу, а не к body.

Иногда имеет смысл скрыть курсор в следующих ситуациях:

• в игре или интерактивном приложении — без курсора пользователь глубже погружается в процесс;

• в презентации или слайд-шоу — это поможет лучше сосредоточиться на контенте и не отвлекаться на курсор;

• при демонстрации видео или контента в полноэкранном режиме — если курсор скрыт, пользователь не сможет случайно кликнуть по кнопкам или другим элементам.

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

Курсоры: CSS vs JavaScript

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

Создавать курсоры с помощью CSS предпочтительнее по двум причинам:

• простота — достаточно одной строки CSS, чтобы переключаться между разными типами курсоров;

• поддержка браузерами — кастомные курсоры CSS совместимы со всеми браузерами, так что вам не понадобятся дополнительные настройки для работы сайтов в разных веб-браузерах.

Основной недостаток CSS при создании кастомных курсоров — это скромные возможности анимации и расширенных настроек.

И тут на сцену выходит JavaScript. В нём предусмотрено гораздо больше разнообразных вариантов. Например, можно наводить или перемещать курсор над определённым элементом, кликать по нему. Движения курсора можно обновлять и легко анимировать в зависимости от конкретных событий.

Как создать кастомный курсор с помощью JavaScript

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

Сделаем анимированный курсор с помощью CSS — он будет смотреться интереснее, чем изображение. Подвигайте курсор по полю ниже, чтобы посмотреть, как он выглядит:

Как видите, курсор состоит из двух элементов: кружочка побольше и кружочка поменьше. Создадим два элемента div и присвоим им имена классов:

<div class="cursor small"></div> <div class="cursor big"><div>

Далее оформим стиль кружочков с помощью CSS. Для большого круга установим ширину и высоту 50px, а форму придадим с помощью border-radius: 50%.

Маленький кружок у нас полый, так что зададим его границу border-radius 50%, а ширину и высоту — по 6px. Отключаем курсор по умолчанию, указав cursor: none. Теперь вместо него появится кастомный курсор.

Для анимации большого круга воспользуемся @keyframes. Анимация длится 2s. В начале анимации мы применяем зелёный background-color и непрозрачность 0.2. В середине анимации цвет станет оранжевым, а к концу — красным. Указываем infinite для animation-iteration-count, чтобы анимация всё время повторялась:

body {   background-color: #171717;   cursor: none;   height: 120vh; }  .small {   width: 6px;   height: 6px;   border: 2px solid #fff;   border-radius: 50%; }  .big {   width: 50px;   height: 50px;   border-radius: 50%;   animation-name: stretch;   animation-duration: 2s;   animation-timing-function: ease-out;   animation-direction: alternate;   animation-iteration-count: infinite; }  @keyframes stretch {   0% {     opacity: 0.2;     background-color: green;     border-radius: 100%;   }   50% {     background-color: orange;   }   100% {     background-color: red;   } }

А чтобы элементы следовали за движениями мыши, воспользуемся JavaScript. Скрипт ниже получает данные о движении мыши по веб-странице. Когда пользователь двигает мышь, функция извлекает координаты x и y и соответствующим образом обновляет положение обоих элементов div:

const cursorSmall = document.querySelector('.small'); const cursorBig = document.querySelector('.big');  const positionElement = (e) => {   const mouseX = e.clientX;   const mouseY = e.clientY;    cursorSmall.style.transform = `translate3d(${mouseX}px, ${mouseY}px, 0)`;   cursorBig.style.transform = `translate3d(${mouseX}px, ${mouseY}px, 0)`; };  window.addEventListener('mousemove', positionElement);

Полный код и интерактивный курсор представлены в CodePen ниже:

Вот как это работает:

• мы используем querySelector для доступа к двум элементам div;

• добавляем приёмник событий, который получает информацию о движении мыши;

• когда курсор движется, функция positionElement извлекает актуальные координаты мыши x и y;

• эти координаты обновляют свойство transform: translate3d() для обоих элементов курсора, перемещая их соответствующим образом;

• transform меняет положение элементов в горизонтальном и вертикальном направлении, а translate3d корректирует их положение в 3D-пространстве.

Кастомные курсоры: UX и совместимость с браузерами

Кастомные курсоры придают сайтам уникальности, но если перегнуть палку, они начинают раздражать и отвлекать пользователей. Многим людям они не нравятся, особенно если затрудняют навигацию по сайту. Курсор всё-таки должен быть удобным.

Прежде чем добавить кастомный курсор, спросите себя, действительно ли он повышает удобство работы с сайтом, или просто классненько смотрится. К тому же некоторые браузеры, особенно старые, не поддерживают спецэффекты курсоров. Вот данные CanIUse по поддержке в браузерах свойства cursor:

Чтобы не докучать пользователям, не переборщите с кастомными курсорами. И всегда задумывайтесь, подходят ли они по дизайну. Желательно предоставить пользователю выбор: тогда он сможет отключить кастомный курсор и вернуться к варианту по умолчанию.

Не забывайте о пользователях с ограниченными возможностями

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

Если из-за кастомного курсора персональные настройки перестают работать на сайте, пользователь испытывает сильные неудобства. Иногда он и вовсе лишается возможности работать с сайтом.

Если вам всё равно нужен кастомный курсор, вот что следует предусмотреть:

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

• Уважайте личные предпочтения, связанные с особенностями здоровья. Используйте параметр prefers-reduced-motion, чтобы отключить кастомные курсоры для тех, кому они мешают:

@media (prefers-reduced-motion: reduce) {    *{ cursor: auto; /* Reverts to the default cursor */    } }

• Обеспечьте совместимость с экранными дикторами. Кастомные курсоры могут затруднять применение специальных возможностей, так что добавьте к элементам курсора параметр aria-hidden="true". Так элементы будут видны на странице, но не попадут в поле зрения программ чтения с экрана.

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

---

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

• посетить день открытых дверей бакалавриата «Программные системы и автоматизация процессов разработки»;

• посмотреть запись встречи «Как стать бэкенд-разработчиком»;

• пройти курс «Специалист по информационной безопасности: старт карьеры»;

• записаться на вебинар «Гибкое планирование: как достичь целей без саморазрушения».

Или открыть перспективы и получить повышение с профессиональным обучением:

• на новой программе «Go-разработчик с нуля»;

• на курсе «React: фреймворк фронтенд-разработки»;

• по специализации «DevOps-инженер»;

• на расширенном курсе «Аналитик данных».