Zgjatja PerfectPixel nga WellDoneCode. Njihuni me Pixel Perfect Pixel Perfect për Firefox

Mirëmëngjes miq. Ditën tjetër Dima Shuleshov më kontaktoi dhe më ofroi një temë për një artikull interesant (Dima, përshëndetje!). Epo, për mua - interesante dhe e rëndësishme, shpresoj që edhe ju, dikush i dobishëm. Këto janë disa rreshta të kodit që do t'ju ndihmojnë të vendosni faqen e uljes saktësisht me paraqitjen.

Përveç kësaj, ju do të zvogëloni ndjeshëm kohën për matjen e distancave dhe kalimin midis Photoshop, dritares së shfletuesit dhe redaktuesit të tekstit.

Rezultati i përfunduar zbret në faktin se ju keni një buton në projektin tuaj të fiksuar në këndin e sipërm të majtë (kudo), kur klikoni mbi të cilin, një paraqitje (foto) me një transparencë të caktuar mbivendoset në paraqitjen tuaj, dhe ju mundeni vlerësoni sa të sakta janë indentet tuaja, madhësia, pozicionimi korrespondon me modelin. Për ta kuptuar, duhet të provoni. Unë rekomandoj të shkarkoni burimin dhe të shihni se si funksionon, ose të luani këtë video të shkurtër:

Pra, nëse keni pasur probleme me klientët e përpiktë që kontrollojnë çdo piksel, atëherë tani ky problem nuk duhet të lindë më. Le ta zbatojmë përfundimisht këtë efekt.

Hapi i parë, siç ndodh shpesh, është përfshirja e bibliotekës jQuery:

Meqenëse shumica e projekteve e kanë lidhur tashmë, sigurohuni që të siguroheni që nuk do ta bëni përsëri. Kjo mund të shkaktojë një konflikt, dhe do t'ju duhet shumë kohë për të kuptuar pse lind saktësisht.

Tani, le të shkruajmë disa etiketa brenda projektit tonë. Më duket kështu:

Aty ku div i parë është blloku përgjegjës për butonin, dhe i dyti është për mbivendosjen e paraqitjes sonë. Në mënyrë që të mbivendoset siç duhet, duhet të bëni disa cilësime të thjeshta:

P (sfondi: url (../ images / maket.jpg) pa përsëritje; / * Paraqitja juaj * / gjerësia: 1255px; / * gjerësia e paraqitjes * / lartësia: 750px; / * lartësia e paraqitjes * / majtas: calc (50 % - 627.5px); / * vlera e dytë është gjysma e gjerësisë së paraqitjes * / pozicioni: absolut; lart: 0; errësirë: 0.4! E rëndësishme; kalimi: .3s; z -indeksi: 97;)

Këtu janë 4 parametra që shoqërohen me një koment dhe duhet të zëvendësohen me tuajin. Gjithçka është e thjeshtë!

Tani, le të stilojmë butonin. Nëse jeni parimor pamjen, pastaj redaktoni dhe kështu, mund ta lini ashtu siç është.

#p (pozicioni: fiks; majtas: 0; lart: 0; gjerësia: 200px; lartësia: 75px; sfondi: # c36c2c; z-index: 99; kursori: treguesi; rreshtimi i tekstit: qendra; madhësia e fontit: 25px; lartësia e vijës: 0px; ngjyra: # c36c2c; majtas: -150px; rreshtimi vertikal: i mesëm; font-pesha: 700; kalimi: .3s) #p: rri pezull (majtas: 0; lartësia e vijës: 80px; sfondi: # 88d3c2;)

Epo, mbetet për të shtuar një reagim në një klikim mbi butonin. Le të shtojmë / heqim një klasë dhe të ndryshojmë transparencën e bllokut me paraqitjen në sfond:

$ (dokument). tashmë (funksioni () ($ ("# p"). kliko (funksioni) ($ ("#pp"). toggleClass ("p")));));)

Nëse sapo keni filluar të zotëroni një kompjuter dhe përdorni softuer të ndryshëm dhe keni nevojë për një program për shikimin e imazheve, shkarkoni Pixel Perfect. Ky shikues është zbatuar aq thjesht sa që edhe një përdorues i papërvojë mund ta zotërojë me lehtësi, përkundër faktit se zhvilluesit nuk donin të kujdeseshin për lokalizimin e produktit për përdoruesit rusishtfolës (dhe në përgjithësi braktisën idenë e tyre një duzinë vjet më parë).

Rreth ndërfaqes

Siç u përmend më herët, Pixel Perfect ka një funksionalitet mjaft të dobët. Mund të duket shumë e kufizuar për ata përdorues që janë mësuar me shikuesit me shumë detyra, të cilët jo vetëm që mund të shfaqin fotografi dhe fotografi, por edhe t'i redaktojnë, t'i printojnë apo edhe t'i publikojnë ato në internet. Prandaj, nëse keni nevojë për shumë funksione, ju rekomandojmë që ta anashkaloni këtë softuer duke gjetur një analog, për shembull -.

Pixel Perfect ju lejon të hapni dhe shikoni imazhe JPEG, PNG, GIF dhe BMP. Në të njëjtën kohë, programi nuk mbështet kalimin nga një imazh në tjetrin, dhe meqenëse nuk ka buton "rrokullisje", çdo imazh do të duhet të hapet veçmas. Kur hapni një skedar, shikuesi në fund të ekranit tregon tërësinë informacion teknik në lidhje me objektin, i cili është mjaft i dobishëm. Kur shikoni, përdoruesit mund të përqendrojnë imazhin dhe ta shtrijnë atë.

Karakteristikat e punës

Pixel Perfect shpërndahet në një format portativ, i cili thjeshton më tej përvojën e përdoruesit. Nuk ka nevojë të shqetësoheni për instalimin, thjesht zhbllokoni arkivin e shkarkuar dhe ekzekutoni skedarin e ekzekutueshëm. Shikuesi identifikon kërkesa të parëndësishme për pajisjet kompjuterike dhe Versionet e Windows i cili nuk është i instaluar prej tij.

Rezultatet

• mungesa e një ndërfaqeje të rusifikuar;
• shpërndarë në formatin portativ;
• kompleti i veglave të programit bazohet në kryerjen e një funksioni - shfaqjen skedarë grafikë;
• demonstrimi i të dhënave teknike gjatë shikimit të një imazhi;
• softuer ka pushuar së mbështeturi nga zhvilluesit.

Do filloj nga larg. Kohët e fundit u bashkova me Akademinë HTML si mentor. Përveç faktit se mentorimi ndihmon në organizimin e njohurive tuaja, çuditërisht stimulon zhvillimin e gjërave të ndryshme të dobishme, sepse në proces lindin probleme interesante, zgjidhja e të cilave mund të automatizohet me lehtësi.

Studentët marrin një dizajn mësimor prej tre faqesh, secila me paraqitje për tre gjendje: celular, tabletë dhe desktop - nëntë paraqitje në total. Në procesin e krijimit të një faqeje të përgjegjshme, ka kuptim të ndryshoni periodikisht madhësinë e dritares dhe të kontrolloni që, për shembull, versioni celular të mos prishet kur shtoni stile për versionin e desktopit. Cila është mënyra më e mirë për të kontrolluar përputhshmërinë e paraqitjes?

Pamjet e ekranit, të cilat përdoren në projekte të mëdha, janë shumë të rënda për një detyrë të tillë, keni nevojë për diçka shumë të thjeshtë në mënyrë që çdo fillestar ta përdorë atë.

Para së gjithash, natyrisht, u kujtova shtojcën Pixel Perfect (të paktën ka një për Chrome dhe Firefox), por nuk funksionon për një numër arsyesh. Për shembull, paraqitjet e ngarkuara nuk dinë të ndryshojnë kur ndërroni faqe dhe kur ndryshoni dritaren e shfletuesit, dhe ndërrimi i tyre çdo herë me duart tuaja do të mërzitet shumë shpejt. Për më tepër, ka pyetje mediatike që mund të ndryshojnë në mënyrë të përsosur paraqitjet për ne.

Zgjidhja ime e parë dukej kështu:

Ky kod futet në çdo faqe. Në të, vendosen shprehjet e nevojshme të medias dhe lidhjet me imazhet ndryshojnë në paraqitjet aktuale për secilën faqe specifike.

Paraqitjet ndryshojnë kur kaloni midis faqeve dhe kur ndryshoni madhësinë e dritares, kjo tashmë është e përdorshme dhe është mjaft e përshtatshme. Paraqitjet janë të vendosura drejtpërdrejt nën shënimin, nuk keni nevojë të shkoni pas tyre gjatë gjithë kohës. redaktues grafik prandaj, edhe një dizajn kaq i thjeshtë mund të kursejë ndjeshëm kohën.

Por ndërsa stilet shkruhen, sfondet dhe fotografitë e tyre shfaqen në faqe, dhe paraqitjet në shtresën e poshtme bëhen të padukshme. Si të jesh?

Zgjidhja ime tjetër ishte një shtesë për Chrome, e cila krijon një shtresë gjysmë transparente me paraqitje në secilën faqe. Kur madhësia e dritares ndryshon, paraqitjet ndryshojnë duke përdorur pyetjet e mediave si në rastin e mëparshëm. Si bonus, ne shtuam kontrollin mbi transparencën e shtresës së paraqitjes dhe aftësinë për të aktivizuar modalitetin e përzierjes së diferencës për ta bërë më të lehtë gjetjen e dallimeve.

Doli të ishte një gjë e mrekullueshme. Por funksionon vetëm në Chrome, pikat kryesore për ndërrimin e paraqitjeve dhe rrugëve në fotografi duhet të vendosen në konfigurimet e vetë shtesës, fotografitë e paraqitjeve duhet të jenë brenda shtesës, dhe kishte të gjitha llojet e kufizimeve të tjera. Në përgjithësi, nuk është universale, për çdo projekt të ri që do t'ju nevojitet vendosja manuale dhe kjo nuk është aspak e mirë për fillestarët.

Doja të gjeja një zgjidhje shumë, shumë të thjeshtë, në mënyrë që çdokush të përballonte konfigurimin dhe instalimin, dhe që në të njëjtën kohë ai të paktën të kuptonte afërsisht atë që po bënte.

Për të krahasuar shënimin me paraqitjet, keni nevojë për dy shtresa: shtresa e shënimit dhe shtresa e paraqitjeve. Nga njëra anë, ju mund të futni manualisht një shtresë me paraqitje në paraqitjen e faqeve, nga ana tjetër, ekziston një rrezik i madh për ta harruar atë atje kur nuk është më e nevojshme, kështu që opsioni tjetër ishte përdorimi i elementeve ekzistues të faqes si shtresat.

Nëse paraqitjet janë vendosur si sfond për , kur ndryshon transparencën paraqitjet gjithashtu do të bëhen gjysmë transparente, kështu që është më mirë të përdorni elementin si një shtresë me paraqitjet :

Ashtu si në rastin e mëparshëm, paraqitjet do të qëndrojnë nën shënimin, por tani nëse sfondi është vendosur, ato nuk do të jenë të dukshme. Bëni shtresën e shënjimit gjysmë transparente duke shtuar opacitet për :

Kjo gjithashtu mund të përdoret disi, por në këtë zgjidhje më mungonte një kontroll i përshtatshëm mbi transparencën, kështu që shkrova një skenar të vogël që shton një panel të tillë në faqe:

Kjo ju lejon të kontrolloni transparencën (në këtë rast, në vend të paraqitjeve, vetëm një sfond me shirita), mund të tërhiqet zvarrë nëpër faqe dhe mund të fiket nëse nuk është e nevojshme.

Vendosa të mos bëj një shtesë të shfletuesit, në mënyrë që të mos kufizoj numrin e shfletuesve në të cilët mund të përdoret.

Si rezultat, instalimi duket kështu:

1. Instaloni paketën në dosjen e projektit përmes npm: npm dhe pixel-glass --save-dev
2. Vendosni fotografi me paraqitje në projektin tuaj në dosjen img (ose në një dosje tjetër me fotografi brenda projektit).
3. Fut në kodi i faqes si ky: Ndryshojeni atë për t'iu përshtatur projektit tuaj: vendosni shprehjet e mediave, ndryshoni adresat e fotografive në ato të punës.
4. Rifreskoni faqen dhe përdorni atë.

Sipas mendimit tim, doli të ishte një mjet mjaft i përshtatshëm, por me siguri diçka mund të përmirësohet. Nëse keni ndonjë ide mbi këtë temë, më shkruani për to në komente. Unë gjithashtu do të jem i interesuar se si i zgjidhni problemet e tilla dhe cilat mjete përdorni për këtë.

UPD: biblioteka u zhvendos në npm, falë të gjithë kontribuesve