Graficele web se mută din ce în ce mai mult de la transformări cu pierderi de calitate. Nu vrem ca schimbările în design sau grafică să dăuneze materialului sursă. Astfel, dacă trebuie să răsturnăm modificările sau să schimbăm altceva, originalul va fi păstrat.
Ce sunt modurile de amestecare?
Din punct de vedere tehnic, suprapunerea culorilor aplică operații matematice componentelor de culoare ale fiecărui pixel al imaginii. Da, da, în inima acestei bunătăți pentru creativitate este matematica! Nu vă faceți griji, de a memora formule pentru modurile de amestecare nu trebuie, dar, cu toate acestea, o înțelegere de bază a mecanismului de impunere a muncii este utilă.
W3C recomandă 15 noi moduri de amestecare. Sunt completate toate tipurile de informații despre funcționarea diferitelor moduri de suprapunere. și singurul mod corect de a utiliza fiecare dintre ele nu este. Să examinăm mai îndeaproape doar câteva dintre cele mai utile moduri. De aceea, cel mai adesea folosesc modurile suprapuse.
Efectul de transparență cu înmulțire (înmulțire)
Să începem cu înmulțirea. Formula matematică pentru acest regim poate fi prezentată după cum urmează:
Asta e tot. Multiplies literalmente stratul superior al culorii (e) la stratul inferior (b), pentru a obține culoarea finală (x), de aici numele de „multiplicare“
Dar cum se multiplică culorile? Funcționează astfel: pe ecranele computerului, culorile sunt construite folosind canale roșii, verzi și albastre. Fiecare canal primește o valoare de luminozitate - un număr care determină nivelul de strălucire a subpixelului corespunzător. Acum, după ce ai obținut numerele, poți recurge la matematică!
Când se utilizează modul multiplu, calculatorul ia valoarea luminozității canalului roșu pentru ambele straturi, le conduce la o scară de la 0 la 1 și le multiplă. Apoi face același lucru cu canalele verzi și albastre. După ce a primit toate rezultatele, se conectează aceste canale la culoarea finală.
Acest lucru este desigur mare, dar care este efectul practic?
Două straturi fără suprapunere.
Două straturi care utilizează modul de amestecare se multiplă
După înmulțire, pixelii negri din stratul superior sunt afișați în toată gloria lor: negru. Și pixelii albi nu sunt vizibili deloc. Ele sunt complet transparente. Nuanțele intermediare de gri în jurul marginilor literelor ascund stratul de mai jos. Și obținem granițe plăcute, fără efort, cu un efort minim. Este ca și cum grafica ar fi fost inițial cu un fundal transparent.
Acest truc funcționează numai cu figuri negre. Dacă sursa are o culoare, atunci rezultatul va fi într-o anumită măsură colorată. Cu toate acestea, dacă cifrele sunt albe, puteți utiliza ecranul de suprapunere a ecranului.
Praf și zgârieturi în modul ecran (ecran)
Opțiunea funcțională opusă multiplicării este "Ecranul". Așteptați un minut, dacă acest lucru este opus modului "Înmulțire", de ce nu se numește "diviziune"? Din nou, răspunsul constă în matematică:
Aceasta nu este numită "diviziune", pentru că de fapt facem chiar mai mult înmulțire! Aici înmulțim valoarea inversată a unui b inversat. și apoi inversați rezultatul. Ca urmare, pixelii albi ai stratului superior devin complet opaci și pixelii negri devin transparenți. Fiecare nuanță intermediară luminează acum stratul de mai jos.
În exemplul următor, am vrut să arate ca o fotografie veche, așa că a luat o scanare de praf și zgârieturi, și a pus-o cu „ecran“. De asemenea, am decis să folosesc acest mod de amestecare pentru desaturarea fotografiei cu o culoare palidă de liliac pentru efect.
Suprapunere cu un strat de praf și zgârieturi (disponibil pe "Spoon Graphics") și un strat de liliac palid.
Imagine cu două straturi, în care stratul suprapus este aplicat stratului superior
Apropo, în unele aplicații există un mod de divizare, dar nu este în specificația W3C. (Nu mă deranjează prea mult despre asta, pentru că nu aveam nevoie de acest mod.)
Adăugarea de culori cu nuanță și culoare
Toate modurile suprapuse au capacitatea de a schimba culoarea graficii, dar două dintre ele sunt utile în special pentru adăugarea unei culori: nuanță și mod cu o culoare de nume foarte potrivită.
Acest mod de amestecare are o componentă de nuanță din stratul suprapus și o aplică la culorile de mai jos, fără a afecta saturația și luminozitatea. Pot suprapune straturi cu culori diferite, obținând același rezultat atâta timp cât se potrivesc valorile lor de nuanță. În cazul imaginii de mai jos, toate cele trei nuanțe de maro sunt setate la 26 de grade, dar fotografia arată la fel, indiferent de ce umbră este suprapusă.
Acest mod de amestecare afectează nuanța și saturația pixelilor originali, dar ignoră luminozitatea. Suprapus peste un strat de culoare brun-roșcat nu numai a face pixelii originale roșu-brun, așa cum a fost cazul cu modul de culoare, dar, de asemenea, să le dea aceeași saturația, care dă de obicei un efect tonifiant mai expresiv decat nuanta.
Suprapusă peste stratul de culoare roșiatică-roșie nu va face doar pixelii originali roșiatic-maroniu, ca în cazul modului nuant. dar, de asemenea, le dau aceeași saturație.
Același efect poate fi obținut prin schimbarea ordinii straturilor, plasarea culorii sub fotografie și aplicarea fotografiei utilizând modul de luminozitate.
Cross over-browser
Cu aceste moduri de suprapunere, puteți aplica acum efecte CSS pe CSS la fel ca și în Photoshop. Dar, deși toate browserele folosesc aceeași matematică, rezultatele sunt uneori considerabil diferite.
În plus, nu este vorba doar de browsere incompatibile. Oamenii sunt incompatibili! Luați, de exemplu, milioane de oameni cu colorblindness. Acești oameni văd probabil proiectele dvs. în mod diferit decât v-ați așteptat. Ca întotdeauna, testați-vă creațiile în browserele corespunzătoare, verificați disponibilitatea și nu vă așteptați ca proiectele dvs. să arate la fel peste tot!
Și, desigur, testați dispozitivele reale pentru a înțelege modul în care limitele hardware (de exemplu, RAM mici) vor afecta site-ul. Cu unele moduri de suprapunere, defilarea poate fi oprită. Dacă aveți nevoie de o netedă ideală cu 60 de cadre pe secundă, este posibil ca unele opțiuni să nu vă fie potrivite.
Aplicarea modurilor suprapuse
Pentru modurile de suprapunere în CSS există câteva proprietăți diferite: mod de fundal-blend-mode și mix-blend-mode. De asemenea, a treia proprietate poate fi utilă: izolarea.
Imagini de fundal suprapuse
Încercați să puneți praf și zgârieturi pe fotografia noastră. (Rețineți că exemplele indică numai codul relevant)
Uneori este posibil să aveți nevoie să o colorați. Din păcate, CSS-proprietate de fundal de culoare ne limitează la o singură culoare, și este întotdeauna stratul de jos, indiferent dacă a anunțat culoare de fundal la începutul sau la sfârșitul listei. specificație W3C ofera imagini notația (), permite dezvoltatorilor să „utilizeze o culoare solidă ca imagine“, dar browserele de sprijin necesare încă. Din fericire, din moment ce gradientele din CSS sunt un fel de imagini, puteți să-i păcăliți pe browser pentru a genera o culoare solidă specificând o tranziție de la culoarea la aceeași culoare.
Acum vom lumina imaginea, așa cum am făcut-o mai înainte, și vom da o nuanță de maro (sepia).
Elemente HTML suprapuse
mix-blend-mode combină elementele HTML suprapuse, astfel încât elementele din straturile suprapuse sunt amestecate cu straturile inferioare. Să reîntoarcem titlul înapoi la imagine și să "dizolvăm" fundalul alb nedorit cu ajutorul multiplicării. Am făcut și imaginea ușor transparentă, oferindu-i un efect de timbru frumos pe imagine.
Iată un nou exemplu de utilizare a mix-mode-blend pentru a amesteca mai multe elemente.
Utilizați mix-blend-mode pentru a amesteca mai multe elemente.
Dacă doriți ca un element din stratul inferior să se amestece cu un anumit strat de mai sus, îl puteți separa cu a treia proprietate: izolare. Acest lucru este util atunci când aveți nevoie să suprapuneți un element pe altul. fără a atinge stratul de bază. Proprietatea mix-blend-mode a fiecărui disc este setată pe ecran. care îi ordonă să creeze noi culori în locurile în care se intersectează. Cu toate acestea, trebuie să izolam imaginea muntelui, să nu lăsăm amestecul cu restul florilor.
Folosind proprietatea de izolare pentru a preveni amestecarea elementului din stratul inferior cu straturile de mai sus.
Când am construit acest lucru cu HTML și CSS, mă așteptam să văd următoarele:
Dar ca rezultat, suprapunerea este aplicată pe container împreună cu întregul său conținut, după cum se arată mai jos.
Ca și opacitatea. problema cu care este rezolvată într-o oarecare măsură datorită canalelor alfa ale fundalului, și aici putem rezolva problema cu mix-mix-mode. după ce a atribuit lucrarea principală în fundal. Efectul dorit poate fi obținut dacă transformați un desen dintr-o matriță într-un fundal utilizând imaginea de fundal. în loc să faceți separat un zar și să îl suprapuneți cu un amestec de amestecuri. Acesta nu este un panaceu pentru toate cazurile, dar merită încercat. Mai mult, nu mai există nici o modalitate de a izola elementele copilului de părinte cu amestecare.
Suport pentru browser
Modurile suprapuse sunt acceptate în majoritatea browserelor moderne, cu excepția Internet Explorer și Edge. Dar nu dispera, toate aceste proprietăți pe care Microsoft le pune pe listă "pentru examinare" pentru Edge, iar acest browser suportă deja toate aceste moduri de suprapunere în SVG, deci există speranță pentru o implementare iminentă. De asemenea, nu este rău să voteze aceste proprietăți pe forumul dezvoltatorilor Microsoft Edge "Uservoice".
Rețineți că Safari 9 nu acceptă modurile de suprapunere de nuanță. saturație. luminozitatea și culoarea.
Rețineți că browserele care nu acceptă modurile de amestecare nu vor afișa proiectele dvs. conform planificării. Dacă nu sunteți sigur că audiența dvs. lucrează cu tehnologii avansate de browser, este mai bine să nu riscați. Întrebați-vă dacă opțiunile de rezervă sunt acceptabile pentru un anumit public. Dacă nu, căutați o soluție.
În ciuda acestor avertismente, modurile de amestecare completează perfect arsenalul instrumentelor oricărui dezvoltator. Acum puteți adăuga transparență, saturație și textura cu ajutorul CSS, făcându-l flexibil și fără a sacrifica materialul sursă. Acesta este un plus excelent în browser și în mâinile noastre.
P.S. Și asta poate fi interesant:
Au trecut mai puțin de șase luni de la ultima schimbare a fluxului de lucru al W3C, deoarece conducerea consorțiului a primit o propunere pentru a aplica în cele din urmă acest nou proces. Și să scrieți specificațiile HTML irelevante în muzeu, astfel încât să nu confundă dezvoltatorii, "pretinzând" că sunt relevanți.
Un alt modul CSS, despre care am vorbit, a ajuns într-un mod imperceptibil la starea cu care W3C sfătuiește să înceapă utilizarea zilnică a produselor noi. Proprietatea conține vă permite să restricționați modificările la arborele de randare, să redenumiți casetele CSS și să le redimensionați în interiorul elementului. Prin urmare, este atât de important ...
MAI MULT
Din Paris (în fotografie), unde a avut loc recent întâlnirea grupului de lucru CSS, au apărut știri interesante: proprietățile din grilă și decalajul dintre grilă și coloană, precum și diferența dintre ele ...