/* 02.12.2005 */

CSS cursor - курсоры разные нужны...

Автор: Цыгырлаш Игорь (02.12.2005)

CSS cursor позволяет нам устанавливать собственный вид курсора элементам страницы, причем, можно использовать как стандартные виды курсоров, так и курсоры, определенные пользователем (файлы CUR или SVG курсоры).

CSS cursor - свойство для изменения внешнего вида курсора

Как уже говорилось, вид курсора определяется с помощью CSS свойства cursor.

Для простоты разделим курсоры на группы...

Стандартные курсоры

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

Пример использования: SPAN.help { cursor : help; }

Курсор определенный пользователем

Может возникнуть ситуация, когда появится необходисомть в курсоре необычного вида. Тогда следует в качестве значения свойства cursor указать:

url('путь к курсору'), стандартный курсор

Для наглядности приведу примеры:

P { cursor : url("my.cur"), text; }
P { cursor : url("my.svg"), url("my.cur"), auto; }

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

В качестве пользовательского курсора можно использовать файлы в формате CUR, ANI или SVG курсоры. SVG cursor - это платформо-независимый пользовательский курсор, где сам курсор является файлом изображения. Рекомендуется использовать PNG формат, так он поддерживает маску прозрачности через альфа-канал, но можно использовать и GIF, ибо он поддерживает 2-битную прозрачность. Если же используется другой формат изображения, который не поддерживает прозрачность ни через альфа-канал, ни через назначение отдельного цвета в качестве прозрачного, то курсор будет представлен в виде непрозрачной прямоугольной области. Следует также напомнить, что следует использовать в курсоре по меньшей мере два цвета, чтобы он был различим на различном фоне.

Пользовательские курсоры поддерживаются начиная с IE6, Firefox 1.5. Firefox 1.5 поддерживает CUR и SVG cursor-ы, при этом он не поддерживает формат ANI. IE поддерживает форматы CUR и ANI, но не понимает SVG cursor-ов.

На последок

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


-> Обсудить статью в форуме
<- Назад к списку статей
•> META keywords description - пережитки прошлого? Или не совсем?
<• CSS scrollbar - разукрашиваем scrollbar средствами CSS