Share
I den tidigare handledningen tog vi en glimt på att skapa CSS-former, så att vi kan definiera den sanna formen av ett element. Vi rörde på grunderna; skapa en cirkel och linda in några rader av text runt den. Låt oss nu utforska mer komplexa former, vilket gör våra sidlayouter rikare och mindre boxiga.
Utöver enkla former som cirklar och rektanglar kan vi också skapa polygoner; former bestående av flera (typiskt fem eller flera) sidor, såsom en pentagon eller en hexagon. För att skapa en använder vi CSS polygon() funktion som tar flera kommaseparerade värden som definierar formkoordinaterna:
Accentsconagua
.form float: left; bakgrundsstorlek: innehåller; background-repeat: no-repeat; marginal: 30px; bredd: 265px; höjd: 265px; form-marginal: 20px; .pentagon background-image: url ('... /img/pentagon.svg'); form-utanför: polygon (32px 126px, 163px 32px, 293px 127px, 244px 282px, 82px 281px); Med ovanstående kod har vi lagt till fem koordinater, varigenom en femkantig form skapas. Om du lägger till en annan koordinat i funktionen kommer du att ändra formen till en hexagon, en till en heptagon, en annan för en oktagon och så vidare.
Att skapa en polygonform manuellt är inte lika lätt som att skapa en cirkel eller en ellips, speciellt om polygonen är komplex och innebär dussintals koordinater. Lyckligtvis finns det ett praktiskt verktyg som gör att CSS-former blir mer intuitiva.
CSS Shapes Editor är en Chrome-förlängning. När du har installerat den lägger den till en ny flik som heter former i DevTools under element fliken, inline med de andra underflikarna (Styles, Dator, etc.)
De former fliken innehåller a form utanför egendom ihop med ett plus + signera för att hjälpa oss att lägga till CSS Shape-funktioner. Låt oss välja polygon() och elementet på sidan, då kan vi börja rita formen direkt i webbläsaren precis som en grafikapplikation.
När vi ritar uppdaterar webbläsarutvidgningen vår polygonfunktion med respektive koordinater av den form som ritats, samtidigt som den läggs till som en inline-stil till elementet. När du är klar, kopiera den genererade koden och klistra in den i ditt stilark.
Genererade polygonkoordinaterMed hjälp av samma teknik kan vi enkelt rita och applicera någon form eller form på vår hemsida, till exempel:
Bild från hur man lägger till drama i en regnig scen med Adobe PhotoshopEtt annat möjligt värde vi kan använda i form utanför propertyis the url () fungera; samma funktion som vi använder någon annanstans i CSS för att lägga till en bakgrundsbild. I detta fall url () funktionen möjliggör form utanför egenskap för att definiera en elementform baserat på bilden.
Du kan välja att använda url () funktion istället för polygon() när du har en särskilt komplicerad grafik, med många kurvor och hörn och du vill att innehållet ska slingras runt det smidigt. Eller när det handlar om användargenererat innehåll där det kan vara svårt att definiera formen.
Vi ska använda den här macawpilen från Unsplash. Först måste du skapa en version med öppenhet, till exempel:
Formen på vår macaw papegojaDen ursprungliga papegojan bilden läggs till i behållaren som en bakgrundsbild:
.behållare background-repeat: no-repeat; bakgrundsbild: url ('... /img/parrot.png'); För själva formen lägger vi till ett annat element i behållaren, och den här gången använder vi en annan CSS Shape-egenskap som heter form-image-tröskel.
.form form-marginal: 15px; form-utanför: url ('... /img/parrot-shape.png'); form-bild-tröskel: 0; Den här egenskapen anger tröskeln för minimal genomskinlighet som definierar bildformen. det tar ett tal mellan 0 till 1 som värdet. Så om du har en något transparent bild kanske du vill ställa in den 0,8 eller 0,5. Vi har satt vårt värde till 0 eftersom området kring papegojaformen är helt transparent.
Resultatet ska se ut som:
Webbläsarstöd för CSS-former är anständigt; men förvänta dig inte mycket från Firefox, Internet, Explorer eller Edge. Också, svara på Stephens fråga i den tidigare handledningen, vi har flera alternativ.
"Det här är coolt, men äkta fråga: vad är fallbacken för IE / FF? Det verkar som att gå all-in med en form layout skulle hamna på några konstiga platser för många användare. "- Stephen Bateman
Först kan vi använda Modernizr. Modernizr är ett pålitligt JavaScript-bibliotek för testning av webbläsare. Se till att du har inkluderat CSS-former och den Lägg till CSS klassalternativ när du laddar ner biblioteket. Då kan du ange layoutstilarna när CSS Shape inte stöds, enligt följande:
/ ** * När webbläsaren inte stöder "CSS Shape". * / .no-former. shape shape-outside: polygon (); / ** * Stilar när webbläsaren stöder "CSS Shape". * / .former.shape
Om laddning Modernizr verkar för mycket, eftersom du bara behöver testa om webbläsaren har CSS aktiverad kan du lägga till följande JavaScript-linjer.
om ('undefined' === typ av document.querySelector ('. shape'). style.shapteOutside) document.body.classList.add ('no-css-shape'); Varje egenskap i CSS levereras med motsvarande i JavaScript Style-objektet, vilket gör att vi kan lägga till stil dynamiskt genom JavaScript. Den här koden upptäcker om webbläsaren har shapeOutside metod, då är det inte så faller vi till no-css-form klass som vi kan använda för att lägga till fallback stilar.
.form form-utanför: polygon (); .no-former. shape
Slutligen kan vi använda CSS @Stöd syntax i stilarket, till exempel.
@supports (form-outside: circle ()) .shape shape-outside: circle ();
Det är upp till dig att bestämma vilket tillvägagångssätt som bäst passar ditt projekt.
En bra sak om CSS Shapes är att det har en naturlig nedgång. Ingen biggie. Har en fyrkant. http://t.co/u9D6y6Apfc pic.twitter.com/mfg8BFTMgP
- Jen Simmons (@ jensimmons) 11 februari 2015
I denna handledning upptäckte vi hur man använder polygon() funktion i CSS Shape och lärt oss hur vi kan enkelt rita polygoner med en Chrome-förlängning. Vi lärde oss också att utnyttja en bild för att rita former för oss; särskilt användbar med alltför komplicerade former. Slutligen, trots CSS Shapes, rimliga webbläsarstöd, pratade vi om att använda graciösa alternativ för icke-stödda webbläsare.
