Здравствуйте друзья! В этом посте я рассказываю об очень полезном  дополнении (приложении) в браузере, которым, по мере необходимости, пользуюсь сам. Пост разделён на две части, в конце этой половины находится ссылка на следующую.

Я уже говорил ранее, что для меня самым удобным браузером в работе над дизайном шаблона, является MozillaFirefox. Вернее, те плагины, дополнения и приложения  для работы с дизайном, на данный момент, в нём всё же лучше, нежели в других браузерах.

Rainbow Color Tools

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, Читайте далее…