15 Moduri de suprapunere cu css (moduri de amestecare css), care vă vor oferi o siguranță nouă imaginilor

Una dintre cele mai apreciate caracteristici ale Photoshop-ului, probabil o caracteristică care vă permite să vă depășiți concurenții - acestea sunt modurile suprapuse. Modurile de amestecare necesită doi pixeli situați unul peste celălalt și combinându-i în moduri diferite, de exemplu, modul de blocare va emite pur și simplu cel mai întunecat dintre cei doi pixeli întunecați. Când sunt distribuite pe o întreagă imagine, modurile de amestecare pot produce unele efecte uimitoare.







Deși Adobe Photoshop nu a inventat modurile de suprapunere, implementarea sa este cu siguranță cea mai imită. Dar acum, nu aveți nevoie de Photoshop pentru a vă stiliza imaginea în acest fel, deoarece putem face totul în zbor folosind CSS3.







Se îmbunătățește suportul pentru browser pentru proprietatea modului "background-blend-mode". Versiunile anterioare ale browserelor au necesitat un prefix specific și / sau activarea funcțiilor experimentale. Dar site-ul caniuse.com ne spune că deja acceptă versiunile curente de Chrome, Firefox, Opera și Safari. Până în prezent, nu există semne de susținere din partea IE, dar deoarece aceasta este o îmbunătățire progresivă, putem începe să o folosim.

Există mai multe variante ale modului suprapus în recomandările candidaților CSS3, dar cel mai util pentru scopurile noastre este modul de amestecare în fundal. Această proprietate vă permite să amestecați două imagini sau imagini și culoarea de fundal.

Iată codul care este necesar:







Trimiteți-le prietenilor: