CSS правило Cursor для изменения курсора мыши
Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru.
Сегодня я приведу примеры использования довольно простого CSS правила cursor, что может пригодиться для повышения юзабилити веб сайтов с динамическими интерфейсами.
Cursor — изменяем внешний вид курсора мыши
Нам осталось только разобрать еще более простое в понимании правило Cursor. В операционных системах предусмотрен целый набор возможных изображений курсора мыши (рука, различные стрелки и т.п. вещи). Все это направлено на удобство работы и понимания того, что происходит или что можно проделать с теми или иными составляющими дизайна операционки.
Т.к. браузер тоже является частью операционной системы, то все эти виды курсоров будут появляться и при вашей работе с веб-страницами. По умолчанию для правила Cursor используется значение Auto и в этом случае браузер сам решает, что показать.
Например, в тексте веб-страницы будет показываться привычный текстовый курсорчик, на пустых местах — стрелочка, а на ссылках — рука или ее аналог (как настроено в вашей операционке). Но с помощью Cursor вы вольны для любого тега прописать свое значение и при наведении на него курсора мыши последний изменит свой вид на то, что вы зададите.
Если опираться на спецификацию CSS с кладбища стандартов всемирной паутины WWW, то значений у Cursor может быть очень много:
Как я уже говорил, по умолчанию для него используется Auto. Ну, а все остальные значения для Cursor вы можете увидеть на приведенном ниже примере (подводите курсор мыши к разным строкам и смотрите как изменится его вид:
- cursor: auto
- default
- pointer
- crosshair
- text
- wait
- help
- move
- e-resize
- ne-resize
- nw-resize;"
- n-resize
- se-resize
- sw-resize
- s-resize
- w-resize
- progress
- ol-resize;"
- not-allowed
- row-resize
- vertical-text
- cursor: url (https://ktonanovenkogo.ru/image/cursor.cur), cursor_type
- all-scroll
- no-drop
В нижней части расположены значения для Cursor, которые в некоторых браузерах могут игнорироваться. Обычно проблемы возникают в Опере, реже в Mozilla Firefox и браузерах на движке Webkit — Google Chrome, Яндекс браузере, а также Сафари для Виндовс), ну и вообще не возникает в Интернет Эксплорере.
Естественно, что виды курсоров будут зависеть и от используемой вами темы ОС или же наборов курсоров в ней. Стоит отдельно отметить вариант, где вы сами можете указать путь до нужной вам картинки, которая обычно имеет расширение .cur, а через запятую нужно будет указать одно из обычных значений, например, так:
url(https://ktonanovenkogo.ru/image/cursor.cur), crosshair;
Есть много программ, которые умеют рисовать курсоры. Но имеет смысл активно применять CSS правило Cursor только тогда, когда у вас будут на сайте какие-то динамические интерфейсы. На обычных страницах лучше не злоупотреблять их разнообразием, дабы не вводить пользователя в прострацию.
Комментарии и отзывы (5)
Спасибо, статья очень понадобится в дальнейшем
да, интерестно...
Здравствуйте, Дмитрий. Я являюсь постоянным читателем этого блога. У вас интересный дизайн. Подскажите как вы реализовали отсутствие вывода категорий в шапке сайта
Добрый день.
Я сейчас изучаю z-index и нашёл интересный способ применения на http://tutorialzine.com/2013/08/slideout-footer-css/ (извините за ссылку), но в футере прописана фиксированная высота.
Как сделать так чтобы высота была динамичной?
Планирую в футер добавить сайдбар из-за этого хочу настроить динамичную высоту меняющуюся от наполнения сайдбара.
С уважением,
Антон
Спасибо за разъяснения!
Ваш комментарий или отзыв