Мы все привыкли к стандартному виду курсора мыши, который нам привычен и понятен, но можно и немного выделить ваш сайт среди других благодаря достаточно простой и при этом интересной функции в 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.
И мы все исправим.
