Как задать свой курсор на сайте через CSS
Время от времени мне задают вопрос: "Как задать свой курсор на сайте?". Разумеется, делается это через CSS, и в этой статье я покажу, как это сделать, а также расскажу о требованиях к изображению курсора, плюс разберём некоторые особенности различных браузеров.
Изображение курсора можно делать во многих форматах, например, в png или jpg. Но работать это будет не везде. В частности, Internet Explorer не поддерживает курсоры в таких форматах, ему нужен специальный формат - cur. К счастью, все остальные браузеры также поддерживают cur.
С форматом определились. Теперь нужно понять, как сделать изображение в таком формате. Есть много различных программ, можно воспользоваться, например, IcoFX. Кто не хочет создавать сам, может найти их в Интернете. Различных курсоров огромное количество и, наверняка, найдётся какой-нибудь подходящий.
Когда у Вас есть курсор, всё, что Вам осталось сделать, чтобы задать его на сайте, это загрузить его на сайт и добавить в CSS такой код:
body {
cursor: url("cursor.cur"), auto;
}
Безусловно, вместо body может быть любой другой селектор.
Резюме:
- Создать курсор в формате cur через IcoFX, либо найти в Интернете.
- Поместить его куда-нибудь на сайт (например, в папку с изображениями).
- Прописать код по установке курсора в CSS.
Вот таким нехитрым образом задаётся свой курсор на сайте через CSS.
-
Создано 11.01.2013 08:07:18
-
Михаил Русаков
Комментарии (12):
Полезная вещь! Спасибо.
Ответить
Михаил подскажите мне сайт где вы находите картинки с человечками.
Ответить
Если Вы про шапку, то не знаю, мне её дизайнер делал.
Ответить
Здраствуйте Михаил у меня есть вопрос к вам. Если я открою бесплатный сайт то государство будет платить мне или я должен открыть платный сайт чтобы заработать? Заранее спасибо.
Ответить
Государство не платит за сайты.
Ответить
Каким боком Вы умудрились государство задействовать? :)Сама я, конечно, еще не ас, но чтоб государство... Не хочу обидеть, просто вопрос получился забавным. Думаю что, Вам нужно читать больше соответствующей литературы, чтобы понимать что к чему.
Ответить
Курсор не работает на всем поле странице, в нижней части страницы курсор переходит на стандартный. Как этого избежать?
Ответить
Проверьте через firebug, передалось ли это свойство на всю страницу, или нет.
Ответить
Спасибо. В теге html заведена фоновая картинка, которая больше всего тега body, а свой курсор находится в теге body.
Ответить
курсор можно создать тут: http://www.cursor.cc/
Ответить
Не получается задать свой курсор. Пробовал все форматы которые были в "IcoFX", во всех браузерах кроме IE(у меня он не работает) почти одно и тоже. Только FF на свойство "auto" подставляет "text", а все остальные "pointer". У меня Ос Windows 8(не 8.1)
Ответить
Всё это прикольно, но на серьёзном сайте это делать нельзя.
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.