Апрель » Уроки по CSS » Как изменить вид курсора с помощью стилей

Как изменить вид курсора с помощью стилей

galina2601 16-12-2020, 11:50 668 Уроки по CSS

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

И это правильно. Сейчас такое количество ресурсов в интернете, что чаще всего все они сливаются в общую массу. Заходишь на какой-то новый сайт, а создается впечатление, что ты уже на нем был.

Настолько все одинаково.

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

Такая маленькая "фишечка", а польза от нее огромная, - повысится УЗНАВАЕМОСТЬ сайта.

Вот, к примеру, ваш сайт о полетах в космос. Используйте курсор в виде ракеты (наведите курсор на текст).

Текст с ракетой. Текст с ракетой. Текст с ракетой. Текст с ракетой. Текст с ракетой.

Или, если вы ведете кулинарный блог, вполне в качестве курсора можно использовать поварской нож (наведите курсор на текст).

Текст с ножом. Текст с ножом. Текст с ножом. Текст с ножом.

Понравилось? Тогда вперед. Делаем новые курсоры для сайта.

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

Курсор для сайта можно спокойно изменить при помощи стилей.

body { cursor: url('img/cursor.cur'), default; }

Понятно, что url('img/cursor.cur') указывает на файл-картинку, находящуюся в папке img. Картинка имеет специфическое расширение .cur, но это не проблема.

Берете обычную картинку в формате .png и конвертируете ее в нужный формат онлайн на сайте https://convertio.co/ru/png-cur/.

Сохранять файлик для курсора можно в любую папку. Просто укажите полный путь к картинке при описании стиля.

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

Как сделать новый курсор для отдельного элемента сайта

Можно сделать так, что новый курсор будет указывать на отдельные блоки текста.

К примеру, вы делаете задания для детей и правила выделяете каким-то способом - цветом, шрифтом, фоном... Вполне можно к этим выделениям добавить и изменения курсора (наведите курсор на текст).

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

Принцип тот же. Добавляем стиль курсора либо прямо к элементу, либо к классу.

a { cursor: url('img/cursor2.cur'), default; } - применяем курсор ко всем ссылкам на сайте
.block { cursor: url('img/cursor3.cur'), default; } - применяем курсор к любому элементу с классом block.