Самостоятельное создание сайта
ВСЕ О ТОМ, КАК
СДЕЛАТЬ САЙТ
САМОМУ


Оставить отзыв или предложение

Меняем курсор

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

Конечно, оригинальный курсор не сожжет сделать сайт красивым, но украсить и немного выделить из толпы, безусловно сможет. Давайте перейдем непосредственно к делу, как же мы можем это сделать, в CSS существует такой интересный параметр:

cursor: [значение];

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

Стандартных видов у курсора - 14:

Конечно же изображение на курсоре зависит от той схемы которая у вас установлена на компьютере.

Для примера я приведу код, в котором применю 4 вида курсоров:

<html>
   <head>
     <title>css курсор</title>
     <link rel="stylesheet"
type="text/css" href="style.css">
   </head>
   <body>
     <a href="#" class="auto">auto</a><br>
     <a href="#" class="crosshair">crosshair</a><br>
     <a href="#" class="default">default</a><br>
     <a href="#" class="help">help</a><br>
</body>
</html>

CSS код будет следующим:

a. auto{
cursor: auto
}
a.crosshair{
cursor: crosshair
}
a.default{
cursor: default
}
a.help{
cursor: help
}

Как видите здесь все просто и понятно, но существует так же более расширенная функция курсора, вы можете сделать свой курсор и установить его. Чтобы установить свой курсор вам необходимо, чтобы он у вас был в формате cur, ani или svg

Тут опять таки, вариантов несколько можете тупо скачать с Интернета уже готовые курсоры их там достаточно большое количество или сделать курсор самому с помощью бесплатных онлайн сервисов или же, сделать его полностью своими руками, например в программе Adobe Photoshop.

Сервисы из тех, что мне понравились, могу порекомендовать это http://www.rw-designer.com/online-cursor-editor

Сервис создания курсоров

И еще достаточно неплохой сервис http://www.cursor.cc/

Сервис создания курсоров

Здесь вы сможете сделать себе курсор в режиме онлайн и сохранить его себе сразу в нормальном формате.

Ну а уж если вы решили самостоятельно на своем компьютере все сделать, то не проблема, особенно если вы владеете фотошопом, просто создаете новый документ размером примерно 32x32 с прозрачным фоном, рисуем все что вам необходимо и сохраняем его в формате .png и затем уже с помощью бесплатной программки типа IcoFX скачать, вы можете легко переделать в необходимый формат .cur

Теперь давайте посмотрим как прикрепить нестандартный курсор:

<html>
   <head>
     <title>css курсор</title>
     <link rel="stylesheet" type="text/css" href="style.css">
   </head>
   <body>
     <div
class="mycursor">Пользовательский курсор</div><br>
   </body>
 </html>

В файле style.css определим для нее вид курсора, указав адрес картинки:

.mycursor{
cursor : url("src/mycursor.cur"), auto;
}

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

Дата публикации:2014-01-22


Буду очень признателен, если вы поделитесь ссылкой на страницу со своими друзьями в социальных сетях.
Если у вас возникнут вопросы по теме пишите, надеюсь у вас все получиться, удачи вам и всего наилучшего!

Нашли ошибку в тексте

Нашли ошибку в тексте!!!
Просто выделите её мышкой, нажмите Ctrl+Enter.
И мы все исправим.

Allsoft
Хостинг Beget