mojwp.ru
Назад

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

Опубликовано: 13.10.2012
16
247

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

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

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

Внимание! Я выпустил новую тему Romb для ваших статейников и блогов. Максимально быстрая по Google PageSpeed и максимальная оптимизация под SEO.

Смотрите видео в качестве HD (шестеренка в правом нижнем углу). Записано при помощи программы FastStone Capture.

Поддержка форматов курсоров разными браузерами:

  • Internet Explorer — CUR и ANI;
  • Firefox, Chrome, Safari — CUR, PNG, GIF, JPG;
  • Opera — на момент написания статьи не поддерживает.

Свой курсор для всего сайта при помощи CSS

Прежде всего делаем заготовки курсоров в нужном формате и закачиваем их к себе на хостинг. Далее открываем файл стилей и вставляем следующий параметр в класс body (в видео показано наглядно):

В результате курсор изменится по всему сайту, за исключением наведения на ссылку. Чтобы изменить курсор на ссылке, нужно вставить это же самое для a в файле стилей (обычно сразу же за body располагается).

Стилизованный курсор в определенной части сайта

Если вы хотите сделать тематический курсор только в определенной части сайта (в блоке сайдбара, или в теле самой статьи, ее частей), то необходимо прописать параметр cursor только для выбранного класса:

Вот ссылка на справочник, где можно найти информацию о допустимых параметрах в синтаксисе cursor http://htmlbook.ru/css/cursor.

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

Стилизованный курсор на любом сайте за минуту
5 (100%) 2 голос.

Давай, оцени статью!

Автор:
Виталий
Поделиться
Комментарии:
  • SADUKEY
    Опубликовано: 16.10.2012 Ответить на сообщение

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

  • ТОха
    Опубликовано: 16.10.2012 Ответить на сообщение

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

    • Виталий
      Опубликовано: 17.10.2012 Ответить на сообщение

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

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

  • SADUKEY
    Опубликовано: 17.10.2012 Ответить на сообщение

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

  • Елена
    Опубликовано: 18.10.2012 Ответить на сообщение

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

    • Виталий
      Опубликовано: 18.10.2012 Ответить на сообщение

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

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

  • Елена
    Опубликовано: 18.10.2012 Ответить на сообщение

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

  • Никита Рябин
    Опубликовано: 08.11.2012 Ответить на сообщение

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

  • aXe Neytron
    Опубликовано: 09.11.2012 Ответить на сообщение

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

  • Anna
    Опубликовано: 06.12.2012 Ответить на сообщение

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

    • Вероника
      Опубликовано: 14.02.2013 Ответить на сообщение

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

      • Виталий
        Опубликовано: 14.02.2013 Ответить на сообщение

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

  • Вероника
    Опубликовано: 14.02.2013 Ответить на сообщение

    в первой строчке после body, вот здесь:

    • Виталий
      Опубликовано: 14.02.2013 Ответить на сообщение

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

  • Вероника
    Опубликовано: 14.02.2013 Ответить на сообщение

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

  • николай
    Опубликовано: 08.08.2014 Ответить на сообщение

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

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.