Una dintre marile trăsături ale predării este că elevii vin cu cele mai proaspete idei. În dezvoltarea industrială, de regulă, ne gândim la îndeplinirea sarcinii și, prin urmare, pierdem metode noi și interesante.
Prima săptămână a proiectului a fost în tabăra noastră de antrenament. Un site web care demonstrează o înțelegere a HTML și CSS: utilizarea semantică a marcajului și CSS pentru stiluri. Unul dintre studenții noștri, Heather Banks. Voiam să repet efectul asupra Squarespace. în cazul în care plasați peste un div, o felie apare pe ea.
Cunoscând experiența ei anterioară în domeniul HTML și CSS, această sarcină a fost complet în competența ei, dar am decis să o ajut în implementarea acestui efect. Asigurați elementul de meniu nu este de tăiere o sarcină ușoară atunci când vă mutați, și primul meu instinct a fost de a face o imagine mică, similar cu fundal și setați-o ca fundal de pseudo-elemente: după. Problema este că această metodă nu este adaptivă și imprevizibilă.
Introducere în proprietatea clip-path
Această proprietate face parte din standardul care se află în starea proiectului de lucru și vă permite să ascundeți părțile imaginii prin mască. În timp ce clip-path-ul nu este acceptat pe scară largă de toate cele mai recente versiuni de browsere (Firefox și IE nu sunt acceptate), dar funcționează bine în browserele Webkit.
Rețineți că, pentru a utiliza această proprietate acum, trebuie să specificați prefixul -webkit.
Pentru a lucra cu această proprietate este simplă, este necesar să specificăm un set de perechi X și Y. O curbă este construită din aceste valori și imaginea este tăiată de-a lungul acestei curbe.
Puteți crea multe forme diferite din cercuri, elipse, poligoane. Totul este limitat doar de imaginație.
Triunghiul simplu
Efectul prezentat mai sus este obținut prin utilizarea unui element și a proprietății căii clipului aplicate.
Wow, să aruncăm o privire mai atentă
La fel ca în poziționare, trebuie să gândim în coordonatele X și Y. Axele X: 0 și Y: 0 încep în colțul din stânga sus al elementului. Coordonate X: 100% corespunde marginii drepte și coordonatele Y: 100% - marginea din stânga a elementului.
A fost grozav. În acest fel, am creat următoarele puncte.
Calea simplă începe din colțul din stânga jos, iar punctul este 50% orizontal la limita superioară și 100% orizontal la marginea inferioară. Trei puncte! Triangle!
Tot ceea ce nu se încadrează în aceste limite este circumcis. Elementul în sine își păstrează dimensiunile, numai schimbarea sa de afișare.
În exemplul de mai sus, am folosit un poligon și definit forma folosind un set de perechi x și y separate prin virgule. Dar putem folosi și alte forme care au semnificații diferite.
cerc
Pentru a crea un cerc, trebuie să treci trei valori. Coordonatele x și y ale centrului cercului și raza cercului. După specificarea razei, am folosit cuvântul cheie la cuvântul cheie pentru a trece coordonatele centrului.
Adesea, nu avem nevoie de un cerc, ci de o elipsă. Pentru a defini o elipsă, trebuie să specificați patru valori: raza de-a lungul axei x, raza de-a lungul axei y și coordonatele centrului x și y separate de cuvântul cheie la.
Dreptunghi cu colțuri rotunjite
(Poate funcționa instabil în Google Chrome)
Poate că doriți să creați un dreptunghi cu colțuri rotunjite și colțuri ascuțite de poligoane - nu este ceea ce aveți nevoie. Apoi, forma inserată poate fi utilă. Este nevoie de patru valori care definesc marginea superioară, dreapta, de jos și de stânga a regiunii și patru parametri care definesc raza fileului, separată de cuvântul cheie de rază.
Știri excelente, există și o scurtă formă de intrare:
Ajutor rapid
- Cerc: cerc (raza la axa x axa y)
- Elipsa: elipsă (x-rad y-rad la axa x axa y)
- Poligon: poligon (axa x axa y, axa y axa x.)
- Inserție: inserție (partea dreaptă de sus dreapta-stânga-dreapta-raza-stânga-raza)
Crearea de forme arbitrare
Un cerc și o elipsă sunt limitate doar la câteva valori, în timp ce poligoanele sunt adesea cea mai bună alegere pentru crearea de forme complexe. Având abilitatea de a defini mai multe puncte, putem să ne culmăm elementele așa cum doriți.
Un bloc de text din benzi desenate
Acum avem o idee despre formele și crearea lor, vom vedea cum pot fi folosite pentru a crea efecte.
Putem aplica proprietatea atunci când treceți cursorul mouse-ului peste un element, și de a folosi proprietățile de tranziție va face tranziția lină, dar trebuie să creați starea inițială, cu toate kordinaty care urmează să fie utilizate în forma când vă deplasați.
Utilizare practică
Din moment ce suportul pentru clip-path este în prezent limitat la browserele webkit, există limitări serioase în utilizarea acestuia. În Firefox există măști SVG pentru acest lucru, însă o tranziție lină cu tranziție în acest caz nu este întotdeauna posibilă.
În general, dacă doriți să aflați această proprietate, Chrome și alte browsere din webkit, cum ar fi Safari, o suportă perfect.
Să ne întoarcem la problema inițială
Totul a început cu faptul că vrem să recreăm efectul în navigarea pe Squarespace. După poziționarea unui element peste celălalt și aplicarea calea clipului la elementele de meniu, am recreat efectul fără a înlocui eventual imaginile.
Ați găsit o greșeală? Orphus: Ctrl + Enter
Articole similare
Trimiteți-le prietenilor: