Говорят, что создание сайта - очень длительный и трудоемкий процесс. Мы скажем - НЕТ! Ведь с новыми технологиями, такими как HTML5, CSS3, PHP и MySql можно быстро и легко научиться создавать сайты любой сложности.
Два сумасшедших веб-мастера покажут где что лежит и как этим пользоваться.
Авторизация
Новый
Забыл
Пожалуйста, заполните поля выше. Это нужно сделать обязательно, иначе ничего не получится.
CSS и Верстка /

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

  • Суббота, 27 ноября 2011, 01:05 |
  • Автор: fiamma |
  • Просмотров: 3640 |
  • Комментарии: 2 |
  • В закладки:
Пару дней назад, один из моих клиентов попросил меня изменить вид курсора при наведении на крестик (закрыть) всплывающего окна. По правде говоря - данными словами он поставил меня в тупик, т.к. до этого момента меня никогда никто не просил изменить вид курсора. Всем вроде и так нравилось. Полазив немного в интернете, нашел очень легкий способ видоизменения курсора.

Оказывается в CSS есть такое свойство как "cursor", которое может принимать значения, указанные в таблице ниже. Важно знать то, что если у пользователя установлен свой вид курсоров, то ему будет показан курсор из его набора, а не из набора по умолчанию.

Вид Значение Тест Пример
Изменяем вид курсора default P {cursor: default}
Изменяем вид курсора crosshair P {cursor: crosshair}
Изменяем вид курсора help P {cursor: help}
Изменяем вид курсора move P {cursor: move}
Изменяем вид курсора pointer P {cursor: pointer}
Изменяем вид курсора progress P {cursor: progress}
Изменяем вид курсора text P {cursor: text}
Изменяем вид курсора wait P {cursor: wait}
Изменяем вид курсора n-resize P {cursor: n-resize}
Изменяем вид курсора ne-resize P {cursor: ne-resize}
Изменяем вид курсора e-resize P {cursor :e-resize}
Изменяем вид курсора se-resize P {cursor: se-resize}
Изменяем вид курсора s-resize P {cursor: s-resize}
Изменяем вид курсора sw-resize P {cursor: sw-resize}
Изменяем вид курсора w-resize P {cursor: w-resize}
Изменяем вид курсора nw-resize P {cursor :nw-resize}


Вы можете использовать свои наборы курсов. Для этого необходимо прописать:
cursor: url('путь к курсору');

А потом просто задаете вид вашего курсора. Как задать вид смотрите выше. :)
Пример:
a { cursor: url(images/sniper.cur), pointer; }

Вот и все...
Пригодится абсолютно всем веб-мастерам подсказка о наложении градиента на текст при помощи CSS
Добавить комментарий