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 фон, цвет фона страницы.

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