Пипетка цветов прямо из Firefox

Ноябрь 2nd, 2009 по Perlover Оставить ответ »

Сегодня поставил очень полезный плагинчик для вебмастера сайтов. Кто работал с Фотошоп, знают инструмент «пипетка» — тыкаешь в любое место картинки, получаешь параметр цвета. Я раньше так и делал для сайтов — делал скриншот, потом копировал в Фотошоп, там получал цвет пипеткой. Но если вам надо получить цвет из веб страниц, самый лучший способ — ColorZilla плагин.

Итак, скачиваем, ставим. Внизу слева появляется значок «пипетки». По правой кнопке мыши можно вызвать опции, установить разные настройки. Быстрый вызов — Shift + Esc. При этом появляется мишень — вы наводите на любое место в Firefox, хоть на менюшки самого Firefox, при этом видите цвет в мишени там, где пипетка. Клик — и цвет запомнен. Очень рекомендую поставить опцию «Options» -> «Auto Copy» -> «Enabled». Тогда автоматом цвет при клике будет запоминаться в Clipboard. Работает даже для картинок вебстраницы.
Если удерживать Alt + Shift, то можно прокручивать страницу вправо-влево, вверх-вниз мышкой, с нажатой на ней левой кнопкой (удобно, когда страница больше чем экран).

Но! Этот плагин имеет очень много других полезных фишек. Это:

  • Измерение расстояния (ΔX, ΔY) между текущей позицией мишени пипетки и позицией от предыдущего измерения
  • Редактор цветов
  • Палитры цветов и history по ним (иногда удобно использовать это)
  • И самая полезная штучка — Анализатор цветов страницы (Webpage DOM Color Analyzer). Один вызов этого зверя, и он проанализирует всю страницу, построит палитру цветов, что в ней используется и выдаст вам эту палитру. Если при этом наводить мышкой на цвета, он подсвечивает и показывает куски страницы, где используется этот цвет. Я думаю, полезно это может оказаться, например, в таком случае: вам понравился сайт и его цветовая гамма, вы вызываете анализатор, а потом эту палитру используете. В ней можно исключать какие либо цвета, или разделять ее между участниками через общий сайт addon-са. Вообщем, если поразбираться, должно понравиться. Думаю, на самом сайте можно найти много готовых палитр (не пробовал пока)

Есть у него маленький минус. Если линки имеют :hover псевдокласс, и когда вы наводите на такой линк мишенью, то цвет линка меняется на :hover класс. Поэтому, получить цвет :hover класса можно, а вот цвет простого линка — нельзя, по крайней мере я не нашел этого.

Уже после публикации этого поста, я выяснил, что можно узнать цвет под :hover линком. Не знаю, как я просмотрел это на странице help автора плагина. Вообщем, тыкаем в :hover линк, у нас — цвет после наведения мышки. Кликаем правой кнопкой мыши по пипетке в Status Bar — там есть «Resample Last Location». Выбираем этот пункт — у нас цвет до изменения.

QR-Code этой страницы:

2 комментария

  1. Ребята, спасибо. Понадобилось динамично скорректировать цвет. Стал искать. И вот имею. Удобно, так как «под рукой». Спасибо еще раз.

  2. Полезная весч… щас опробую!