Css și svg măști • despre css

Măști CSS și SVG

Înțelegând posibilitățile de design SVG, am devenit interesat de tema măștilor.

Totul a început cu acest experiment:

Pentru inscriptie este conectat fontul Google, umplutura este facuta printr-un model cu gradienti, in timp ce inscriptia nu inceteaza sa mai fie text - poate fi selectata si copiata!







Aici trebuie remarcat faptul că mult mai ușor ar fi să se utilizeze ca un gradient de umplere, fără ambalaj într-un model, dar acest lucru ar trebui să setați proprietățile de gradient spreadMethod = „Repeat“. așa că repetă, și Firefox, în acest caz, gradientul într-un fel rupt.

M-am uitat la sprijinul acestui demo în diferite browsere, mi-am amintit despre -webkit-background-clip: text. care este susținută numai în camere web, și a decis să vadă ce altceva este interesant în această direcție.

Există mai multe moduri de a decupa un element prin mască. Unele sunt acceptate de toate browserele moderne, altele sunt foarte slab menținute și nu le puteți folosi încă. În unele moduri, masca poate fi text.

  • CSS - masca este creată în CSS și aplicată elementelor HTML;
  • SVG + CSS - Masca SVG este aplicată elementelor HTML folosind CSS;
  • SVG - Masca SVG este aplicată elementelor SVG. Folosind CSS, dar principalul lucru este că atât masca, cât și elementul mascat sunt SVG.

Cel mai bun suport pentru browsere este pentru măștile realizate în întregime pe SVG.

Toate căile din acesta sunt prezentate ca atare - fără flashback-uri, astfel încât să puteți deschide pagina în browser-ul de interes și să vedeți cum este suportată metoda de care aveți nevoie. Sper că într-o zi vom vedea toate măștile care lucrează în toate browserele moderne.

Măștile sunt de diferite tipuri: unele vă permit să decupați un element de-a lungul unei forme vectoriale (cale) - clip. clip-cale. alții se concentrează pe luminozitatea culorilor sau pe canalul alfa al imaginii - masca și imaginea mască - aceste metode vă permit să obțineți o mască cu marginile neclară. Puteți utiliza textul ca o mască în calea clipului SVG. Masca SVG. -webkit-clip-fundal și umplere SVG. Aceasta din urmă nu este o mască în sensul literal al cuvântului, dar rezultatul arată ca un clip-fundal web. și în același timp este susținută de toate browserele moderne.

Toate măștile găsite pe pagina demo. Voi vorbi doar despre cele mai bine susținute - desigur, toate sunt pe SVG. Toate exemplele din demo-urile post-live, fără screenshot-uri.

Nam tristique vestibulum nulla nec. Nullam commodo eget dolor și ultricii. Nulla ligula elite, placerați o sapienă mare, elefend tincidunt nibh. Suspendisse porta fermentum dictum. Urmați-vă Maecenas tempus elit quis sapien tempo, sit amet viverra neque mattis. Quisque o tincidunt mi. Proin la justo eu ipsum posuere dignissim vel quis eros. Etiam la libero commodo, varius justo quis, interdum erat. Fusce viverra mollis est, nec euismod ante mattis ut. Aenean eu mauris viverra enim vulputate bibendum. Întregul cuvânt de comandă, cursul și comanda sunt incluse, gravida vitae purus. Sedelesque la odio non condimentum. Seduce lacus, roncus vitae sem ut, pharetra vestibulum elit. Cras ultricies aliquam dolor quis ultrices. Cras eut mauris tincidunt, aliquam erat quis, faucibus augue.







Clipul SVG pentru elementele SVG

clipPath vă permite să utilizați o mască vector de orice formă. Utilizarea versiunii clipPath SVG pentru elementele HTML este acceptată numai în Firefox, dar dacă transferați marcajele în SVG - masca va funcționa în toate browserele moderne.

Formele din interiorul clipPath pot fi combinate pentru a deveni mai complexe, iar textul poate fi de asemenea utilizat în clipPath. Textul utilizat în clipPath. Nu puteți selecta și copia, în timp ce textul elementului tăiat - puteți, totuși, să fie copiat cumva ciudat.

Nam tristique vestibulum nulla nec. Nullam commodo eget dolor și ultricii. Nulla ligula elite, placerați o sapienă mare, elefend tincidunt nibh. Suspendisse porta fermentum dictum. Cras eget adipiscing magna. Nunc massa justo, placerat la porta la, mollis nec eros. Nullam eu justo erat. Curațitorul de rhoncus purus, interdum posuere ligula. Ultricies fermentum dignissim. Aliquam et arcu tempus, euismo nisi eu, lobortis est. Întâlniți ultritori ultima oară cu ultima. Nam tristique vestibulum nulla nec. Nullam commodo eget dolor și ultricii. Nulla ligula elite, placerați o sapienă mare, elefend tincidunt nibh. Suspendisse porta fermentum dictum. Cras eget adipiscing magna. Nunc massa justo, placerat la porta la, mollis nec eros. Nullam eu justo erat. Curațitorul de rhoncus purus, interdum posuere ligula. Ultricies fermentum dignissim. Et tempus Arcu Partajați, euismod NISI ue, lobortis est. Integer ultrices aliquet Enim ultrices ue.

SVG mască pentru elementele SVG

Masca SVG vă permite să specificați un element sau o combinație de elemente care vor acționa masca pe un canal alfa sau pe luminozitate. Masca SVG pentru elementele HTML este de asemenea acceptată numai în Firefox, dar când se deplasează markup la SVG funcționează peste tot.

Masca poate servi drept figură, în timp ce gradul de transparență depinde de luminozitatea culorii de umplere (culori deschise - transparență, întuneric - opacitate). Cifrele declarate mai jos în cod taie straturile de mai sus. De asemenea, puteți utiliza imaginile ca o mască.

Masca SVG (spre deosebire de clipPath) vă permite să creați o mască cu marginile neclară.

umpleți este o umplere, nu o mască, dar vă permite să simulați o mască destul de bine. Culoarea, gradientul sau modelul se pot umple.

Modelul este un element SVG. Poți pune ceva în ea, să folosești conținutul containerului ca fundal repetat. În acesta, puteți crea un model din alte elemente SVG. și, de asemenea, înfășurați o imagine sau un text în ea.

Cu toate acestea, există unele dificultăți cu textul: în SVG, textul nu poate fi transferat singur. Pentru a face textul cu cratime, ca în HTML normal, trebuie să fie înfășurat într-un document foreignObject. dar o umplere cu acest model nu functioneaza. deși în modelul pentru model este scris că foreignObject poate fi inserat în model.

Deci, pentru a face o umplere cu text, trebuie să-l inserați prin eticheta de text. și înfășurați fiecare linie în tspan și fixați-o în poziția dorită. Metoda este greoaie, dar funcționează.

Folosind ca model o imagine, puteți obține inscripții cu orice textură pe care o va spune fantezia. În acest caz, metoda funcționează în toate browserele moderne, spre deosebire de -webkit-background-clip: text. astfel încât follbekovul va avea nevoie de mult mai puțin.

De fapt, textul fără turnare, dar cu un accident vascular cerebral poate fi de asemenea făcut: în acest caz, modelul ar trebui să fie setat la proprietatea cursei.

Exemple sunt făcute pentru text, dar umple și accident vascular cerebral de lucru, de asemenea, pentru forme.

Când se utilizează umplere pentru text, textul este încă text: îl puteți selecta și îl puteți copia (încercați exemplele de mai jos), puteți seta dimensiunea fontului și fontul.

Notă importantă: în Firefox și vechea Opera, link-ul este de tip mască: url (#masking); Nu funcționează dacă pagina cu gradienți SVG, modele și măști este în același director și CSS - în cealaltă. Aceasta este tratată cu calea completă de la rădăcina site-ului, de exemplu masca: url (/ page-url / # masking); astfel încât browserele să știe exact unde să caute un element cu un astfel de cod. Pentru o indicație a problemei, mulțumită camerei de legume.

Capabilitățile SVG vă permit să faceți o varietate de măști și să le utilizați într-o varietate de moduri, în timp ce acestea au un suport foarte bun pentru browsere. Dacă considerați că multe dintre proprietățile SVG pot fi animate folosind JS, perspectivele se deschid complet fantastice.







Articole similare

Pagina anterioară

Pagina următoare

Trimiteți-le prietenilor: