Share
Am creat un ghid complet care să vă ajute să învățați CSS, indiferent dacă începeți doar cu elementele de bază sau doriți să explorați CSS mai avansat.
S-ar putea să fiți familiarizat cu "modurile de amestecare" dacă sunteți un utilizator Photoshop; acestea vă permit să combinați straturile în moduri diferite și sunt foarte distractive pentru a vă juca. Modurile de îmbinare în CSS nu sunt însă acceptate universal, dar sunt cu siguranță pe drum.
În acest tutorial, vom afla modul în care funcționează modurile de amestecare și diferitele moduri în care puteți implementa modurile de amestecare utilizând CSS.
Dacă nu ați întâlnit niciodată moduri de amestecare, modul în care funcționează poate părea un pic greu. Să-l rupem.
Modelele de amestecare au fost disponibile în software-ul de proiectare de ani de zile, dar conceptul de moduri de amestecare a fost de fapt folosit pentru mult mai mult timp, chiar înainte de inventarea computerelor.
Partea "amestecare" din moduri de amestecare se referă la luarea a două culori și combinarea lor într-un fel pentru a face o singură culoare. Mai exact, luăm două hărți pixel și le amestecăm împreună.
Cum că amestecarea are loc este partea "mode" a moduri de amestecare. Cum interacționează aceste culori? Deoarece lucrăm cu spațiul digital, putem lua orice formulă matematică și aplicăm-o la cele două intrări pentru a obține o ieșire.
O imagine netratată a unei meduze
Același meduze cu un strat solid portocaliu ("sursa" noastră) au fost plasate peste el
Iată stratul sursă cu modul de amestecare "ecran" aplicatDacă simțiți într-adevăr ambițios, aruncați o privire prin documentul oficial de compoziție al W3C FX Task Force, care explică implementările matematice ale fiecărui mod de amestecare diferit. Aceasta demonstrează o formulă folosită mai mult pentru a calcula amestecarea.
Cm = B (Cb, Cs)
Accentsconagua
Cm este culoarea rezultată după amestecare. B se referă la funcția de amestecare. Cb variabila este culoarea de fundal. Cs variabila este culoarea sursă. Toate culorile se bazează pe o scală 0-1, care se hartă direct la o valoare rgb 0-255.
Există două categorii de moduri de amestecare. Primele sunt considerate "non-separabile", iar al doilea (fără surprindere) sunt considerate "separabile". Indiferent dacă un mod de amestecare este considerat separabil sau nu, este determinat de algoritmul de bază. Dacă algoritmul tratează în mod egal fiecare dintre canalele de culoare separate (roșu, verde și albastru), acesta este considerat ne-separabil. Dacă folosește fiecare dintre canalele de culoare în mod individual, este considerată separabilă.
Toate modurile de amestecare pot întoarce culori numai în intervalul de la 0 la 255. Orice dincolo de acest interval în orice direcție va fi tăiat în interval. Când vedeți suprafețe mari de alb sau negru pe o zonă amestecată, este posibil ca aceste zone să fie tăiate.
Modurile de amestecare CSS, acolo unde sunt acceptate, funcționează în două moduri diferite. Este apelat primul tip de mod de amestecare fundal-amestec-mode. Această proprietate vă permite să amestecați toate fundalul dintr-un element unul cu celălalt.
Dacă ați definit, de exemplu, mai multe imagini de fundal (acceptate în toate browserele dincolo de IE8), prima imagine de fundal va fi tratată ca stratul sursă, iar orice imagine adăugată ulterior va fi tratată ca stratul de fundal, situată dedesubt.
Adăugarea unei culori de fundal (care trebuie să fie ultima în listă) plasează un alt strat în partea de jos. Culoarea va fi tratată ca strat de fundal, iar imaginile ca straturi sursă. Luați următoarea regulă de stil, de exemplu:
div (fundal: url (img / pattern.png), url (img / jellyfish.jpg), # f07e32;
Asta ne dă:
Și apoi putem adăuga moduri de amestec în mix:
div (fundal: url (img / pattern.png), url (img / jellyfish.jpg), # f07e32; mod de fundal-amestec: ecran;
Iată două divizii care utilizează aceste stiluri, una fără modul de amestecare, al doilea cu:
Un tip de mod de amestecare secundar, mix-amestec-mode, permite combinarea elementelor independente. Speculația este mai specifică cu privire la implementare, dar amestecul are loc în "contexte de stivuire".
Asta se întâmplă atunci când o folosim mix-amestec-mode, încercarea de a obține imaginea de fundal și culoarea din același element pentru a se amesteca (foarte puțin):
.elementul meu suprapus background-color: # f07e32; fundal-imagine: url (img / jellyfish.jpg); // Notă: această imagine nu va fi amestecată cu culoarea de fundal. mix-blend-mode: color-dodge;
Mai jos, puteți găsi o demonstrație interactivă pentru a explora efectele unui anumit mod de amestecare.
Să aruncăm o privire asupra modurilor de amestecare disponibile, examinând formula folosită și aplicându-le fiecărui cerc roșu plasat deasupra meduzei noastre.
Nu a fost aplicat niciun mod de amestecareB (Cb, Cs) = 1 - [(1-Cb) x (1-Cs)]
Ecranul este denumit după conceptul de proiectare a mai multor expuneri de fotografii în același timp pe un singur ecran. Culoarea rezultată este cel puțin la fel de ușoară ca oricare dintre straturile amestecate.
Modul de amestecare a ecranuluiB (Cb, Cs) = min (Cb, Cs)
Selectează cea mai întunecată dintre cele două culori.
Modul de amestecare în modul DarkenB (Cb, Cs) = max (Cb, Cs)
Selectează bricheta celor două culori.
Modul de amestecare ușoarădacă (Cb == 0) B (Cb, Cs) = 0 altfel dacă (Cs == 1) B (Cb, Cs) = 1 alt B (Cb, Cs) )
Color dodge luminează culoarea de fundal pentru a reflecta culoarea sursă.
Modul de combinare a culorilordacă (Cb == 1) B (Cb, Cs) = 1 altfel dacă (Cs == 0) B (Cb, Cs) = 0 altceva B (Cb, Cs) / Cs)
Arderea culorilor întunecă culoarea de fundal, mărind contrastul dintre sursă și fundal.
Color combină modul de ardereîn cazul în care (Cs <= 0.5) B(Cb, Cs) = Multiply(Cb, 2 x Cs) else B(Cb, Cs) = Screen(Cb, 2 x Cs -1)
Aplică "multiplica" pe culori mai deschise și "ecran" pe culori mai întunecate. În esență, "lumina greu" este opusul "suprapunerii", la care ne vom uita în continuare.
Mod de amestecare ușoarăB (Cb, Cs) = HardLight (Cs, Cb)
Aplică "ecran" pe culori mai deschise și "se înmulțește" pe culori mai întunecate; scrise la fel ca "lumina greu", cu excepția cu argumentele pentru funcția inversată.
Modul de amestecare suprapusîn cazul în care (Cs <= 0.5) B(Cb, Cs) = Cb - (1 - 2 x Cs) x Cb x (1 - Cb) else B(Cb, Cs) = Cb + (2 x Cs - 1) x (D(Cb) - Cb) with if(Cb <= 0.25) D(Cb) = ((16 * Cb - 12) x Cb + 4) x Cb else D(Cb) = sqrt(Cb)
Acest mod de amestecare aplică o variantă de "multiplicare" pe valorile întunecate și o variantă a "ecranului" pe valori mai ușoare (similare ecranului).
În acest algoritm, vedem o funcție secundară D care este setat în cu clauză bazată pe valoarea albastră prezentă în culoare. Rezultatul final este de obicei un efect mult mai moale decât "suprapunerea".
Modul de amestecare a luminiiB (Cb, Cs) = Cb - Cs |
Diferența ia valoarea diferenței absolute dintre cele două culori, ceea ce are efectul unei fotografii negative.
Mod de amestecare diferențialăB (Cb, Cs) = Cb + Cs - 2 x Cb x Cs
Modul de excludere are același efect de bază ca și modul "diferență", cu excepția faptului că culorile similare generează o valoare medie inferioară a contrastului (mai degrabă decât o valoare mai închisă).
Modul de amestec exclusivModurile de amestecare "separabile" utilizează câteva funcții suplimentare, inclusiv a ClipColor funcţie, SetLum funcția și Sat funcţie.
Notă importantă: Nici o versiune de Safari nu acceptă modurile de amestecare "nuanță", "saturație", "culoare" sau "luminozitate" cu mix-amestec-mode sau fundal-amestec-mode.
ClipColor (C) l = Lum (C) n = min (Cred, Cgreen, Cblue) < 0.0 Cred = l + (((Cred - l) * l) / (l - n)) Cgreen = l + (((Cgreen - l) * l) / (l - n)) Cblue = l + (((Cblue - l) * l) / (l - n)) if x > (1 - 1)) / (x - 1)) Cgreen = 1 + ((Cgreen - 1) * (1 - ) Cblue = l + (((Cblue - l) * (1 - 1)) / (x - l)) retur C SetLum (C, l) + d Cblue = Cblue + d retur ClipColor (C) Sat (C) = max (Cred, Cgreen, Cblue) - min (Cred, Cgreen, Cblue)
Rețineți min, la mijlocul, și max funcțiile utilitare se referă la valorile minime, medii și maxime. (Mid este nu media celor trei valori.) Valorile CRED, Cgreen, și Cblue se referă la valorile roșu, verde și albastru prezente în culori C.
Cu aceste definiții, ne putem uita acum la modurile de amestecare care nu pot fi separate.
B (Cb, Cs) = SetLum (SetSat (Cs, Sat (Cb)), Lum (Cb))
Acest mod aplică nuanța stratului sursă la luminozitatea și saturația culorii de fundal.
Modul de amestecare HueB (Cb, Cs) = SetLum (SetSat (Cb, Sat (Cs)), Lum (Cb)
Acest mod are același mod ca și modul "nuanță", dar aplică în schimb saturația prim-planului la nuanța și luminanța fundalului.
Mod amestec de saturațieB (Cb, Cs) = SetLum (Cs, Lum (Cb))
Aplică nuanța și saturația primului ecran la luminanța fundalului.
Modul de amestecare a culorilorB (Cb, Cs) = SetLum (Cb, Lum (Cs))
Acest mod aplică luminozitatea stratului sursă cu nuanța și saturația stratului de fundal.
Modul de amestecare a luminozitățiiModurile de amestecare în CSS oferă flexibilitate nouă și interesantă pentru design și experiențe estetice unice. Înțelegerea matematicii și a teoriei culorii care se aplică fiecărui mod de amestecare disponibil vă oferă un set de instrumente mai cuprinzător.
Ce veți face pe măsură ce browserele continuă să adauge suport pentru modurile de amestecare?
