toolsmoah

Генератор курсора CSS

Инструмент для создания и предварительного просмотра стилей курсора CSS2, CSS3 и пользовательских курсоров.

Курсоры CSS2Универсальная поддержка

auto
Нажмите, чтобы скопировать
inherit
Нажмите, чтобы скопировать
crosshair
Нажмите, чтобы скопировать
default
Нажмите, чтобы скопировать
help
Нажмите, чтобы скопировать
move
Нажмите, чтобы скопировать
pointer
Нажмите, чтобы скопировать
progress
Нажмите, чтобы скопировать
text
Нажмите, чтобы скопировать
wait
Нажмите, чтобы скопировать
e-resize
Нажмите, чтобы скопировать
ne-resize
Нажмите, чтобы скопировать
nw-resize
Нажмите, чтобы скопировать
n-resize
Нажмите, чтобы скопировать
se-resize
Нажмите, чтобы скопировать
sw-resize
Нажмите, чтобы скопировать
s-resize
Нажмите, чтобы скопировать
w-resize
Нажмите, чтобы скопировать

Курсоры CSS3Современные браузеры

none
not IE, Safari, Opera
Нажмите, чтобы скопировать
context-menu
not Firefox, Chrome
Нажмите, чтобы скопировать
cell
not Safari
Нажмите, чтобы скопировать
vertical-text
Нажмите, чтобы скопировать
alias
not Safari
Нажмите, чтобы скопировать
copy
not Safari
Нажмите, чтобы скопировать
no-drop
Нажмите, чтобы скопировать
not-allowed
Нажмите, чтобы скопировать
ew-resize
Нажмите, чтобы скопировать
ns-resize
Нажмите, чтобы скопировать
nesw-resize
Нажмите, чтобы скопировать
nwse-resize
Нажмите, чтобы скопировать
col-resize
Нажмите, чтобы скопировать
row-resize
Нажмите, чтобы скопировать
all-scroll
Нажмите, чтобы скопировать
grab
only Webkit and Firefox
Нажмите, чтобы скопировать
grabbing
only Webkit and Firefox
Нажмите, чтобы скопировать
zoom-in
only Webkit and Firefox
Нажмите, чтобы скопировать
zoom-out
only Webkit and Firefox
Нажмите, чтобы скопировать

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

Курсоры на основе URL

cursor: url(images/cursor.cur), auto;# required by IE
cursor: url(images/cursor.png) x y, auto;# x y are hotspot coordinates
auto is the fallback cursor when custom cursor fails to load

Поддерживаемые форматы

.cur
.png
.jpg
.gif

Пример использования

/* CSS */ cursor: url('custom-cursor.png') 16 16, pointer;

Курсоры на основе URL

cursor: url(images/cursor.cur), auto;# required by IE
cursor: url(images/cursor.png) x y, auto;# x y are hotspot coordinates
auto is the fallback cursor when custom cursor fails to load

Поддерживаемые форматы

.cur
.png
.jpg
.gif

Пример использования

/* CSS */ cursor: url('custom-cursor.png') 16 16, pointer;

Соображения доступности

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

Оптимизация производительности

  • • Предварительно загружайте изображения пользовательских курсоров, чтобы предотвратить задержки
  • • Используйте спрайты CSS для уменьшения количества HTTP-запросов
  • • Избегайте ненужных изменений курсора для повышения производительности
  • • Учитывайте, что пользовательские курсоры не отображаются в мобильных средах
    Генератор курсора CSS | toolsmoah