Разширение PerfectPixel от WellDoneCode. Запознаване с Pixel Perfect Pixel Perfect за Firefox

Добър ден приятели. Онзи ден Дима Шулешов се свърза с мен и ми предложи тема за интересна статия (Дима, здравей!). Е, за мен - интересно и актуално, надявам се и вие да сте полезни на някого. Това са няколко реда код, които ще ви помогнат да оформите целевата страница точно с оформлението.

Освен това значително ще намалите времето за измерване на разстояния и превключване между фотошоп, прозорец на браузър и текстов редактор.

Крайният резултат се свежда до това, че имате бутон в проекта, фиксиран в горния ляв ъгъл (където и да е), когато щракнете върху него, върху оформлението ви се наслагва оформление (картинка) с определена прозрачност и вие може да прецени колко точни са вашите отстъпи, размери, позициониране, съответстващи на дизайна. За да разберете, трябва да опитате. Препоръчвам да изтеглите източника и да видите как работи или да пуснете този кратък видеоклип:

Така че, ако сте имали проблеми с щателни клиенти, които проверяват всеки пиксел, тогава този проблем вече не трябва да възниква. Нека най-накрая да приложим този ефект.

На първо място, както често се случва, включваме библиотеката jQuery:

Тъй като вече е включено в повечето проекти, не го правете отново. Това може да предизвика конфликт и ще ви отнеме много време, за да разберете защо точно възниква.

Сега, нека напишем някои тагове в нашия проект. За мен изглежда така:

Където първият div е блокът, отговорен за бутона, а вторият е наслагването на нашето оформление. За да се наслагва правилно, трябва да направите няколко прости настройки:

P ( фон: url(../images/maket.jpg) no-repeat; /* Вашето оформление */ ширина: 1255px;/* Ширина на оформлението */ височина: 750px;/* Височина на оформлението*/ ляво: calc(50 % - 627,5px);/* втората стойност е половината от ширината на оформлението*/ позиция: абсолютна; горна: 0; непрозрачност: 0,4 !важно; преход: .3s; z-индекс: 97; )

Ето 4 параметъра, които са придружени с коментар и трябва да бъдат заменени със собствени. Всичко е просто!

Сега нека стилизираме бутона. Ако имате значение външен вид, след това редактирайте и така можете да го оставите както е.

#p ( позиция: фиксирана; ляво: 0; горе: 0; ширина: 200px; височина: 75px; фон: #c36c2c; z-индекс: 99; курсор: показалец; подравняване на текст: център; размер на шрифта: 25px; височина на линията: 0px; цвят: #c36c2c; ляво: -150px; вертикално подравняване: средно; тегло на шрифта: 700; преход: .3s ) #p:hover (ляво: 0; височина на линия: 80px; фон: #88d3c2; )

Е, остава да добавите реакция към щракване върху бутона. Просто ще добавим/премахнем класа и ще променим прозрачността на блока с оформлението на фона:

$(document).ready(function () ( $("#p").click(function () ( $("#pp").toggleClass("p") ));));

Ако тепърва започвате да овладявате компютъра и да използвате различен софтуер и имате нужда от програма за преглед на изображения, изтеглете Pixel Perfect. Този зрител е реализиран толкова просто, че дори неопитен потребител може лесно да го овладее, въпреки факта, че разработчиците не искаха да се погрижат за локализирането на продукта за рускоезични потребители (и като цяло изоставиха своето въображение преди десетина години) .

Относно интерфейса

Както споменахме по-рано, Pixel Perfect има доста оскъдна функционалност. Може да изглежда много ограничено за онези потребители, които са свикнали с многозадачни зрители, които могат не само да показват снимки и картини, но и да ги редактират, отпечатват или дори да ги публикуват в мрежата. Ето защо, ако имате нужда от много функции, тогава ви препоръчваме да заобиколите този софтуер, като намерите аналог, например -.

Pixel Perfect ви позволява да отваряте и преглеждате JPEG, PNG, GIF и BMP изображения. В същото време програмата не поддържа прехода от едно изображение към друго и поради факта, че няма бутон "страница", всяко изображение ще трябва да се отваря отделно. Докато отваряте файл, визуализаторът в долната част на екрана показва целия техническа информацияза обекта, което е доста удобно. Докато гледат, потребителите могат да центрират изображението и да го разтягат.

Характеристики на работа

Pixel Perfect се разпространява в преносим формат, което допълнително опростява потребителското изживяване. Няма нужда да се притеснявате за инсталирането, просто извлечете изтегления архив и стартирайте изпълнимия файл. Зрителят идентифицира незначителни изисквания за компютърен хардуер и Windows версии, който не е инсталиран на него.

Резултати

• липса на русифициран интерфейс;
• разпространява се в преносим формат;
• инструментариумът на програмата се основава на изпълнението на една функция - дисплей графични файлове;
• демонстрация на технически данни при разглеждане на изображението;
• софтуервече не се поддържа от разработчиците.

Ще започна отдалеч. Наскоро се присъединих към HTML Academy като ментор. В допълнение към факта, че менторството ви помага да организирате знанията си, то стимулира развитието на различни полезни неща по невероятен начин, защото в процеса се появяват интересни задачи, чието решаване може удобно да се автоматизира.

Учениците получават учебен дизайн от три страници, всяка с оформления за три състояния: мобилно устройство, таблет и настолен компютър, за общо девет оформления. В процеса на оформяне на адаптивна страница има смисъл периодично да преоразмерявате прозореца и да проверявате дали при добавяне на стилове за настолната версия, например, мобилната не се счупи. Кой е най-добрият начин да проверите дали оформлението съвпада?

Екранните снимки, които се използват в големи проекти, са твърде тежки за такава задача, трябва ви нещо много просто, така че всеки начинаещ да може да го използва.

На първо място, разбира се, си спомних приставката Pixel Perfect (тя е поне достъпна за Chrome и Firefox), но не пасва по редица причини. Например изтеглените оформления не могат да се променят при превключване между страници и при смяна на прозореца на браузъра, а превключването им ръчно всеки път ще ви омръзне доста бързо. Освен това има медийни изрази, които могат идеално да сменят оформлението вместо нас.

Първото ми решение изглеждаше така:

Този код се вмъква в всяка страница. Той задава необходимите медийни изрази и връзките към изображения се променят към действителните оформления за всяка конкретна страница.

Оформленията се променят при превключване между страници и при преоразмеряване на прозореца, това вече може да се използва и е доста удобно. Оформленията са точно под маркирането, не е необходимо да ги посещавате през цялото време графичен редактор, така че дори такъв прост дизайн може значително да спести време.

Но докато пишете стилове, вашите фонове и снимки се появяват на страницата, а оформленията в долния слой стават невидими. Как да бъдем?

Следващото ми решение беше разширение за Chrome, което създава полупрозрачен слой с оформления на всяка страница. Когато прозорецът се преоразмерява, оформленията се променят с помощта на медийни изрази, както в предишния случай. Като бонус добавихме контроли за прозрачност за макетния слой и възможност за включване на режима на смесване на разликите, за да улесним забелязването на разликите.

Оказа се нещо прекрасно. Но работи само в Chrome, ключовите точки за превключване на оформления и пътища към изображения трябва да бъдат зададени в конфигурациите на самото разширение, изображенията на оформлението трябва да са вътре в разширението и имаше всякакви други ограничения. Като цяло, не универсален, всеки нов проект ще изисква ръчна настройкаи изобщо не е подходящ за начинаещи.

Исках да намеря някакво много, много просто решение, така че всеки да може да се справи с настройката и инсталацията и в същото време поне приблизително да разбира какво прави.

За да сравните маркирането с оформленията, имате нужда от два слоя: слой за маркиране и слой за оформление. От една страна, можете ръчно да вмъкнете слоя с оформления в маркирането на страницата, от друга страна, има голям риск да го забравите там, когато вече не е необходим, така че следващата опция беше да използвате съществуващите елементи на страницата като слоеве.

Ако оформленията са зададени като фон за , при промяна на прозрачността оформленията също ще станат полупрозрачни, така че е по-добре да използвате елемент като слой с оформления :

Както в предишния случай, оформленията ще лежат под маркирането, но сега ако фонът е зададен, те няма да се виждат. Нека направим слоя за маркиране полупрозрачен, като добавим непрозрачност към :

Това вече може да се използва по някакъв начин, но ми липсваше удобен контрол на прозрачността в това решение, така че написах малък скрипт, който добавя следния панел към страницата:

Позволява ви да контролирате прозрачността (в този случай, вместо оформления, само раиран фон), може да се влачи из страницата и може да се изключи, ако не е необходимо.

Реших да не правя разширение за браузър, за да не ограничавам броя на браузърите, в които може да се използва.

В крайна сметка инсталацията изглежда така:

1. Инсталирайте пакета в папката на проекта чрез npm: npm i pixel-glass --save-dev
2. Поставете снимките на оформлението във вашия проект в папката img (или в друга папка със снимки в проекта).
3. Поставете в код на страница като този: Редактирайте го за вашия проект: задайте медийни изрази, променете адресите на изображения на работещи.
4. Обновете страницата и се наслаждавайте.

По мое мнение се оказа доста удобен инструмент, но със сигурност нещо може да се подобри. Ако имате някакви идеи за това, пишете ми за тях в коментарите. Ще ми е интересно и как решавате такива проблеми и какви инструменти използвате за това.

UPD:библиотеката се премести в npm, благодарение на всички сътрудници