10 exemple uimitoare de măști CSS, SVG și pânză în acțiune

Puteți face lucruri uimitoare cu măștile SVG. Această tehnică există de ani de zile, dar abia recent și-a făcut loc în dezvoltarea web obișnuită.

Am căutat pe web pentru a găsi demonstrațiile de mai jos ale măștilor de tăiere personalizate și măștilor SVG/pânză. Aceste exemple arată cât de departe puteți împinge măștile pe web și, în cele din urmă, ce le pot oferi dezvoltatorilor în viitor.

1. Mascarea textului

Pentru un exemplu clar de mascare a textului în acțiune, consultați stiloul de mai sus. Folosește textul real al paginii în HTML, astfel încât să puteți modifica cu ușurință acest text pentru a citi orice doriți.

Toată magia se întâmplă în CSS cu proprietăți precum background-clip. Le puteți aplica aproape oricărui text de pe orice pagină, dar nu se vor afișa decât dacă aveți un fundal clar.

Efectul de zoom este, de asemenea, creat exclusiv în CSS, ceea ce face acest fragment de cod și mai impresionant.

2. Decupați poligoane de mască

Rețineți că acest stilou folosește JavaScript pentru animațiile complexe, dar toată mascarea este gestionată printr-un element canvas. Este o idee surprinzător de complexă, așa că încercarea de a urma codul va fi dificilă.

Dar efectul de mascare a poligonului de mai sus este unul dintre cele mai unice modele pe care le-am văzut. Preia forme concepute în CSS și folosește JavaScript pentru a crea aceste forme ca elemente de pagină pentru mascarea unei imagini de fundal.

Aceasta rulează o animație consistentă și rulează pe un element Canvas alimentat de JS care se comportă ca un container pentru conținutul SVG/XML. Lucruri destul de nebunești, dar este distractiv să vezi ce pot face măștile!

3. Mascarea imaginii

Acest exemplu tăiat și uscat arată cum arată o mască de imagine CSS. Puteți vedea înainte și după măștile imaginii de mai sus create de Vincent De Oliveira.

Rețineți că masca neagră cu textura reală este doar un fișier PNG. Dar este stratificat peste o imagine în mod dinamic în CSS pentru a crea un efect de fotografie mascat.

Puteți face acest lucru cu orice textură doriți, atâta timp cât este exportată cu transparență. Există o mulțime de detalii despre proprietatea mască și, deși acceptă fișiere .svg, s-ar putea să vi se pară mai ușor să începeți cu PNG-urile.

4. Buton Hovers

V-ați gândit vreodată să vă personalizați efectele de trecere la buton? Ei bine, acest fragment de cod demonstrează că poți cu un pic de creativitate și ceva mascare CSS.

Din nou, codul rulează pe o mască de imagine predefinită și fiecare buton are propriul efect de mască. Cea mai tare parte este animația hover, care nu doar arată masca, ci mai degrabă o anime în viziune.

Acesta este cu siguranță un fragment de cod experimental, dar arată fenomenal în browserele WebKit și sperăm că această tehnică ar putea deveni o bază în câțiva ani.

5. Mască text SVG

Iată un exemplu ușor diferit de efect de mască de text creat de dezvoltatorul Marco Barria.

În loc de definirea imaginilor SVG personalizate, codul folosește de fapt un element SVG. Este încă construit pe deasupra conținutului text HTML simplu, dar rulează cu un filtru SVG dinamic.

Acest lucru este puțin mai tehnic, dar oferă și mult mai mult control dezvoltatorului. În loc să vă încurcați cu Illustrator pentru a crea fișiere SVG, puteți codifica SVG-uri direct în documentul HTML.

6. Mască text canvas

Cu acest exemplu de pânză de Calvin Davis, veți observa că folosește HTML brut pentru conținut, dar textul în sine nu poate fi selectat.

În schimb, este redat pe pagină folosind un element Canvas care poate abstrage text în afara DOM. Acest lucru îl face să se comporte mai mult ca o imagine, astfel încât veți vedea acest efect în care textul se masca pe fundal, dar nu se simte ca text.

Este posibil ca unor designeri să nu le placă acest lucru din cauza lipsei de utilizare, așa că dacă doriți text selectabil, nu m-aș deranja cu această configurație.

Dar este un exemplu grozav de cât de departe poți împinge tipografia cu forme de pânză.

7. Gradient animat

Un alt efect de text foarte tare este acest gradient animat creat de dezvoltatorul Svante Richter.

Folosește tot codul SVG din pagina HTML, așa că creează măști în mod dinamic. Această configurare SVG funcționează prin preluarea întregii pagini și oferindu-i un fundal gradient, apoi mascând acest fundal numai prin text.

Deoarece gradientul se poate anima prin CSS, va părea că textul este singura parte care se anima. Efect destul de grozav și este ceva pe care ați putea să vă gândiți să îl adăugați la un site web experimental sau o pagină de destinație.

8. Mască de tăiere animată

Această animație abstractă de mască de tăiere folosește bule JS generate aleatoriu pentru a masca peste o imagine. Folosește un element de pânză împreună cu măști de tăiere animate puse împreună pentru a forma un lucru coeziv cu blob SVG.

Poate că nu pare mult, dar dezvoltatorul Neil McCallion a scris un cod destul de dulce, iar rezultatul final este cu siguranță ciudat.

Mascarea are loc mai ales în elementul canvas, dar este controlată prin JavaScript. Este o modalitate distractivă de a combina două imagini cu o animație SVG abstractă.

Din nou, acest lucru poate să nu servească multe scopuri pe un site web din lumea reală, dar este un experiment grozav pentru a modifica măștile.

9. Mască SVG BG

Pe de altă parte, iată un efect de mascare pe care l-ați putea rula pe aproape orice site web.

Aceasta folosește un gradient de fundal alături de un antet erou pentru a crea un efect de mascare complex care încă se îmbină perfect.

Dezvoltatorul Ryna Rudenko a împins plicul cu acest stilou folosind un element de pânză brut cu majoritatea efectelor de mascare stratificate în HTML.

Această mască nu numai că este practică și utilizabilă într-un antet mare, dar este și foarte bine concepută și rulează numai pe HTML5 și CSS3. Un prim exemplu de standarde web moderne puse la bun sfârșit.

10. Măști CSS și SVG

Această galerie completă de măști SVG arată cu adevărat cât de mult poți face cu CSS pur.

Este o demonstrație care prezintă o grămadă de tehnici diferite de mascare care folosesc toate aceeași fotografie, formate diferite. În plus, fiecare exemplu include coduri eșantioane chiar pe pagină pe care le puteți testa singur, deși este la fel de ușor să copiați codul din editorul CodePen.

Dar acest mic stilou acționează mai degrabă ca o introducere ghidată la diferite efecte de mascare a imaginii pe care le puteți face. Un loc minunat pentru a începe dacă doriți să vă scufundați în SVG-uri și măști cu demonstrații simple.