Ненавязчивые удобные сноски
Интересную и очень простую в применении тулзу обнаружил я на одном зарубежном сайте. Называется “Unobtrusive Sidenotes”, что в приблизительном переводе означает “Ненавязчивые сноски”.
Данный инструмент - смесь технологий JavaScript и CSS, который позволяет до смешного легко вставлять специальные сноски к тексту в Ваши веб-страницы или блоги. Присутствуют даже предустановленные настройки цветов, которые изменяются в CSS, связывая сноски и соответствующий им текст.
Инструмент создан как альтернатива обычным сноскам, когда около слова по тексту указывается циферка или звездочка, а в конце всего текста пишется сноска к этому слову (словосочетанию). Благодаря же использованию тулзы “Unobtrusive Sidenotes” сноски располагаются в удобном для читателя виде, позволяя сразу же ее увидеть и не мешая при этом читабельности текста.
Для установки таких сносок на своем сайте или блоге необходимо выполнить несколько простейших действий:
- Скачать исходный код инструмента.
- Добавить ссылку на файл с JavaScript в страницу, на которой будут использоваться сноски, указывая правильный путь его расположения.
- Добавить сноски в страницу. Делается это следующим образом: слово или словосочетание, которое будет указывать на сноску, необходимо заключить в тег “span”, указать для него CSS-класс “sidenote” и свойство “title”, в котором вписать текст, желаемый для отображения в сноске.
Готовый пример в действии Вы можете посмотреть, кликнув сюда.
Внешний вид сносок, как Вы уже, наверное, догадались, настраивается с помощью CSS. Вы можете определить бордюр, цвет фона и позицию в тексте.
В архиве, который Вы скачаете, находится готовый пример использования инструмента.
Скрипт поддерживается всеми популярными браузерами.
Начните обсуждение статьи!