Привет Хабр!
Долгое время трудясь front-end разработчиком, стремился верстать точно пиксель в пиксель. Сегодня моя мечта осуществилась, теперь я могу делать это без проблем.
Хочу рассказать вам о своем небольшом плагине под названием «Perfetto — Pixel Perfect». Поехали!
Давным давно во времена Firefox 3.0.3, я пользовался дополнением под названием "Pixel Perfect" все было хорошо, до того момента, когда Firefox стал стремительно обновляться. После каждого обновления браузера мой любимый Pixel Perfect отказывался работать. Тогда я подумал, нужно что-то делать. Погуглив нашел несколько решений:
1. PerfectPixel by WellDoneCode — дополнение под Chrome
2. X-precise — JavaScript плагин, ранее он упоминался в статье habrahabr.ru/post/152115
3. Pixp — этот тоже был на хабре habrahabr.ru/post/195414
Не один из вариантов меня не устроил, и я решил написать свой, удобный Pixel Perfect. Несколько дней на разработку и тестирование и плагин готов!
Как пользоваться?
Всего 2 строки и плагин готов к работе:
Что бы добавить слой, достаточно в поле «URL» вставить путь до картинки, это может быть картинка с локального домена или же со стороннего ресурса, например из дропбокса.
Кликнув по иконке с замком рабочий слой будет заблокирован, что исключает непроизвольное смещения слоя.
Значения в полях можно менять стрелочками на клавиатуре. Установив фокус в поле и нажимая стрелочку вверх, мы будем увеличивать значения на одну единицу а нажимая стрелочку вниз, соответственно уменьшать.
На этом все, в планах:
1. Дописать горячие клавиши
2. Сделать возможность добавления нескольких слоев
Ссылка на Онлайн демо
Ссылка на GitHub
Долгое время трудясь front-end разработчиком, стремился верстать точно пиксель в пиксель. Сегодня моя мечта осуществилась, теперь я могу делать это без проблем.
Хочу рассказать вам о своем небольшом плагине под названием «Perfetto — Pixel Perfect». Поехали!
Давным давно во времена Firefox 3.0.3, я пользовался дополнением под названием "Pixel Perfect" все было хорошо, до того момента, когда Firefox стал стремительно обновляться. После каждого обновления браузера мой любимый Pixel Perfect отказывался работать. Тогда я подумал, нужно что-то делать. Погуглив нашел несколько решений:
1. PerfectPixel by WellDoneCode — дополнение под Chrome
2. X-precise — JavaScript плагин, ранее он упоминался в статье habrahabr.ru/post/152115
3. Pixp — этот тоже был на хабре habrahabr.ru/post/195414
Не один из вариантов меня не устроил, и я решил написать свой, удобный Pixel Perfect. Несколько дней на разработку и тестирование и плагин готов!
Как пользоваться?
Всего 2 строки и плагин готов к работе:
<link rel="stylesheet" href="/perfetto/code/perfetto.css" />
<script src="/perfetto/code/perfetto.js"></script>
Что бы добавить слой, достаточно в поле «URL» вставить путь до картинки, это может быть картинка с локального домена или же со стороннего ресурса, например из дропбокса.
Кликнув по иконке с замком рабочий слой будет заблокирован, что исключает непроизвольное смещения слоя.
Значения в полях можно менять стрелочками на клавиатуре. Установив фокус в поле и нажимая стрелочку вверх, мы будем увеличивать значения на одну единицу а нажимая стрелочку вниз, соответственно уменьшать.
На этом все, в планах:
1. Дописать горячие клавиши
2. Сделать возможность добавления нескольких слоев
Ссылка на Онлайн демо
Ссылка на GitHub