Mintegy keverési módok a css titkok nélkül
Web grafika egyre inkább távol a transzformációk a minőség romlana. Nem akarjuk megváltoztatni a design vagy a grafikus ártott alapanyagból. Így, ha meg kell, hogy állítsa vissza a módosításokat, vagy változtatni valami mást, az eredeti megmarad.
Mi a keverési módok
Egy műszaki szempontból, szín egymásra vonatkozik matematikai művelet színösszetevőinek minden egyes pixel a kép. Igen, a szíve minden jó ez a kreativitás matematika! Ne aggódj, memorizálni képletek keverési módok nem kell, de mégis alapvető mechanizmusának megértéséhez impozáns munka hasznos.
W3C nem javasolja, hogy a 15 új blend módok. Mindenféle információt a különböző keverési módok teljes. és csak akkor használja a megfelelő verzióját mindegyikük ott. Vessünk egy közelebbi pillantást néhány a leghasznosabb módokat. Ez az, amit a leggyakrabban használ keverési módokat.
átláthatóság hatása szaporodnak (szorzás)
Kezdjük a szorzás. A matematikai képlet ebben az üzemmódban lehet az alábbi képlettel ábrázolható:
Ez minden. Szó megsokszorozza a felső réteget a színezék (ek), hogy az alsó réteg (b), hogy megkapjuk a végső szín (x), innen ered a neve „szorzás”
De szorozni színe? Úgy működik, mint ez: vannak előállítva, piros, zöld és kék szín csatorna a számítógép képernyőjén. Minden csatorna megkapja a fényerő értékét - egy szám, amely meghatározza a szintet, milyen fényes ragyogni fog megfelelő képpontból áll. Most, hogy megvan a szám, akkor igénybe matematika!
Amikor egy blend mód többszörösen (szorzás), a számítógép veszi az érték a vörös csatorna fényerőt mindkét réteg, vezet a skála a 0-1, és megsokszorozza őket. Aztán csinál ugyanaz a zöld és kék csatornában. Miután megkapta az összes eredmény azt köti össze ezeket a csatornákat, hogy a végső színt.
Ez minden bizonnyal jó, de mi a gyakorlati hatása?
Két réteg átfedés nélkül.
Két réteg segítségével a keverési mód szaporodnak
Miután megszorozzuk a fekete pixelek a felső réteg jelenik meg teljes pompájában: fekete. A fehér pixelek nem látott. Ők teljesen átlátszó. A közbenső szürke árnyalatai a széleit a betűk eltakarva réteg alább. És egy szép egyenes határok minimális erőfeszítéssel. Olyan ez, mintha a menetrend eredetileg átlátszó háttérrel.
Ez a trükk csak akkor működik, fekete darab. Ha a forrás egy szín, ez bizonyos mértékig folt eredményeket. Azonban, ha a számok fehérek, akkor a keverési mód (képernyő).
Por és karcolás a mód (képernyő)
Funkcionális szaporodnak az ellenkezője - „Screen”. Várj egy percet, ha pedig „Multiply” módban, hogy miért nem az úgynevezett „osztály”? És a megoldás ismét a matematika:
Ez nem az úgynevezett „osztály”, mert valójában csinál többszörözés! Itt megszorozzuk a fordított érték egy ellenirányú b. majd fordítsa az eredményt. Ennek eredményeként, a fehér pixelek verhnengo réteget vált teljesen átlátszatlan, és a fekete - átlátszó. Mindegyik közbenső réteg világosítja az árnyékban most alább.
A következő példában, meg akartam nézni, mint egy régi fénykép, így ő vette a scan a por és a karcolások, és tedd a „képernyő”. Én is úgy döntött, hogy ezt a keverési módot deszaturálja a fénykép segítségével levendula színű hatást.
Overlay egy réteg por és karcolások (elérhető a «Spoon Graphics») és egy réteg halvány lila színű.
A kép két réteg, ahol a felső réteg keverési módot alkalmazva képernyőn
By the way, az egyes alkalmazások, van egy részlege mód, de nem a W3C specifikáció. (Nem vagyok különösen ideges erről, mert én soha nem kellett ezt a módot.)
Új színnel a színárnyalat és szín
Minden keverési módok is lehet mozgatni a rajz szín, de kettő közülük különösen hasznos, ha szín: színárnyalat (Hue), és a rendszer egy nagyon megfelelő nevű színes (szín).
Ez a keverék módban veszi az árnyalat eleme a felső réteget, és alkalmazza az alacsonyabb szín anélkül színtelítettség és fényerő. Azt is alkalmazni réteg különböző színű, hogy ugyanazt az eredményt adja, amíg az értékek azonos színű. Abban az esetben, az alábbi képen látható mindhárom árnyalatú barna szett 26 fok, de a fotó ugyanúgy néz ki, függetlenül attól, hogy milyen árnyalatú egymásra.
Ez keverési mód befolyásolja a színárnyalat és a telítettség forrás pixel, de figyelmen kívül hagyja a fényerőt. Fölé egy vöröses-barna réteg nem csak, hogy az eredeti pixel vöröses-barna, mint ahogy az a szín mód, hanem nekik ugyanazt a telítettség, ami általában ad kifejezőbb hatás alakformálás, mint árnyalat.
Fölé vöröses-barna réteg nem csak, hogy az eredeti képpontok vöröses-barna, mint ahogy az a színárnyalat módban. hanem azt is, hogy nekik ugyanazt a telítettség.
Ugyanezt a hatást lehet elérni, ha megváltoztatjuk a rétegrendű azáltal, hogy egy színes fényképet, és helyezzük a fénykép segítségével keverési módok fényesség (fényerő).
Határon böngésző overlay
Ezek blend módok ma már lehetséges, hogy nem egy CSS átfedő hatása nem rosszabb, mint a Photoshop. De még ha az összes böngésző használja ugyanazt a matematikai, néha az eredmények jelentősen eltérnek.
Ezen túlmenően, ez nem csak összeférhetetlen böngészők. Az emberek nem kompatibilis! Vegyük például, több millió ember színvakság. Ezek az emberek valószínűleg látni a tervek nem úgy, ahogy remélte. Mint mindig, ellenőrizze ezeket az alkotásokat saját böngésző, megtekintéséhez, és nem várható, hogy a tervek ugyanúgy néz ki mindenhol!
És persze, teszteltük a valós eszközök megérteni, hogy a hardver korlátai (kis memória, például) hatással lesz a helyszínen. Némi keverési módokat lehet görgetni a fék. Ha szüksége van egy tökéletes simaságot teljes 60 képkocka másodpercenként, néhány opció nem lehet kényelmes.
Alkalmazása keverési módok
Mert blend módok a CSS felel meg egy pár különböző tulajdonságokkal: background-blend-üzemmód és a keveredések blend-módban. Ez is hasznos lehet, a harmadik tulajdonság: elszigetelten.
Kivetése háttérképeket
Nézzük megpróbálja alkalmazni a por és a karcolások a fotó. (Megjegyezzük, hogy a példákban mutatja, csak a kódot közvetlenül érintett)
Néha szükség lehet, hogy egyszerűen csak a színt. Sajnos, CSS-tulajdonság background-color korlátozza nekünk egy szín, és ez mindig az alsó réteg, függetlenül attól, hogy a background-color elején bejelentették, illetve a lista végére. W3C specifikáció kínál jelöléssel kép (), lehetővé teszi a fejlesztők számára, hogy „ezúttal egy egyszínű, mint a képen”, de a szükséges támogatást böngészők még. Szerencsére, mert a színátmenetek a CSS - egyfajta képet, akkor fogás a böngésző, hogy létrehoz egy egyszínű, meghatározva az átmenet a színek az azonos színű.
Most világosítani a képet, ahogy korábban, és Adjunk neki egy barna árnyalatú (szépia).
Borítása HTML-elemek
mix-blend-módban HTML-keverékek egymásra helyezett elemek egymáshoz, így az elemek egymást átfedő rétegekbe összekeverjük az alsó rétegek. Térjünk vissza a címet a képet, és „oldódnak” a nemkívánatos fehér háttér szaporodnak. Én is a kép enyhén áttetsző, így ez egy kellemes hatása a bélyeg képet.
Itt egy új példája a keverék-blend-módban keverő több elemből.
Keverékének használatával-blend-módban keverő több elemből.
Ha szükséges, hogy az alsó réteg tagja van keverve egy adott réteg fölötte lehet elválasztani egy harmadik tulajdonság: izolálás. Ez akkor hasznos, ha meg kell tenni egy tétel a másikra. érintése nélkül az alapréteg. A tulajdonságai mix blend-mód minden egyes ilyen lemezt képernyő megéri az értéket. amely elrendelte őket, hogy új színt a helyeken, ahol metszik egymást. Azonban meg kell elkülöníteni a kép a hegy, hanem hagyta, hogy keverhető más színekkel.
Használata izolációs tulajdonságait akadályozó elem az alsó rétegben a keverés a rétegek fenti.
Amikor építeni a HTML és CSS, akkor elvárom, hogy a következő:
De mint kivetése következtében alkalmazható a tartály tartalmának az alábbiak szerint.
Mint a homály. probléma, amely bizonyos mértékig megvalósítani az alfa csatorna háttér, itt is meg tudjuk oldani a problémát egy mix blend-módban. bízza a munka nagy részét háttérben. A kívánt hatást úgy érhetjük el, ha viszont a rajz meghal, a háttérben a background-image. és nem hal meg egyedül, és borítsd meg egy mix blend-módban. Ez nem egy csodaszer minden esetben, de megéri. Különösen azért, mert nincs több módon elkülöníteni a gyermek elemek a szülő keverés közben.
böngésző támogatása
Keverési módok által támogatott legtöbb modern böngésző kivétel az Internet Explorer és a Él. De ne ess kétségbe, mindezen funkciókat a Microsoft tette a listán „megfontolásra” az Edge és a böngésző már támogatja az összes ilyen blend módok SVG, így van remény a gyors eladó. Ugyancsak nem fáj, hogy szavazzanak ezen tulajdonságok online Microsoft Él «Uservoice» fejlesztők.
És kérem, vegye figyelembe, hogy a Safari 9 nem támogatja keverési módokat árnyalat. telítettség. fényesség és a szín.
Ne feledje, hogy a böngészők, amelyek nem támogatják keverési módokat, jeleníti meg a projektek nem megy a tervek szerint. Ha nem biztos abban, hogy a közönség együtt dolgozik a fejlett böngésző technológiák, akkor jobb, ha nem kockáztatok. Kérdezd meg magadtól, hogy a csere lehetőségeit érvényesek a részét a közönség. Ha nem, akkor keresse meg a megoldás.
Ezen fenntartások ellenére blend módok, tökéletesen kiegészíti a arzenáljának minden fejlesztő eszközöket. Most felveheti az átláthatóság, a telítettség és textúra segítségével CSS, így rugalmas és nem sérti az alapanyagot. Ez egy nagy mellett a böngésző, és a kezünkben.
Ui Azt is érdekelhetnek:
Kevesebb, mint hat hónappal a legutóbbi változás W3C munkafolyamatban, mint a vezető a konzorcium kapott javaslatot, hogy ezt az új eljárást végül az ügyben. És írd le lényegtelen HTML specifikáció a múzeumban, így nem zavart a fejlesztők, „mintha” kapcsolódnia.
Tovább CSS modul, mely azt mondták csendesen érett állapotát, amellyel a W3C azt tanácsolja, hogy indítsa el a rutinszerű használata az új termékek. tartalmazzák a tulajdonság lehetővé teszi, hogy korlátozzuk a változás a fa rajz, újrarajzoláskor CSS-dobozokat, és változtatni a méretét az elemen belül. Ezért olyan fontos, ...
TÖBB
Paris (a képen), amely a közelmúltban elfogadott CSS munkacsoport ülésén, megérkezett szórakoztató hírek: Properties grid-row-rés és rács-oszlop-szakadék, valamint a csökkentés rácsos rés ...