CSS – курсор (cursor). Cобственные курсоры – картинки (пользовательские курсоры). Формат cursor ANI, CUR и SVG.

CSS

скачать бесплатно – ” HTML на примерах, всё доступно и просто (для начинающих)”
– – –чайник, HTML ДЛЯ ЧАЙНИКОВ– – –
>> с к а ч а т ь <<

скачать бесплатно – “Как создать классный сайт!
От начала и до конца”
чайник, HTML ДЛЯ ЧАЙНИКОВ—>> с к а ч а т ь <<

CSS - курсор (cursor).Для установки собственного курсора для ваших web – страниц поможет CSS, свойство cursor.

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

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

> Стандартные курсоры.
Наведите мышкой, понаблюдайте изменение курсора.

  • auto – курсор по умолчанию.

  • crosshair – перекрестие.

  • default  – курсор в виде стрелки.

  • pointer  – курсор обозначающий ссылку.

  • move  – курсор, определяющий объект для  перемещения.

  • e-resizene-resizenw-resizen-resizese-resizesw-resizes-resize , w-resize  – курсоры, обозначающие возможность перемещения края объекта.

  • text  – курсор, обозначающий текст.

  • wait  – курсор, обозначающий загрузку программы или объекта.

  • help  – курсор, означающий справочную информацию, в виде вопросительного знака.

Пример заполнения.

скопируй код в блокнот и сохрани как “cursor.html

<html>
<head>

<style type=”text/css”>

.help { cursor: help }

.crosshair {cursor:crosshair}

.wait {cursor:wait}

.ne-resize{cursor:ne-resize}

</style>

</head>
<body>

<a href=”#” class=”help”>наведи курсор </a>
<a href=”#” class=”crosshair”>наведи курсор</a>
<a href=”#” class=”wait”>наведи курсор</a>
<a href=”#” class=”ne-resize”>наведи курсор</a>

</body>
</html>

Вот, что должно получиться. При наведении курсора мышки на ссылку, курсор будет меняется.

.наведи курсор./.наведи курсор./.наведи курсор /.наведи курсор

Читайте также:  Текст в CSS. Выравнивание текста, подчёркнутый. Как задать в css цвет текста?

> Собственный курсор-картинка на CSS
Для установки на сайт собственного курсора укажите в свойстве cursor путь к самому курсору-картинке.

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

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

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

Пример заполнения.

скопируй код в блокнот и сохрани как
cursor-img.html

<html>
<head>

<style type=”text/css”>

body { cursor : url(“Up_Arrow.cur”), text;}

a:hover
{
cursor : url(“UpArrow.cur”), url(“Up_Arrow. svg “), auto;
}


</style>

</head>
<body>

<a href=”#” >наведи курсор </a>
<a href=”#” >наведи курсор</a>
<a href=”#”>наведи курсор</a>
<a href=”#”>наведи курсор</a>
<p>Вот и все</p>

</body>
</html>

просмотреть пример курсора

Я указал, что картинка курсора находиться в корне сайте, то есть вместе со страницей сайта. Если картинка курсора лежала бы в папке “img”, тогда путь был бы таким

cursor : url(“img /UpArrow.cur”), url(“img /Up_Arrow. svg”), auto;

Расшифровка: я указал, где находиться курсор-картинка и какую картинку нужно загрузить для курсора (UpArrow.cur), в случае, если картинка не загрузилась, будет загружаться вторая картинка (Up_Arrow. svg), но даже если и она по каким-то причинам не загрузилась, тогда пойдет загрузка курсора по умолчанию (auto – смотрите стандартные курсоры).

 

 

 

 

 

 

 

 

В качестве курсора можно использовать файлы в формате CUR, ANI, SVG, PNG, GIF курсоры
Поддерживаются собственные курсоры-картинки (пользовательские курсоры) начиная с браузеров IE6, Firefox 1.5.
Firefox 1.5 поддерживает CUR и SVG cursor-ы, при этом он не поддерживает формат ANI.
IE поддерживает форматы CUR и ANI, но не понимает SVG cursor-ов.
скачать курсоры  для мыши, бесплатно.
дальше –Прозрачный CSS фончайник, HTML ДЛЯ ЧАЙНИКОВ

И кстати, если Вы ищете недорогой хостинг могу посоветовать Вебхост – для неограниченного количества сайтов и абузоустойчивый Зомро – для доров, зайтов про казино и адалт.

Читайте также:  >> Списки в CSS. Всё на примерах

Оцените статью
ЗАРАБОТОК В СЕТИ
Добавить комментарий