Авторизация на сайте

Последнее из портфолио

Как с нами связаться

  • 8 953 242 0439
  • +7 953 242 0439
  • ws-aprel@ya.ru
  • *******
  • Россия, г. Горячий Ключ
» » Как изменить вид курсора с помощью стилей

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

galina2601 16-12-2020, 11:50 187 Уроки по 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.


Изменение стандартных курсоров

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

a { cursor: wait} - применяем курсор "ожидайте" ко всем ссылкам на сайте

Список стандартных курсоров

auto - курсор назначается автоматически в зависимости от специфики элемента.(по умолчанию)

crosshair - перекрестие

default - встроенный(основной)

e-resize - стрелка на "восток"

hand - указатель аналогия pointer

help - помощь

move - перемещение

n-resize - переместить на "север"

ne-resize - переместить на "северо-восток"

nw-resize - переместить на "северо-запад"

pointer - указатель

progress - продолжение операции

s-resize - переместить на "юг"

se-resize - переместить на "юго-восток"

sw-resize - переместить на "юго-запад"

text - текст

w-resize - переместить на "запад"

wait - ожидание


Похожие новости

  • Анимация с помощью CSS
  • Как сделать блок div гиперссылкой
  • Урок 7. Создание гиперссылок
  • Урок 3. Горизонтальные линии и бегущая строка
  • Урок 2. Заголовки, абзацы, работа со шрифтами

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

    • bowtiesmilelaughingblushsmileyrelaxedsmirk
      heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
      winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
      worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
      expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
      disappointedconfoundedfearfulcold_sweatperseverecrysob
      joyastonishedscreamtired_faceangryragetriumph
      sleepyyummasksunglassesdizzy_faceimpsmiling_imp
      neutral_faceno_mouthinnocent
    Кликните на изображение чтобы обновить код, если он неразборчив