Стилизованный курсор на любом сайте за минуту

Опубликовано: 13.10.2012

9795

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

Сделать свой курсор можно как на всем сайте в целом, так и на отдельных его частях. Подходит для всех движков сайта, а так же самописов.

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

Смотрите видео в качестве HD (шестеренка в правом нижнем углу). Записано при помощи программы FastStone Capture.

Поддержка форматов курсоров разными браузерами:

Internet Explorer - CUR и ANI;
Firefox, Chrome, Safari - CUR, PNG, GIF, JPG;
Opera - на момент написания статьи не поддерживает.

Свой курсор для всего сайта при помощи CSS

Прежде всего делаем заготовки курсоров в нужном формате и закачиваем их к себе на хостинг. Далее открываем файл стилей и вставляем следующий параметр в класс body (в видео показано наглядно):

cursor: url(images/cursor-1.png), url(images/cursor-2.cur), default;

В результате курсор изменится по всему сайту, за исключением наведения на ссылку. Чтобы изменить курсор на ссылке, нужно вставить это же самое для a в файле стилей (обычно сразу же за body располагается).

Стилизованный курсор в определенной части сайта

Если вы хотите сделать тематический курсор только в определенной части сайта (в блоке сайдбара, или в теле самой статьи, ее частей), то необходимо прописать параметр cursor только для выбранного класса:

.post a {cursor: url(images/cursor-1.png), url(images/cursor-2.cur), default;}

Вот ссылка на справочник, где можно найти информацию о допустимых параметрах в синтаксисе cursor http://htmlbook.ru/css/cursor.

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

Автор:

Виталий

Привет. Я автор этого блога и ридера вебмастеров/SEO-специалистов WMSN.ru

Можешь оставить свой вопрос в комментариях к статье или предложить идею для новой статьи. Не стесняйся.

Twitter YouTube

-8 8

Похожие записи

1312

Добавляем снеговика и сугробы снизу сайта

как поменять цвет фона при выделении мышкой

1622

Как изменить цвет фона при выделении мышкой текста

631

Красивая форма подписки по Email для сайта + PSD

Черкани пару строк

SADUKEY
Опубликовано: 16.10.2012 Ответить на сообщение
Зачётная вещь. Буду делать сайт обязательно заморочусь на украшательства.
ТОха
Опубликовано: 16.10.2012 Ответить на сообщение
Не стоит так делать)) Пользователь не привык к такому и ему будет сложно пользоваться вашим сайтом) К тому же это абсолютно бесполезно
- Виталий
  Опубликовано: 17.10.2012 Ответить на сообщение
  на сайте, где уже есть костяк посетителей делать подобное может и не нужно.
  но если это проект развлекательной тематики и он только набирает постоянных посетителей, дополнительная индивидуальность может сыграть на руку. однако во всем нужно знать меру и делать курсор удобным.
SADUKEY
Опубликовано: 17.10.2012 Ответить на сообщение
От чего. Если сайт определённой тематики да же совсем не плохо. Только в меру.
Елена
Опубликовано: 18.10.2012 Ответить на сообщение
Виталий, а как сделать анимированный фавикон? Наподобие как у devaka.ru/?
спасибо
- Виталий
  Опубликовано: 18.10.2012 Ответить на сообщение
  сделайте его анимированным в фотошопе (или другом редакторе) и закачайте на хостинг с расширением ico
  вот как у devaka выглядит код
Елена
Опубликовано: 18.10.2012 Ответить на сообщение
Благодарю! попробую.
Никита Рябин
Опубликовано: 08.11.2012 Ответить на сообщение
Жалко что мой блог не специфической тематики, хотя в скором времни открою и такой. Так бы поставил к себе на курсор что нибудь прикольное.
aXe Neytron
Опубликовано: 09.11.2012 Ответить на сообщение
Благодарю за такую класнную информацию.
Anna
Опубликовано: 06.12.2012 Ответить на сообщение
А мне подобная идея нравится 🙂 Хочу попробовать к новому году на недельку-две изменить руку курсора на леденец полосатый или снеговичка :)) Спасибо, Виталь, за такую инфу!!!))
- Вероника
  Опубликовано: 14.02.2013 Ответить на сообщение
  А у меня не вышло ничего. Может такое быть что некоторые темы на вордпрессе такую штуку не поддерживают?
  - Виталий
    Опубликовано: 14.02.2013 Ответить на сообщение
    все темы поддерживают, т.к. это CSS. Видимо делаете что-то неправильно (не туда прописываете)
Вероника
Опубликовано: 14.02.2013 Ответить на сообщение
в первой строчке после body, вот здесь:
```
 body{background:#EDDFDF url(images/content-bg.png);
font:13px Tahoma,Georgia,serif;color:#333333;line-height:22px;}
cursor: url(images/cursor.png), default;
```
- Виталий
  Опубликовано: 14.02.2013 Ответить на сообщение
  вот ошибка и видна: внутри {} все делается. У вас вынесено за пределы
Вероника
Опубликовано: 14.02.2013 Ответить на сообщение
А, Семен Семеныч! (С) Спасибо! Сейчас переделаю)))
николай
Опубликовано: 08.08.2014 Ответить на сообщение
очень интересная и полезная статья мне понравилось кое какие полезные моменты я узнал для себя спасибо за статью

Отмена