Полезные дополнения в наших браузерах
Содержание:
Здравствуйте друзья! В этом посте я рассказываю об очень полезном дополнении (приложении) в браузере, которым, по мере необходимости, пользуюсь сам. Пост разделён на две части, в конце этой половины находится ссылка на вторую часть.
Я уже говорил ранее, что самым удобным браузером в работе над дизайном шаблона, для меня является MozillaFirefox. Вернее, те плагины, дополнения и приложения для работы с дизайном, на данный момент, в нём всё же лучше, нежели в других браузерах.
Rainbow Color Tools
Очень полезное и простое в использовании, дополнение. Rainbow имеет несколько инструментов, умеет извлекать цвет любого пикселя на странице браузера, скопировать или сохранить цвета в библиотеке, запоминать адрес страницы на которой был найден тот или иной цвет, а также выбрать цвет из собственной цветовой палитры. К тому же, можно опробовать цвета на любом веб-сайте, окрашивая другим цветом тот или иной элемент сайта. Но, обо всём по-порядку.
В браузере MozillaFirefox перейдите на страницу поиска Дополнений по этой ссылке: https://addons.mozilla.org/ru/firefox/
В поисковой строке введите: Rainbow Color Tools (стрелка 1) и нажмите кнопку поиска (стрелка 2) или клавишу: Enter.
В открывшемся окне, наведите курсор на нужное расширение и нажмите на появившуюся зелёную кнопку: Добавить в Firefox (стрелка 1).
Если во время установки в верхнем левом углу всплывёт окошко с запросом, нажмите кнопку: Установить (стрелка 1).
После чего, из этого же окошка всплывёт ещё одно, с уведомлением и предложением о перезапуске браузера. Воспользуйтесь этим предложением, нажав кнопку: Перезапустить сейчас.
После перезапуска браузера, на панели инструментов справа появится иконка дополнения в виде радуги. Откройте меню приложения (стрелки 1), где выберите: Settings (Настройки)(стрелка 2).
Сейчас уместно будет сделать перевод того, что написано в меню:
Inspector – Инспектор (В данном приложении роль инспектора играют курсор мыши с дисплеем. Точнее будет сказать, что курсором выбирается любая точка в окне браузера и извлекается цвет из этой точки, а в маленьком дисплее, который неотступно движется рядом с курсором, отображается цвет этой точки (пикселя) и другая информация (зависит от настроек)). Одним словом – Пипетка, но с расширенными функциями.
Picker – Выбор (При выборе этого инструмента открывается цветовая палитра, в которой можно выбрать любой цвет или оттенок)
Libray – Библиотека (Позволяет накапливать сохранённые цвета и другую информацию)
Website Analyzer – Анализатор веб-сайта (Позволяет определить количество и процентное присутствие (содержание) всех цветов на странице сайта. Очень полезен при настройке веб-дизайна страницы.)
View Last Color — Просмотреть последний цвет
Settings — Настройки
Настройки Rainbow Color Tools
К сожалению, приложение не имеет русского интерфейса, но и настроек не так уж много, разобраться не составит особого труда.
Ниже представлен перевод того, что написано в окне настроек:
General — Общие
- Display color values in: — Значение цвета в дисплее:
- Make toolbar button a shortcurt to: — Сделать ярлык на панели как кнопку для инструмента :
- Add to context menu — Добавить в контекстное меню
Inspector – Инспектор
- Auto copy color on click — Автоматически скопировать цвет при клике мыши
- Show element info – Показывать Информацию об элементе
- Show coordinates — Показывать координаты
- Show swatch next to mouse pointer — Показать образец цвета рядом с указателем мыши
Рассмотрим настройки более подробно:
1. Display color values in: — Значение цвета в дисплее:
При редизайне темы или создании новых элементов на странице мы частенько прибегаем к помощи определителей цветового кода. В HTML/CSS чаще всего используются значения кодов Hex и RGB.
Эта настройка позволяет указать, в каком виде, в данный момент, вы хотели бы узнать значение цветового кода, в Hex (#34c28d) или в rgb(236, 162, 55). Открыв список значений (стрелка 1), выберите необходимый.
2. Make toolbar button a shortcurt to: — Сделать ярлык на панели кнопкой для открытия инструмента :
Данная настройка позволяет выбрать из списка (стрелка 1), какой инструмент должен открыться при нажатии на ярлык приложения (иконка Радуга).
Inspector – Пипетка
Picker – Цветовая палитра
Library — Библиотека
Analyzer – Анализатор веб-страниц
3. Add to context menu — Добавить в контекстное меню (стрелка 2)
Эта настройка позволяет добавить в контекстное меню инструмент: Preview Element Color — Предварительный просмотр Цветов Элемента, как им пользоваться, рассмотрим ниже.
Общие настройки произведены, осталось настроить работу с “пипеткой”.
Настройки Inspector (Пипетки)
4. Auto copy color on click — Автоматически скопировать цвет при клике мыши
Ну, здесь понятно, поставишь галочку – будет копировать автоматически, не поставишь – будешь копировать вручную. Но что важно, этой же настройкой включается/выключается сохранение цвета в библиотеке.
Кликнул левой клавишей мыши – код скопировался в буфер обмена, кликнул правой клавишей – код запоминается и помещается в библиотеку (library). Следовательно, если убрать галку, то и помещать код в библиотеку придётся вручную. Подробнее в главе о работе с приложением.
5. Show element info – Показывать Информацию об элементе
Если включить эту функцию, то на дисплее будет указываться не только код, но и информация об элементе, например, я навёл курсор на картинку в статье, и вот что отобразилось на дисплее:
Информация гласит, что это картинка, к тому же, не имеет ориентира, не прикреплена ни к чему, ни к левому, ни к правому краю. Это в анонсе, а если открыть статью, то на этой же картинке в информационной строчке отображается: img (изображение). Если навести курсор на кнопку, показывает: a (ссылка). Не знаю, кому-то может это и пригодится?
6. Show coordinates — Показывать координаты
Если активировать эту функцию, на дисплее под цветовым кодом будут отображаться координаты курсора в окне браузера. Отсчёт ведётся по горизонтали от левого края окна браузера и по вертикали от верхнего края окна браузера. В данном случае, точка изъятия образца цвета находится на расстоянии 399 пикселей от левого края и 342 пикселя от верхнего края окна браузера. В принципе, функция не плохая, хорошо было бы ещё, если бы эти координаты где-то сохранялись, а так, при необходимости, придётся вручную записать координаты.
7. Show swatch next to mouse pointer — Показать образец цвета рядом с указателем мыши
Если отключить данную функцию, дисплей всё равно появится вверху справа но, когда он находится рядом с курсором — гораздо удобнее.
Как работать с Rainbow Color Tools, Читайте далее…
© mkovenkov
Добавить комментарий