css maszkolás

A számítógépes grafika, általában használ két nyírás működését és maszkolás. Mindkét művelet elrejtése vizuális elem része. Ha dolgozni SVG és HTML5 Canvas. ezek a műveletek valószínűleg nem új neked.

Csúszás (cutoff) határozza meg a terület elem, amely látható. Körös-körül ezen a területen nem vágva.

elfedő (maszkolás) - együtt egy elem régiót érintő alfa-csatorna ennek az elemnek. Rész alá rejtett a maszk elemeket, teljes egészében vagy részben átlátszó. Új leírás CSS maszkolás irányul, hogy a végrehajtása a két művelet a HTML világában.

Clip CSS 2.1

CSS 2.1 már régóta azonosítottak klip tulajdonság. Azonban, ezt a tulajdonságot egy korlátozást, ez csupán az elemek abszolút helyzet (pozíció: abszolút;). Itt van, hogyan néz ki:

Az SVG is clip funkció csak bizonyos elemeket. Ez az egyik oka annak, hogy az SVG specifikáció hozzá egy clip-path tulajdonság.

Az ingatlan clip-path

clip-path lehet alkalmazni minden eleme HTML, SVG és a grafikus elemek tartályba. Ez lehet a referencia elem vagy az egyik fő formája a CSS Kivételek.

elem SVG érti meg és használja azt külön a területen. Vannak grafikai elemek SVG . . . . . és Lásd a cikket a HTML5 SVG Guide. és Egyesíti több grafikus elemekkel. Használja az űrlapot, hogy a cut-off régióban. A következő példa szemlélteti a használatát .

Alapvető formák nem igényel semmilyen SVG jelölést. Úgy adunk a clip-path. hogy mi is egy egyszerű cut-off funkció.

• téglalap ( . . . . . ) Egy négyszöget határoz, hozzáadja két további sugara paramétert lekerekített rects.
• kör ( . . ) Meghatározza egy egyszerű kör középpont és a sugár.
• ellipszis ( . . . ) Meghatározza egy ellipszis a középpontja, a vízszintes és függőleges sugara.
• sokszög ( . . ..., ) Meghatározza a sokszög listáját az átadott pontok.

CSS jelölés a következőképpen nézhet ki:

Metszés hasznos lehet megjeleníteni a tartalmát a tartalom. A következő példában, hogy a kép alkalmazott különböző vágási műveleteket.

Metszés is hasznos lehet a design a felhasználói felület. A következő példában a lista folytatódik.

Ők lehet animált. A következő példa a (csillag alakú) formában.

Vigye az egeret a kép fölé

Itt látható a forráskódját az elemi formái animáció:

A második műtét után felvágja maszkoló (maszkolás). Maszk (maszk) a kép segítségével valami hasonló (színes mesh), kiszűri a látható részek az elem. Ezután fogom elmagyarázni a különbséget maszkok fényerősség és az alfa-maszk. Akik ismerik a Photoshop programban, tudom, mi az.

fényerő maszk

Ez egyszerű. Maszkok fénysűrűség kényelmes módszer elkülönítésére külön a kép színeit. A világosabb a kép egy részét, a több rejtett elemeket a maszk mögött. Például a fekete teljesen átlátszó, fehér jelzi teljesen átlátszatlan, és szürke hang jelzi, részleges átláthatóságát egy kép elem.

Alpha maszk

Alpha maszk használja ugyanazt az elvet, mint a fényerő a maszk. A különbség: a kisebb átlátszatlan része a maszk kép, a kevésbé látható elem lesz a rossz helyen.

A fényképek alatti - az eredmény a két maszk fenti műveleteket.

tulajdonságok maszk

Az ingatlan maszk egyesíti maszkolás kép hivatkozva a maszk következik.

Az első módszer az, hogy egy maszkot képet. maszk-repeat. maszk-helyzetben. maszk-klip. maszk indulási és maszk méretű jellemzőket, melyek meghatározása hasonló a számláló alkatrészek háttér background-image. Ami a háttérképet, akkor meg több forrásból maszkokat.

Az első példa a maszk lehet megvalósítani egyszerűen a következő kódot:

Ha a forrás maszk legyen a mérete, a tartalom, csak használja a általánosító ingatlan maszk. mintha csinálja a háttérben.

A második módszer referenciaelem . meghatározott SVG 1.1. elem elfogad bármilyen grafikai elemek és a csoportosítás elemeket az SVG és használja őket, hogy hozzon létre a maszk kép.

Tulajdonságok maszk-box-image

Tulajdonságok maszk-box-image lehetővé teszi, hogy ossza kép maszk a csempe 9: négy sarkában négy élek, és a középső része. Ezek a részek kell nyírni, méretezhető és feszített kép régióban méretű maszk. Az ingatlan alkalmassága kölcsönzi a határ-képet, és lehetővé teszi, hogy a maszk mentén élek és sarkok a tartalom. A következő példa bemutatja a viselkedését a tulajdonságok:

a maszk kép maszk-box-image

böngésző támogatása

Minden böngésző támogatja klip. maszk és clip-path. amint az a 1.1 a SVG SVG elemek. De csak egy böngésző lehetővé teszi, hogy a tulajdonságai elemek HTML: Firefox (egyfajta). Nézzük meg részletesebben.

clip-path maszk és tulajdonságokkal való hivatkozással és elemek működnek a Firefox, mind a tulajdonságok előtag. Másrészt, maszk-kép. maszk-box-image és a kapcsolódó tulajdonságokat egyáltalán nem támogatott velük. Elemi formák a cut-off nem támogatott.

Böngészők alapul WebKit, például, a Safari és a Chrome, meg maszk-image támogatás. maszk-box-kép és a megfelelő kép tulajdonságait. Mindegyikük lehet alkalmazni, hogy az elemek a HTML, így mindkét böngésző már támogatja prefix -webkit-clip-path az elemi formák és linkek .

Ha azt szeretnénk, hogy megpróbálja klip maszk. győződjön meg róla, előtagot használnak és tulajdonságai előtag. Abban a pillanatban, az ingatlan kell használni a linket előtag vagy .

következtetés

Légy óvatos használatával és azok a projektek, sok böngésző ezek a szűrők nem értik, vagy nem értik, hogyan kell megjeleníteni! Még mindannyian ismertek, (a kedvencem) böngésző IE10