—»     —»   HINT.css: подсказки на чистом CSS3 и HTML5 (без Javascript)
  Раздел: Подсказки   Нет комментариев  

HINT.css: подсказки на чистом CSS3 и HTML5 (без Javascript)



Подсказки в HTML-страницах в основном не требуют усилий от веб-разработчика, кроме как использования правильных атрибутов title. Затем title используется для отображения подсказки, и для других целей, вроде предоставления контента для экранных читалок. Говоря о применении подсказок, визуальное представление зависит от браузера, с помощью которого ваш сайт посещают. Разработчики, которым требуется больше контроля, уже давно перешли на решения, основанные на javascript. Kashagra Gour создал Hint.css, который предлагает нам отличную альтернативу на базе чистого кода CSS и HTML.

HINT.css: подсказки на чистом CSS3 и HTML5 (без Javascript)

Hint.css – атрибуты данных, CSS3-переходы, псевдо-элементы и параметр content

Hint.css позволяет организовать относительно простые, но стильные подсказки к любому элементу. В первую очередь мы поговорим о тексте, ссылках и изображениях. Чтобы отобразить подскажу, вам надо будет добавить как минимум 2 последовательных класса к выбранному элементу. Первый класс всегда должен называться hint – он будет изначально запускать таблицы стилей, а второй будет определять расположение подсказки, и отвечать за ее визуальное представление. Вы можете добавить сколько вам угодно классов и комбинаций. Если вы хотите указать расположение, а также цвет подсказки, то вы можете просто использовать три класса следующим образом:

<span class="hint  hint--top  hint--error" data-hint="This is an error tooltip">Oh man! You are gonna self-destruct in 5 sec.</span>

И это в результате даст нам следующее:

HINT.css: подсказки на чистом CSS3 и HTML5 (без Javascript)

Используя 'hint', мы привязываем Hint.css к элементу. Класс 'hint--top' располагает подскажу над span-элементом, 'hint--error' отвечает за оформление в красном цвете. Следующий атрибут данных, 'data-hint', отвечает за то, чтобы текст отображался при наведении.

Атрибуты данных HTML5 позволяют нам включать различные данные в валидный исходный код. Данные внутри этих атрибутов не будут отображаться посетителю, и не будут влиять на дизайн. Тем не менее, они будут включены в страницу, и их можно будет прочесть и обработать при помощи специализированных скриптов и методов. В нашем случае, в роли скрипта выступает Hint.css.

На данный момент Hint.css имеет в арсенале определения 'hint--top', 'hint--bottom', 'hint--left' и 'hint--right', которые используются для позиционирования подсказок. Более того, существует определение цветов для большинства статусов сообщений, включая 'hint--error', 'hint--info', 'hint--warning' и 'hint--success'. Если вы хотите, чтобы ваши подсказки всегда оставались видимыми – то есть, чтобы их не надо было запускать только при наведении курсора, – вам нужно добавить класс 'hint--always'.

Так как Hint.css представлен на чистом css-коде, этот набор свойств может быть с легкостью расширен опытными разработчиками. Вы можете добавить цвета и другие визуальные аспекты. Достаточно опытные разработчики с хорошей фантазией могут еще дальше отодвинуть рамки. Hint.css был разработан при помощи Sass, и вместе со скриптом доступен исходный код Sass. Hint.css можно скачать с Github под лицензионным соглашением MIT, что означает, что вы можете свободно использовать скрипт как в личных, так и в коммерческих проектах.

Если вы не знакомы с подсказками, то таблицы стилей этого скрипта точно для вас. Вы можете использовать их в образовательных целях. Вы научитесь многим интересным вещам, если хорошенько просмотрите эти таблицы. Hint.css – это 100% рекомендация от нас. Единственное что вам нужно знать перед тем, как мы отпустим вас экспериментировать над проектами, это тот факт, что css-переходы, примененные к псевдо-элементам работают только в Firefox. Другие браузеры просто не способны отображать переходы, о которых мы тут говорили.

Ссылки:

* HINT.css – библиотека для создания подсказок на CSS | kushagragour.in/lab/hint
* HINT-Github-репозиторий | chinchang / hint.css
* Link-Titles | W3C
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 21563   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц January по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Октябрь 2017    »
ПнВтСрЧтПтСбВс
 1
2345678
9101112131415
16171819202122
23242526272829
3031