Css mascare

În grafica computerelor, se folosesc de obicei două operații de tăiere și mascare. Ambele operațiuni ascund părțile vizuale ale elementului. Dacă ați lucrat cu SVG sau HTML5 Canvas. aceste operațiuni nu sunt probabil noi pentru tine.

Clipping definește aria elementului care este vizibil. Totul în jurul acestei zone nu este tăiat.

mascarea - combinată cu elementul zonei, care afectează canalul alfa al acestui element. Elementele ascunse sub masca elementului sunt complet sau parțial transparente. Noile specificații de mascare CSS vizează implementarea acestor două operațiuni în lumea HTML.

Clip în CSS 2.1

CSS 2.1 a definit mult proprietatea clipului. Dar, această proprietate are limitări, se aplică numai elementelor cu poziție absolută (poziție: absolută;). Iată cum arată:

În SVG, proprietatea clipului este de asemenea limitată de anumite elemente. Acesta este unul dintre motivele pentru care proprietatea clip-path a fost adăugată la specificația SVG.

Proprietatea pentru calea clipului

Clip-path poate fi aplicat tuturor elementelor HTML, elementelor grafice SVG și elementelor SVG ale containerului. Acesta poate fi un element de referință sau una dintre formele principale din Excluderile CSS.

element înțelege SVG și o folosește pentru a împărți zona. Elementele grafice din SVG sunt . . . . . și consultați manualul HTML5 SVG. Și, de asemenea vă permite să combinați mai multe elemente grafice. Utilizați formularul de tăiere. Următorul exemplu arată utilizarea lui .

Formularele principale nu necesită niciun marcaj SVG. Au fost adăugați la calea clipului. astfel încât să putem folosi funcții simple de tăiere.

• dreptunghi ( . . . . . ) definește un dreptunghi, adaugă doi parametri suplimentari pentru raza rotunjită.
• cerc ( . . ) definește un cerc simplu cu un punct central și o rază.
• elipsă ( . . . ) definește o elipsă cu un punct central, o rază orizontală și verticală.
• poligon ( . . ..., ) definește un poligon din lista de puncte transferată.

Aspectul CSS ar putea arăta astfel:

Clipping-ul poate fi util pentru afișarea conținutului conținutului. În exemplul următor, se aplică diferite operații de tăiere imaginii.

Clipping-ul poate fi, de asemenea, util pentru proiectarea interfeței cu utilizatorul. În următorul exemplu, continuați lista.

pot fi animate. Următorul exemplu are un formular (în formă de stea).

Plasați cursorul peste imagine

Iată codul sursă pentru animarea formei elementare:

A doua operație după tăiere este Masking. Masca pentru imagine utilizează ceva asemănător (o rețea multi-colorată), filtrează părțile vizibile ale elementului. Apoi, voi explica diferența dintre masca de strălucire și masca alfa. Cine este familiarizat cu programul Photoshop, știți ce este.

Brightness Mask

E simplu. Măștile de strălucire sunt o modalitate convenabilă de evidențiere a tonurilor specifice dintr-o imagine. Cu cat este mai usoara partea imaginii, cu atat ele sunt mai ascunse sub masca. De exemplu, negrul va fi complet transparent, albul va indica complet opac și un ton gri va indica transparența parțială a elementului imagine.

Masca alfa

Masca alfa foloseste acelasi principiu ca masca de luminozitate. Diferența este: cu cât este mai mică partea opacă a imaginii mască, cu atât este mai puțin vizibil elementul care se află pe acel loc.

Imaginea de mai jos este rezultatul ambelor operații de mascare descrise mai sus.

Proprietăți mască

Proprietatea mască combină imaginile de mascare cu o referință la mască după cum urmează.

Prima modalitate este să utilizați o imagine de mască. masca-repetare. mască poziție. masca-clip. mască-origine și mască-dimensiuni proprietăți care sunt definite similar cu fondul lor de contrapartidă cu imaginea de fundal. Ca și în imaginea de fundal, puteți defini mai multe surse de mască.

Primul exemplu de mască poate fi implementat pur și simplu utilizând următorul cod:

Dacă sursa măștii ar trebui să aibă dimensiunea conținutului, pur și simplu utilizați proprietatea generală a măștii. ca și cum ați face acest lucru pentru fundal.

A doua modalitate de a lega un element . definită de SVG 1.1. elementul acceptă orice elemente grafice, precum și elemente de grupare din SVG și le folosește pentru a crea o imagine de mască.

Proprietățile imaginii de tip mască-cutie

Proprietatea imagine mască-imagine vă permite să împărțiți imaginea de mască în 9 locații care nu se suprapun: patru colțuri, patru fețe și o parte centrală. Aceste părți pot fi tăiate, scalate și întinse până la dimensiunea zonei de imagine a măștii. Proprietatea împrumută funcționalitatea imaginii de frontieră și rezolvă măștile de-a lungul marginilor și colțurilor conținutului. Următorul exemplu arată comportamentul unei proprietăți:

Suport pentru browser

Toate browserele acceptă clipul. masca și clip-path. așa cum se specifică în SVG 1.1 pentru elementele SVG. Dar un singur browser vă permite să aplicați proprietățile elementelor HTML: Firefox (ca). Să analizăm în detaliu.

clip-path și mască proprietăți cu referire la și Elementele lucrează în Firefox, ambele proprietăți fiind nefixate. Pe de altă parte, imaginea de mască. mask-box-image și proprietățile aferente nu sunt acceptate deloc. Formele elementare pentru tăiere nu sunt acceptate.

Browserele bazate pe WebKit, cum ar fi Safari și Chrome, au suport pentru imagine mască. imagini de tip mască-cutie și proprietăți similare. Toate acestea pot fi aplicate elementelor HTML, astfel încât ambele browsere suportă deja prefixul -webkit-clip-path pentru formularele și legăturile elementare .

Dacă doriți să încercați clipul și masca. asigurați-vă că utilizați prefixul și proprietățile neprefixate. În acest moment, proprietățile fără prefix trebuie să utilizeze linkul sau .

concluzie

Aveți grijă să utilizați și în proiectele lor, multe browsere de aceste filtre nu înțeleg, sau de afișare nu este clar cum! Chiar și de către noi toți bine-cunoscutul și (iubitul) browser IE10