Автор

25 03.2013
Курсор как элемент веб-дизайна

Курсор как элемент веб-дизайна


 

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

 

Конечно, не стоит изощряться и изменять вид курсора, демонстрируя своё умение применять стили CSS. Этим вы никого не удивите, а пользователя можете ввести в заблуждение. Всё хорошо в меру, поэтому посмотрим, когда же изменение вида курсора может быть оправдано.

Ниже приведены варианты курсоров, которые можно задать с помощью стилей. Надо заметить, что их конкретный вид может несколько отличаться в зависимости от настроек указателя мыши на вашем компьютере. Так как нас интересует не техническая, а так сказать, творческая сторона дела, то, не мудрствуя лукаво, будем для наглядности задавать стиль для каждого элемента списка "в лоб" с помощью обычной конструкции:

<li style="cursor:тип курсора"><strong>Курсор №</strong></li>

 

Красным цветом выделена переменная, определяющая тип курсора. Для просмотра просто наведите указатель на соответствующую строчку. Естественно, никто не мешает вам выносить стилевые правила в заголовок HTML документа внутрь тега <head></head> или в отдельный файл стилей CSS и задавать вид курсора с помощью классов и идентификаторов. Наведите курсор на пример.

 

  • Курсор 1 - cursor:auto
  • Курсор 2 - cursor:crosshair (крест)
  • Курсор 3 - cursor:default
  • Курсор 4 - cursor:e-resize ("направление на восток")
  • Курсор 5 - cursor:help (помощь)
  • Курсор 6 - cursor:inherit
  • Курсор 7 - cursor:move (движение)
  • Курсор 8 - cursor:ne-resize ("направление на северо-восток")
  • Курсор 9 - cursor:n-resize ("направление на север". Далее все обозначения направлений resize курсоров аналогично, то есть от английских частей света: north - east - south - west)
  • Курсор 10 - cursor:nw-resize
  • Курсор 11 - cursor:pointer (указатель)
  • Курсор 12 - cursor:se-resize
  • Курсор 13 - cursor:s-resize
  • Курсор 14 - cursor:sw-resize
  • Курсор 15 - cursor:text (текст)
  • Курсор 16 - cursor:wait (ожидание)
  • Курсор 17 - cursor:w-resize

Само по себе применение различных курсоров вряд ли оправдано, но в сочетании с всплывающей подсказкой оно становится интересным. Напомню, что подсказка создаётся с помощью атрибута title во многих элементах страницы: абзац, заголовок, столбец таблицы, изображение и др. С помощью подсказки вы можете конкретизировать какие-либо дополнительные параметры товаров в прайс-листах, выводить указания для "чайников" и другую служебную информацию. Для примера, приведу использование в прайс-листе курсора help (помощь):

 

1. Колбаса вареная любительская - цена 100 руб.

2. Рояль концертный белый

 

HTML-код второго из приведенных примеров следующий:

<p style="cursor:help" title="Доставка - не наши проблемы, а покупателя!">2. Рояль концертный белый</p>

 

Рояль концертный белый</p>

Курсоры wait (ожидание) и pointer (указатель) можно использовать в первоапрельской шутке или для организации "мелкой пакости". Щелчок по строке, не являющейся ссылкой, или по крестику закрытия всплывающей рекламы приводит к неожиданным действиям, которые не сложно задать с помощью JavaScript. Для примера, щелкните по ссылке-обманке:

Съешь меня!

 

Соответствующий данному примеру HTML-код:

<h4 align="center"
style="cursor:pointer; color:#0033CC; text-decoration:underline" title="Рецепты грибных блюд"
onclick="alert('Привет от Бледной Поганки!'); return true;">Съешь меня!</h4>

 

Иногда из соображений удобства навигации по странице сайта желательно не менять вид курсора при наведении его на текст. В некоторых браузерах по умолчанию курсор при наведении на текст меняет вид стрелки на вертикальную черту с засечками (стиль курсора - "cursor:text"). При этом, на мой взгляд, он плохо виден и приходится дергать мышку, чтобы найти его. В этом случае можно принудительно задать вид указателя в виде стрелки с помощью стиля, но удобнее использовать тег <label> </label>, заключив в него При таком указателе мыши, опять же, на мой взгляд, удобнее выделять текст движением мыши.

Словом, твори, выдумывай, пробуй, и такой привычно-незаметный, но постоянно присутствующий элемент, как указатель мыши, может стать творческим элементом дизайна!

 

Источник: www.seomark.ru


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеРазное

01 06.2013
Курсор как элемент веб-дизайна

В данном уроке мы рассмотрим процесс создания адаптивного меню которое подходит для экранов Retina, меню было разработано под вдохновением цветовой гаммы создателей игры Borderlands, компании Maliwan. Меню автоматически преобразуется в необходимый размер при определенном разрешении экрана, Чтобы меню отлично подходило под экраны retina, мы воспользуемся иконическим шрифтом, чтобы иконки меню не теряли качества при масштабировании. и так, давайте посмотрим, что у нас с этого получилось.


28 06.2011
Курсор как элемент веб-дизайна

Меня зовут Сергей Целовальников, я являюсь руководителем студии «Studio Dtsign», в простонародье и в поисковых системах «Студия Целовальникова Сергея». Также я являюсь оффициальным партнером компании UMI.CMS в области разработки сайтов и веб дизайна, с богатым портфолио работ, созданных на этой системе управления сайтами.

О… UMI.CMS

Работа со многими бесплатными и иже с ними CMS-системами управления сайтов, коих я повидал немало до UMI, часто приходил к констатации фактов о наличии всяческих недостатков и пожинанию «плодов» бесплатного софта. И самый безобидный из них – «костность», негибкость, стандартная блочная систем и необходимость создания всех последующих страниц в единственном шаблоне дизайна сайта.......

 


04 06.2017
Курсор как элемент веб-дизайна

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


24 04.2017
Курсор как элемент веб-дизайна

Дорогие веб-мастера, хочу поделиться с вами очень хорошим решением создания календаря событий, так как при создании нового сайта заказчику нужен был именно ткого рода календарь мероприятий и я перелопатил весь инет в поисках чего-то приличного! И вот оно счастье!!! Я выкладываю уже перелапаченый мной вариант и в него забил даты до 28.01.2021.


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

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

Close