Editarea imaginilor în CSS Moduri de amestecare

În tutorialul anterior al acestei serii am discutat cum să folosim filtrele CSS pentru a edita imagini. În timp ce filtrele pot produce rezultate excelente, acestea sunt limitate la doar un singur strat.

Să presupunem că aveți o imagine și doriți să o suprapuneți cu culoarea roșie. Nu poți face asta cu filtre. Cu toate acestea, modurile de amestecare sunt perfecte pentru această activitate. Acestea sunt de fapt menite să ia valorile primului și fundalul culorilor, să efectueze unele calcule și apoi să returneze o culoare finală. Imaginea finală pe care o obțineți este rezultatul tuturor acestor calcule pe fiecare pixel suprapus.

Modurile de amestecare vă permit să amestecați nu numai imaginile și culorile, ci și textul și imaginile. În acest tutorial, voi arăta cum să folosiți modurile de amestecare pentru a manipula imaginile și pentru a crea anumite efecte reci.

Modurile de amestecare disponibile

• Normal: În acest mod, culoarea finală va fi culoarea de sus. Valoarea culorii de fund nu va avea niciun efect asupra rezultatului final.
• Multiplica: În acest mod, culorile de sus și de jos se înmulțesc pentru a obține culoarea finală. Culoarea rezultată va fi întotdeauna cel puțin la fel de întunecată ca oricare dintre constituenți. Aceasta înseamnă că, cu un strat negru, rezultatul final va fi întotdeauna negru. Utilizarea unui strat alb nu va avea nici un efect asupra rezultatului final.
• Ecran: În acest mod, culoarea finală este obținută prin inversarea culorilor de sus și de jos, înmulțirea acestora și apoi inversarea rezultatului. Culoarea finală va fi întotdeauna la fel de ușoară ca culoarea de sus sau de jos. Aceasta implică faptul că folosirea unui strat alb va transforma totul în alb și un strat negru nu va avea niciun efect asupra rezultatului final.
• Acoperire: În acest mod, culoarea finală se obține fie prin înmulțirea, fie prin ecranarea culorilor originale pe baza culorii de fund. Dacă culoarea de fund este mai închisă, culorile originale se înmulțesc și, dacă este mai ușoară, sunt ecranate. Culorile și umbrele culorii de fund sunt păstrate în acest mod.
• Întuneca: Aceasta este destul de bază. Culoarea finală în acest mod este culoarea mai închisă dintre straturile de sus și de jos.
• Uşura: Acesta este inversul întunecării, iar culoarea finală este, prin urmare, culoarea mai deschisă între straturile de sus și de jos.
• Culoare-Dodge: În acest mod, culoarea de fund este împărțită de inversul culorii de sus pentru a obține valoarea finală. Nu veți vedea nicio modificare cu un fundal negru în acest mod. Dacă culoarea de sus este inversă a culorii de jos, culoarea finală va fi o versiune complet luminată a culorii de top.
• Culoare-arde: Culoarea finală în acest mod este produsă prin împărțirea inversă a culorii de fund cu valoarea culorii de sus și inversarea valorii rezultante. Dacă culoarea de sus este albă, nu veți vedea modificări. O culoare de top care este inversă a culorii de jos va duce la o imagine complet negru.
• Lumină tare: Modul luminos dur este inversul modului suprapus. În acest caz, dacă culoarea de sus este mai închisă, culorile originale se înmulțesc și, dacă este mai ușoară, sunt ecranate. Este practic modul de suprapunere cu straturile schimbate.
• Lumina slaba: Acest mod este la fel de greu, dar produce rezultate finale mai moi.
• Diferență: Acest mod scade valoarea culorii mai întunecate de culoarea mai deschisă pentru a obține valoarea finală. Aceasta înseamnă că negrul de culoare nu va avea efect, în timp ce albul va inversa culoarea celuilalt strat.
• Excludere: Acest mod de amestecare este similar cu diferența, dar rezultatul final are un contrast mai scăzut.
• Nuanţă: Acest mod de amestecare utilizează nuanța culorii de sus și saturația și luminozitatea culorii de fund pentru a crea culoarea finală.
• Saturare: În acest mod, culoarea finală are saturația culorii de sus și nuanța și luminozitatea culorii de jos.
• Culoare: Acest mod de amestecare produce o culoare finală cu nuanța și saturația culorii de sus și luminozitatea culorii de jos. Acest mod păstrează nivelele gri ale culorii de fund și poate fi folosit pentru a nuanța imaginilor colorate.
• Luminozitate: Culoarea finală din acest mod are luminozitatea culorii de top, în timp ce valorile nuanței și saturației provin din culoarea de jos. Este la fel ca în modul de culoare, dar cu straturile schimbate.

În plus, există două modalități de utilizare a modurilor de amestecare. Puteți utiliza funcția mix-amestec-mode, care determină modul în care conținutul elementului se amestecă cu conținutul elementului de sub acesta, precum și cu fundalul elementului. fundal-amestec-mode, pe de altă parte, determină modul în care imaginile de fundal ale unui element se amestecă între ele și cu culoarea de fond a elementului.

Puteți juca cu această demonstrație pentru a vedea cum interacționează diferite imagini și culori pe baza modurilor de amestecare aplicate. De asemenea, am atașat o imagine de mai jos, care arată amestecul de culoare galbenă cu imaginea sursă.

Crearea de frontiere neregulate

În timp ce imaginile sunt, în general, dreptunghiulare, imaginile cu granițe neregulate pot să le facă vizuale mai atractive și să le dea un înțeles complet diferit. Luați în considerare această imagine a unui vultur chel, amestecat cu harta Statelor Unite. Semnează valorile americane reprezentate de vulturul chel. De asemenea, puteți combina alte imagini într-un mod similar.

Aici am combinat două imagini în așa fel încât rezultatul final să aibă forma primei imagini și culorile celei de-a doua imagini. Care dintre modurile de amestecare credeți că pot realiza acest efect? 

Un indiciu aici este că harta este alb-negru. Deci, oricare dintre modurile de amestecare pe care le decidem să le folosim, trebuie să ascundem toată porțiunea deasupra părții albe și să arătăm toată porțiunea deasupra părții negre. Modul de amestecare ușoară face acest lucru perfect. Deoarece culoarea albă este mai ușoară în comparație cu culorile vulturului, aceasta ascunde vulturul ori de câte ori se extinde dincolo de harta Statelor Unite. 

Ar trebui să încercați să ghiciți celălalt mod de amestecare care poate face acest efect ca un exercițiu. Puteți încerca diferite moduri de amestecare în acest demo de vultur pentru a vedea dacă ați ghicit modul de amestecare corect. 

Amestecarea Gradiente colorate

Credeți sau nu, imaginea colorată de mai jos este rezultatul unor gradiente alese cu grijă și moduri de amestecare. Puteți să treceți deasupra imaginii pentru a vedea versiunea originală.

Dacă doriți să recreați acest efect, va trebui să începeți cu o imagine care are fundal întunecat pentru rezultate optime. Apoi, decideți culorile pe care doriți să le amestecați și creați un gradient liniar cu toate aceste culori. Puteți adăuga opțional mai multe gradienți la unghiuri diferite. În final, setați primul fundal-amestec-mode la luminozitate. CSS-ul dvs. final ar trebui să arate astfel:

div (gradient liniar) (dreapta, roșu, portocaliu, galben, verde, albastru, indigo , violet); mod de fundal-amestec: luminozitate, suprapunere; // Mai multe reguli CSS

Ar trebui să experimentați diferite moduri de amestecare și imagini în demo-ul original pentru a afla cea mai bună combinație a modurilor de amestecare pentru diferite tipuri de imagini.

Îmbinarea textului împreună

Modurile de amestecare nu se limitează la imagini. Puteți aplica moduri de amestecare și pe o bucată de text. În imaginea de mai jos, am aplicat un mod de amestecare tuturor caracterelor, precum și imaginii de fundal.

Caracterele folosesc mix-amestec-mode proprietății și a corpului fundal-amestec-mode. Aici este CSS relevant:

corp fundal: # D63 url ('image-url') no-repeat; fundal-blend-mode: multiplica; dimensiunea fundalului: capac;  h1 span mix-blend-mode: hard-light;  

Ca și în cazul demo-urilor anterioare, aș sugera să experimentați diferite moduri de amestecare și în acest demo.

Gândurile finale

Cu puțină imaginație, posibilitățile cu modurile de amestecare sunt nesfârșite. Sper că acest tutorial te-a învățat ceva util în ceea ce privește modurile de amestecare și editarea imaginilor. Continuați să practici și veți obține foarte bine la utilizarea diferitelor moduri de amestecare.

Dacă ați creat ceva interesant cu modurile de amestecare, vă rugăm să vă partajați munca în comentariile de mai jos.