CSS примеры


Как изменить внешний вид курсора (CSS cursor)?

Размещена 3 сентабря, 2008 года


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

В спецификации CSS2 определены следующие значения свойства cursor:

Значения, определяющие стандартные курсоры:

  • auto
  • crosshair
  • default
  • pointer
  • move
  • e-resize
  • ne-resize
  • nw-resize
  • n-resize
  • se-resize
  • sw-resize
  • s-resize
  • w-resize
  • text
  • wait
  • help

Пример: SPAN.help { cursor : help; }

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

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

Примеры:

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

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

Пользовательские курсоры поддерживаются начиная с IE6+, Firefox 1.5.

В качестве пользовательского курсора можно использовать файлы в формате CUR, ANI (только IE) или SVG курсоры (только Firefox 1.5+).

Значение inherit. Это значение говорит о том, что свойство наследуется от элемента-родителя.

Значение курсора по умолчанию: auto


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

  • <span style="cursor: url(cursor.cur), auto">url</span>
  • <span style="cursor: auto">Auto</span>
  • <span style="cursor: crosshair">Crosshair</span>
  • <span style="cursor: default">Default</span>
  • <span style="cursor: pointer">Pointer</span>
  • <span style="cursor: move">Move</span>
  • <span style="cursor: e-resize">e-resize</span>
  • <span style="cursor: ne-resize">ne-resize</span>
  • <span style="cursor: nw-resize">nw-resize</span>
  • <span style="cursor: n-resize">n-resize</span>
  • <span style="cursor: se-resize">se-resize</span>
  • <span style="cursor: sw-resize">sw-resize</span>
  • <span style="cursor: s-resize">s-resize</span>
  • <span style="cursor: w-resize">w-resize</span>
  • <span style="cursor: text">text</span>
  • <span style="cursor: wait">wait</span>
  • <span style="cursor: help">help</span>
SAPE все усложнил?

MainLink - простая и прибыльная продажа ссылок!

Последние поступления:

Размещена 10 августа 2020 года

Я по ТВ видел, что через 10 лет мы будем жить лучше, чем в Германии...
Я не понял, что это они с Германией сделать хотят?!

читать далее…

ТехЗадание на Землю

Размещена 14 марта 2018 года

Пpоект Genesis (из коpпоpативной пеpеписки)

читать далее…

Шпаргалка по работе с Vim

Размещена 05 декабря 2017 года

Vim довольно мощный редактор, но работа с ним не всегда наглядна.
Например если нужно отредактировать какой-то файл например при помощи crontab, без знания специфики работы с viv никак.

читать далее…

Ошибка: Error: Cannot find a valid baseurl for repo

Размещена 13 сентабря 2017 года

Если возникает ошибка на centos 5 вида
YumRepo Error: All mirror URLs are not using ftp, http[s] or file.
Eg. Invalid release/

читать далее…

Linux Optimization

Размещена 30 июля 2012 года

Prelink

читать далее…