Время от времени мне задают вопрос: " Как задать свой курсор на сайте? ". Разумеется, делается это через CSS , и в этом материале я покажу, как это сделать, а также расскажу о требованиях к изображению курсора, плюс разберём некоторые особенности различных браузеров.
Время от времени мне задают вопрос: "Как задать свой курсор на сайте?". Разумеется, делается это через CSS, и в этом материале я покажу, как это сделать, а также расскажу о требованиях к изображению курсора, плюс разберём некоторые особенности различных браузеров.
Изображение курсора можно делать во многих форматах, например, в png или jpg. Но работать это будет не везде. В частности, Internet Explorer не поддерживает курсоры в таких форматах, ему нужен специальный формат - cur. К счастью, все остальные браузеры также поддерживают cur.
С форматом определились. Теперь нужно понять, как сделать изображение в таком формате. Есть много различных программ, можно воспользоваться, например, IcoFX. Кто не хочет создавать сам, может найти их в Интернете. Различных курсоров огромное количество и, наверняка, найдётся какой-нибудь подходящий.
Когда у Вас есть курсор, всё, что Вам осталось сделать, чтобы задать его на сайте, это загрузить его на сайт и добавить в CSS такой код:
body {
cursor: url("cursor.cur"), auto;
}
Безусловно, вместо body может быть любой другой селектор.
Резюме:
- Создать курсор в формате cur через IcoFX, либо найти в Интернете.
- Поместить его куда-нибудь на сайт (например, в папку с изображениями).
- Прописать код по установке курсора в CSS.
Вот таким нехитрым образом задаётся свой курсор на сайте через CSS.
