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

Скачать исходники для статьи можно ниже

Инструкция состоит из 3 шагов.

Шаг 1. Выбираем картинку нашего будущего курсора.

Для курсора необходимы картинки специального формата .cur или .ani.

Расширение .cur характерно для статических изображение, а .ani – для анимированных.

Могу посоветовать следующий источник картинок для курсора:

http://www.cursors-4u.com/most-rated/ – сайт на английском языке, но в принципе все понятно, сайт полностью посвящен курсорам.

Имеет следующие категории курсоров:

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

Для примера, рассмотрю установку своего курсора на своем сайте.

Заходим на сайт http://www.cursors-4u.com

Здесь я выбрал в левом верхнем углу пункт Most Viewed (Самые популярные), а далее вот картинку с синеньким курсором (обратите внимание, что на картинке написано маленькими буквами cursor set – то есть это набор курсоров, в моем случае курсоры разных цветов, если же на картинке такой надписи нет, то там один курсор). Анимированный или статичный курсор тоже видно сразу – анимированный на картинке будет двигаться или меняться.

Здесь можете скачать один курсор определенного цвета или же весь сет. Я скачал весь сет – для этого нажмите красную кнопку Download. У меня скачался zip архив, в котором лежат статичные курсоры формата .cur.

Распаковываю архив выбираю нужные мне цвета.

Также картинки для курсора можно создать самому с помощью одной из специальных программ для создания курсоров или конвертации форматов графических файлов.

Шаг 2. Закачиваем файлы наших курсоров на сайт.

Для этого нам понадобиться программа FileZilla.

Картинки можно сбросить в корневую папку вашего сайта, то есть в папку /public_html или на некоторых хостингах WWW – тогда путь к вашей картинке будет следующий http://ваш сайт.ru/имя картинки.cur.

Шаг 3. Меняем файл стилей.

Для сайтов на движке WordPress все очень просто.

Входите в панель управления вашим сайтом, в левом меню выбираете пункт Внешний вид, далее подпункт Редактор и слева в списке шаблонов выбираете файл style.css.

Далее в его коде спускаетесь в самый низ и вставляете следующий код (для примера я выбрал файл картинки cur116.cur и сбросил его в корневую папку своего сайта):

body {cursor: url(https://mnogoblog.ru/cur116.cur), progress !important;}

Все теперь на сайте появился симпатичный курсор!

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

Для реализации данного эффекта вам нужно вставить следующий код в style.css.

body {cursor: url(https://mnogoblog.ru/cur116.cur), progress !important;}
a {cursor: url(https://mnogoblog.ru/cur117.cur), progress !important;}

То есть мы добавили еще одну строчку к коду, тег a и говорит о том, чтобы показывать курсор cur117.cur при наведении на ссылку курсора.
Теперь ваш курсор стал еще симпатичнее.

Программы для работы с курсорами.
Иногда хочется немного отредактировать скаченный курсор или же создать свой – для этого вам поможет следующая программа (скачал сам, установил, все работает нормально):
AniFX Portable – бесплатный, портативный (можно установить на флешку и работать оттуда),полнофункциональный (более 40 эффектов) редактор курсора.
Ссылка для скачивания с официального сайта:
http://portableapps.com/apps/graphics_pictures/anifx_portable

Также возможно вам будет интересен его более популярный собрат:
IcoFX Portable – бесплатный, портативный редактор иконок. Понадобиться вам для создания иконок для вашего сайта.
Ссылка для скачивания с официального сайта:
http://portableapps.com/apps/graphics_pictures/icofx_portable

Благодаря программе AniFX Portable я уменьшил в 2-раза свой скаченный курсор, для этого вам нужно открыть файл курсора данной программой, выбрать в верхнем меню программы пункт Image, а внутри него выбрать подпункт Dimension и поставить значение 16х16 (был 32*32), нажимаете ОК и сохраняете файл в формате cur.