Share
În tutorialul anterior, am aruncat o privire asupra creării de forme CSS, permițându-ne să definim adevărata formă a unui element. Am atins principiile de bază; crearea unui cerc și împachetarea câtorva rânduri de text în jurul acestuia. Să explorăm acum forme mai complexe, făcând aspectul paginii noastre mai bogat și mai puțin boxy.
Dincolo de forme simple, cum ar fi cercuri și dreptunghiuri, putem crea, de asemenea poligoane; forme formate din mai multe (de obicei cinci sau mai multe) laturi, cum ar fi un pentagon sau un hexagon. Pentru a crea una, folosim CSS poligon() funcție care necesită mai multe valori separate prin virgule care definesc coordonatele formei:
Accentsconagua
.forma float: left; dimensiune de fond: conține; background-repeat: nu-repeta; margine: 30px; lățime: 265px; înălțime: 265px; forma-margine: 20 pixeli; .pentagon imagine-imagine: url ('... /img/pentagon.svg'); forma-exterioară: poligon (32px 126px, 163px 32px, 293px 127px, 244px 282px, 82px 281px); Cu codul de mai sus, am adăugat cinci coordonate, generând astfel o formă de pentagon. Adăugarea unei alte coordonate a funcției va transforma forma într-un hexagon, altul pentru un heptagon, altul pentru un octogon și așa mai departe.
Crearea manuală a unei forme de poligon nu este la fel de ușoară ca crearea unui cerc sau a unei elipse, mai ales dacă poligonul este complex și implică zeci de coordonate. Din fericire, există un instrument la îndemână care face crearea CSS Formelor mai intuitivă.
Editorul CSS Shapes este o extensie Chrome. Odată ce l-ați instalat, acesta adaugă o nouă filă numită forme în DevTools în cadrul element , în linie cu celelalte sub-file (stiluri, Calculator, etc)
forme fila conține a formă-exterior proprietate asociată cu un plus + semn pentru a ne ajuta să adăugăm funcții CSS Shape. Să selectăm poligon() și elementul de pe pagină, atunci putem începe să desenăm forma exactă în browser ca și o aplicație grafică.
Pe măsură ce desenați, extensia browserului va actualiza funcția noastră poligonă cu coordonatele respective ale formei desenate, adăugând simultan stilul inline al elementului. După ce ați terminat, copiați codul generat și inserați-l în foaia de stil.
Generate coordonate poligonaleFolosind aceeași tehnică, putem ușor trasa și aplica orice formă sau formă pe pagina noastră web, de exemplu:
Imagine de la cum să adăugați dramă la o scenă ploioasă cu Adobe PhotoshopO altă valoare posibilă pe care o putem folosi în formă-exterior propertyis the URL-ul () funcţie; aceeași funcție pe care o folosim în altă parte în CSS pentru a adăuga o imagine de fundal. În acest caz URL-ul () funcția permite formă-exterior proprietate pentru a defini o formă de element bazată pe imagine.
S-ar putea să alegeți să utilizați URL-ul () în loc de poligon() când aveți o grafică deosebit de complexă, cu multe curbe și colțuri și doriți ca conținutul dvs. să se înfășoare în jurul ei fără probleme. Sau, atunci când se ocupă cu conținut generat de utilizatori, în care definirea formei ar putea fi dificilă.
Vom folosi acest papagal macaw de la Unsplash. În primul rând, va trebui să creați o versiune cu transparență, de exemplu:
Forma papagalului nostru macawImaginea originală a papagalului este adăugată în container ca imagine de fundal:
.container background-repeat: no-repeat; imaginea de fundal: url ('... /img/parrot.png'); Pentru forma însăși, o vom adăuga la un alt element din container și de această dată vom folosi o altă proprietate CSS Shape numită forma-imagine-prag.
.forma shape-margin: 15px; formă-exterioară: url ('... /img/parrot-shape.png'); forma-imagine-prag: 0; Această proprietate particulară stabilește pragul de transparență minimă care definește forma imaginii; este nevoie de un număr între 0 la 1 ca valoare. Deci, dacă aveți o imagine ușor transparentă, vă recomandăm să o setați 0,8 sau 0.5. Ne-am stabilit valoarea 0 deoarece zona din jurul formei de papagal este complet transparentă.
Rezultatul ar trebui să arate cam așa:
Suportul pentru browser pentru CSS Shapes este decent; deși nu vă așteptați prea mult de la Firefox, Internet, Explorer sau Edge. De asemenea, răspunzând la întrebarea lui Stephen din tutorialul anterior, avem mai multe opțiuni.
"Aceasta este o intrebare racoroasa, dar adevarata: care este treaba pentru IE / FF? Se pare că mergerea all-in cu un aspect de formă se va sfârși în câteva locuri ciudate pentru mulți utilizatori. "- Stephen Bateman
În primul rând, putem folosi Modernizr. Modernizr este o bibliotecă JavaScript de încredere pentru testarea caracteristicilor browserului. Asigurați-vă că ați inclus Formate CSS si Adăugați CSS clase la descărcarea bibliotecii. Apoi, puteți specifica stilurile de aspect când CSS Shape nu este acceptat, după cum urmează:
/ ** * Când browserul nu acceptă "CSS Shape". * / .no-forme .shape formă-exterior: poligon (); / ** * Stiluri când browserul acceptă "Formatul CSS". * / .shapes .shape
Dacă încărcarea Modernizr pare prea mult, deoarece trebuie doar să testați dacă browser-ul are activat CSS, puteți adăuga următoarele linii JavaScript.
dacă ('undefined' === typeof document.querySelector ('.formă'). style.shapteOutside) document.body.classList.add ('no-css-shape'); Fiecare proprietate din CSS vine cu echivalentul său în obiectul JavaScript Style, care ne permite să adăugăm stil dinamic prin JavaScript. Acest cod detectează dacă browserul are shapeOutside metodă, atunci în cazul în care nu este cazul, adăugăm no-css-forma clasă pe care o putem folosi pentru a adăuga stilurile de rezervă.
.formă formă-exterioară: poligon (); .no-forme .shape
În cele din urmă, putem folosi CSS @a sustine sintaxă în foaia de stil, de exemplu.
@supports (formă-exterioară: cerc ()) .shape formă-exterior: cerc ();
Depinde de tine pentru a decide care este cea mai potrivită abordare pentru proiectul tău.
Un lucru minunat despre CSS Shapes este că are o schimbare naturală. Fără biggie. Aveți un pătrat. http://t.co/u9D6y6Apfc pic.twitter.com/mfg8BFTMgP
- Jen Simmons (@jensimmons) 11 februarie 2015
În acest tutorial, am descoperit cum să folosim poligon() în CSS Shape și am învățat cum putem trage cu ușurință poligoane utilizând o extensie Chrome. De asemenea, am învățat cum să folosim o imagine pentru a desena forme pentru noi; deosebit de util cu forme prea complexe. În cele din urmă, în ciuda suportului rezonabil al browserului de către CSS Shapes, am vorbit despre utilizarea unor alternative grațioase pentru browserele nesuportate.
