Share
În ultimele două tutoriale din această serie, am discutat modul în care filtrele și modurile de amestecare pot schimba complet aspectul imaginilor. În acest tutorial, voi acoperi elementele de bază ale editării imaginilor utilizând ambele proprietăți împreună.
Orice editare de imagini non-primitivă necesită de obicei mai mult decât un singur element. Acest lucru poate fi realizat cu elemente pseudo. Din păcate, există o altă complicație. img elementul vine sub elementele înlocuite. Ca rezultat, :inainte de și :după nu va funcționa cu etichetele de imagine. Pentru a rezolva această problemă, vom avea nevoie de o învelire în jurul imaginii noastre și a imaginii figura tag-ul pare cel mai bun candidat în acest caz. Prin urmare, marcajul nostru ar trebui să arate astfel:
Toate efectele de editare pe care le vom crea vor avea câteva core comune CSS.
figura poziție: relativă; figura: înainte, cifra: după conținut: "; înălțime: 100%; lățime: 100%; 0; umplutura: 0;
Am folosit :inainte de și :după pseudo elemente, astfel încât să pot aplica diferite moduri de amestecare. Observați că am setat lăţime și înălţime la 100% pentru a acoperi figura corect, și am folosit poziția absolută pentru alinierea perfectă.
În majoritatea cazurilor, vom aplica filtrele pe imagini și folosind modurile de amestecare și alte efecte asupra elementelor pseudo. Imaginea de mai jos este imaginea originală pe care o vom edita.
Pentru a crea o imagine cu contrast ridicat, puteți seta doar contrastul la o valoare mai mare, dar creșterea luminozității face efectul mai dramatic. Dacă ai folosi doar filtre, atunci tot ce ai putea face. Cu toate acestea, cu modurile de amestecare puteți adăuga, de asemenea, o inserție cu umbră acoperire amestecând imaginea pentru rezultate mai bune. Aici este CSS pentru acest efect:
img filtru: contrast (1,8) luminozitate (1,5) tonuri de gri (1); figura: înainte de z-index: 3; mix-blend-mode: suprapunere; box-shadow: 0 0 200px negru inset;
Adăugarea unui index z păstrează pseudo-elementele noastre deasupra imaginii. Am folosit modul de amestecare suprapunere pentru a menține imaginea ușor întunecată după aplicarea umbrei în cutie.
Încercați să treceți deasupra imaginii de mai jos pentru a vedea diferența dintre filtre și o combinație de filtre și moduri de amestecare.
Pentru practică, puteți încerca diferite valori pentru box-shadow proprietate în demo CodePen.
Culoarea în majoritatea fotografiilor vechi în general se estompează și au o căptușeală exterioară maronie roșiatică. Pentru a recrea același efect, va trebui să folosim mai multe elemente și filtre. Aici este CSS-ul nostru:
img filtru: saturați (0,6); figura filtru: contrast (1.1) saturați (1.9) sepia (0.7) tonuri de gri (0.3); figura: înainte de z-index: 2; mix-blend-mode: multiplica; box-shadow: 0 0 250px maro inset; fundal: rgba (125, 100, 0, 0,3); cifră: după z-index: 3; mix-blend-mode: hard-light; box-shadow: 0 0 150px inserție roz; fundal: rgba (198, 155, 0, 0,3);
De data aceasta, am aplicat filtre atât pe imagine, cât și pe figură. Practic, vrem ca imaginea să fie mai puțin colorată. Acest lucru se realizează prin utilizarea filtrului de saturare cu o valoare mai mică decât 1. Filtrele cu cifre sunt aplicate după ce au fost amestecate. Dacă nu aplicați aceste filtre, rezultatul final va avea mai multe nuanțe proeminente de maro, ceea ce este nedorit.
Trebuie să rețineți că am aplicat, de asemenea, un fundal roșu semi-transparent pe ambele elemente pseudo. Aceasta oferă imaginile aspectul lor roșcat-maroniu. Cutia-umbra este folosită pentru a menține conturul comparativ mai maro.
Ar trebui să experimentați diferite proprietăți în demonstrație pentru a vedea dacă puteți obține rezultate mai bune.
De data aceasta vom încerca să dăm imaginii noastre o nuanță albastră. În comparație cu culorile calde, adăugarea unei nuanțe de culori reci, cum ar fi albastrul, face ca imaginile să fie ușor de înțeles.
Acesta este CSS pe care trebuie să-l aplicăm:
img filtru: contrast luminozitate (1,1) (1,3); figura: înainte de z-index: 2; mix-blend-mode: multiplica; box-shadow: 0 0 100px rgba (100, 150, 200, 1) inset, 0 0 300px rgba (100, 150, 200, 1) inset; cifră: după z-index: 3; mix-blend-mode: diferență; fundal: rgba (0, 0, 255, 0,3);
Începe prin a crește luminozitatea și contrastul imaginii noastre. Acest lucru va face ca imaginea noastră să nu piardă culori mai puțin proeminente și să devină prea plictisitoare în timpul editării.
În general, trebuie să utilizați mai multe box-shadows cu culori mai ușoare pentru modificări vizibile. De aceea adaug două albăstrui box-shadowla imaginea noastră. Doar folosind box-shadow restricționează umbră albastră la limita imaginii noastre. Pentru a răspândi culoarea albastră peste imaginea noastră, o folosesc ca fundal pe :după pseudo element. Iată rezultatul final al tuturor acestor filtre:
Încercați să adăugați o nuanță verde sau roșie imaginii în demo.
Ați văzut vreodată o seară ușor tulbure cu particule de nisip suspendate în atmosferă din cauza vântului? În acele condiții meteorologice, totul are o nuanță gălbuie, iar obiectele par a fi puțin plictisitoare. Pentru a recrea același efect, avem nevoie de următorul CSS:
img filtru: saturate (0,2); figura filtru: contrast (1,8) luminozitate (1,1) saturați (1,5); figura: înainte de z-index: 2; mix-blend-mode: multiplica; box-shadow: 0 0 100px rgba (0,0,0,0,5) inset; fundal: rgba (125, 100, 0, 0,3); cifră: după z-index: 3; mix-blend-mode: hard-light; box-shadow: 0 0 500px rgba (0,0,0,0,6) inset; fundal: rgba (198, 155, 0, 0,3);
Primul lucru pe care îl fac este să reduc saturația imaginii. Amandoua :inainte de și :după elementele pseudo au fundaluri translucide gălbui pentru a adăuga nuanța dorită. Utilizarea lumină tare amestecați modul :după face ca ceață să fie mai proeminentă.
box-shadow pe pseudo elemente crește concentrarea asupra motociclistului. În cele din urmă, aplicarea înaltă contrast, strălucire și saturare filtrează la noi figura elementul întărește opacitatea.
În demonstrație, puteți încerca diferite valori pentru diferite proprietăți pentru a vedea cum afectează rezultatul final.
Nu este greu de editat imagini în CSS. Dacă păstrați în minte punctele pe care le-am discutat în acest tutorial, veți putea crea niște filtre uimitoare de-ale tale.
Pentru practică, puteți experimenta demonstrațiile din acest tutorial sau încercați să recreați filtrele populare Instagram. De asemenea, puteți verifica varietatea de animații și efecte disponibile pe piața Envato Marketplace, în cazul în care aveți nevoie de filtre gata de utilizare.
Accentsconagua
