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

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

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

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

Смотрите видео в качестве 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.

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

Привет. Меня зовут Виталик и я автор этого блога, а так же Магазина WordPress https://wp-r.ru/.

Отблагодарить Z888279575784 R109400923968 или ЯД 41001651742138

Оказываю услуги по созданию и настройке сайтов на WordPress (верстка, натяжка).

Мои Контакты. Я в Twitter @mojWP. Смотри на Youtube. Читай RSS блога.

Опубликовано 16 комментариев
  1. SADUKEY (2 комм.):

    Зачётная вещь. Буду делать сайт обязательно заморочусь на украшательства.

  2. ТОха (4 комм.):
    http://onjee.ru

    Не стоит так делать)) Пользователь не привык к такому и ему будет сложно пользоваться вашим сайтом) К тому же это абсолютно бесполезно

    • Виталий (1674 комм.):

      на сайте, где уже есть костяк посетителей делать подобное может и не нужно.

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

  3. SADUKEY (2 комм.):

    От чего. Если сайт определённой тематики да же совсем не плохо. Только в меру.

  4. Елена (4 комм.):
    http://www.torgsoft.com.ua

    Виталий, а как сделать анимированный фавикон? Наподобие как у devaka.ru/?
    спасибо

    • Виталий (1674 комм.):

      сделайте его анимированным в фотошопе (или другом редакторе) и закачайте на хостинг с расширением ico

      вот как у devaka выглядит код

      <link rel="shortcut icon" href="http://devaka.ru/textpattern/_templates/bloggingpro/favicon.ico" type="image/x-icon" />
      <link rel="icon" href="http://devaka.ru/textpattern/_templates/bloggingpro/favicon.ico" type="image/x-icon" />
  5. Елена (4 комм.):
    http://www.torgsoft.com.ua

    Благодарю! попробую.

  6. Никита Рябин (11 комм.):
    http://pro97.ru/

    Жалко что мой блог не специфической тематики, хотя в скором времни открою и такой. Так бы поставил к себе на курсор что нибудь прикольное.

  7. aXe Neytron (2 комм.):
    http://daytrips.ru/

    Благодарю за такую класнную информацию.

  8. Anna (7 комм.):
    http://krasavolos.com

    А мне подобная идея нравится 🙂 Хочу попробовать к новому году на недельку-две изменить руку курсора на леденец полосатый или снеговичка :)) Спасибо, Виталь, за такую инфу!!!))

    • Вероника (5 комм.):
      http://vesoma.ru

      А у меня не вышло ничего. Может такое быть что некоторые темы на вордпрессе такую штуку не поддерживают?

      • Виталий (1674 комм.):

        все темы поддерживают, т.к. это CSS. Видимо делаете что-то неправильно (не туда прописываете)

  9. Вероника (5 комм.):
    http://vesoma.ru

    в первой строчке после 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;
    • Виталий (1674 комм.):

      вот ошибка и видна: внутри {} все делается. У вас вынесено за пределы

  10. Вероника (5 комм.):
    http://vesoma.ru

    А, Семен Семеныч! (С) Спасибо! Сейчас переделаю)))

  11. николай (1 комм.):
    http://hit-tv.ucoz.ru/

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

Не держи в себе. Выскажись.

Ваш e-mail не будет опубликован. Обязательные поля помечены *

© 2011-2016 | mojwp.ru | Копирование материала разрешено только с письменного согласия
WordPress: 12.8MB | MySQL:78 | 0,344sec
Премиальные плагины для CMS WordPress
Магазин WordPress WP-R.ru
Спасибо, не показывайте мне эту штуку больше!
Смотри мои обучающие видео на YouTube
Иван только что купил плагин ELT
https://wp-r.ru/plaginy/elt.html