Оригинальный курсор для вашего сайта

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

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

Инструкция состоит из 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(http://mnogoblog.ru/cur116.cur), progress !important;}

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

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

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

body {cursor: url(http://mnogoblog.ru/cur116.cur), progress !important;}
a {cursor: url(http://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.

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

Оригинальный курсор для вашего сайта: 12 комментариев

  1. Кирилл

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

  2. Сергей

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

  3. Артём

    Спасибо, действительно здорово. Вот только анимированный курсор у меня почему-то не подгружается, пришлось остановиться на обычном. Да, и ещё. Вместо «Скопируйте данный пароль:» и «Вставьте вышеуказанный пароль:» установите, пожалуйста, AmCaptcha. Она так же не напрягает, но не режет глаз. Спасибо за всё.

  4. Apologiz

    У меня такая проблема, курсор работает, но только на 100% окна браузера, то есть если вниз проматываешь, курсор перестаёт работать на фоне, но в блоках продолжает работать.

  5. Елена

    А у меня не получается. И я не понимаю почему. Вроде всё как сказано делаю. Но ни на одной из тем у меня это не получается. Может я курсор куда-то не туда ложу (в /public_html через filezilla) или путь не так указываю (body {cursor: url(мой сайт/cur1054.cur), progress !important;}) в style.css Уже всяко разно над этим маленьким простым кодом поизгалялась. Но почему не получается. И еще ни на одной теме, а на всех. Что я могла упустить?
    А просто код с сайта, который вы указали, чтобы выбрать курсор — их код работает. Но я не хочу, чтобя у меня были ссылки на чужие ресурсы

  6. Константин

    Появился плагин — Unique Cursor (устанавливает оригинальный курсор для вашего сайта):
    Последнее обновление: 2014-1-3
    Загрузок: 3,148
    Страница плагина: «wordpress.org/plugins/unique-cursor/»

    К сведению, у данного плагина есть папочка — images, где хранятся картинки курсоров в формате png — если хотите добавить свой — создайте и вложите в данную папку!

    Плагин Unique Cursor можно также скачать с моего сайта — http://mnogoblog.ru/wp-content/uploads/2014/09/unique-cursor.zip

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>