Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать на создании сайтов, лендингов, мобильных приложениях и новейших интернет технологиях
Рубрика:Фишки css

Css cursor или как научиться изменять форму курсора на своем блоге

Приветствую всех читателей и подписчиков моего блога. Сегодняшняя публикация посвящена небольшому разделу, связанному с указанием стилевых правил css cursor-а. Наверное каждый из вас замечал, как на некоторых сервисах курсор мишки видоизменяется или принимает другую форму на некоторых объектах веб-страницы. Вот это я с вами и разберу.

Я расскажу с помощью каких средств можно управлять курсором, какие браузеры поддерживают такие изменения, а также, как обычно, приведу примеры. А теперь за дело!

Детские капризы

Однажды я наблюдал за смешной картиной, когда дети узнали, что стандартный курсор можно менять на любой другой. После этого дня по экрану компьютера «скакали» анимированные лошади, передвигались крутящиеся стрелки и «бегали» мультяшные герои…

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

Я все это веду к тому, что прежде чем решиться установить видоизмененный курсор в своем веб-ресурсе, подумайте, а будет ли он там уместен. Также стоит задуматься о дизайне указателя, ведь неверно подобранный элемент может сбить с толку пользователя или усложнить использование объектов по назначению.

Детские капризы Оперы

Именно по этим причинам на большинстве качественно написанных сайтов курсор в основном остается дефолтным.


Что касается браузеров, то Opera единственная не поддерживает ни один файл курсора. Все остальные браузеры с ранних версий отображают данный объект и даже некоторые из них – такие как Safari, Firefox, Chrome – имеют свои значения.

Вашему вниманию cursor!

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

Ключевое слово Значение
Auto Курсор автоматически подбирается, учитывая значения по умолчанию.
none В указанной области указатель не отображается (работает наподобие disable в других случаях).
url Можно вписать ссылку на image подходящего формата.
Default Дефолтный элемент.
Move Курсор показывает, что объект может быть сдвинут.
Pointer Имеет вид человеческой кисти, которая указательным пальцем показывает на выбранный элемент.
Zoom Отвечает за масштабирование. Бывает zoom-in (лупа с плюсом – увеличивает изображение) и zoom-out (лупа с минусом – уменьшает).
Help Такой курсор срабатывает на тех элементах, где можно прочесть инструкцию. Например, в одноименном разделе многих программ «Help».
wait Отображает загрузку приложений или обработку полученных команд.
Text Указывает на возможность ввода текста.
No-drop Появляется, когда перетаскиваемый элемент (drag) нельзя переместить в некую область.

Эту таблицу можно продлить еще на такое же количество описаний курсоров. Поэтому после перечисленного основного материала я решил привести конкретные примеры.

Контрольный в знания

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>cursor</title>
  <style>
   body { background: #F0F8FF; font-size: 24px;}
  #load { text-align: center; border: 3px double; padding: 12px; cursor:wait; background: #dff;}
  #help {cursor:help; }
  </style>
 </head> 
 <body>
  <h2>Заголовок</h2>
  <p>Просто текстовый контент, который ссылается на источник 1 и источник 2. Если этого мало, то вставлена ссылка на 
   "<a href="3.html" id="help">Справку</a>".</p> 
<p id="load"> Что-то грузится.</p>
 </body>
</html>

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

Пришло время нам прощаться. Подписывайтесь на обновления блога и не забывайте делиться ссылкой на мои статьи с друзьями. Удачи и пока-пока!

С уважением, Роман Чуешов


Прочитано: 25 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o: