Så här använder du CSS-former i din webbdesign

Layoutprinciperna-kolumnerna och raderna, vinklarna och raderna - som vi använder för att bygga webbplatser idag påverkas i stor utsträckning av deras skrivarvärd. Och även om nätverksimplementering på webben blir bättre och mer polerat är webblayouten i allmänhet fortfarande obekväm jämfört med utskriftsmedia, särskilt när det gäller innehållsflöde.

Tidningar och tidningar har alltid haft eleganta sätt för att ordna innehållslayout, till exempel inslagning av text runt, eller inuti, icke-rektangulära former.

Multipurpose Magazine av GreenSocks

Låt oss utforska hur CSS Shapes Modulet ger oss samma frihet på webben.

Snabb Intro till CSS-former

CSS Shapes gör det möjligt för webbdesigners att skapa mer abstrakta, geometriska layouter, utöver enkla rektanglar och rutor. Specifikationen ger oss nya CSS egenskaper som inkluderar form utanför och form-marginal. Webbläsarstöd är rimligt, men dessa egenskaper är för närvarande endast tillgängliga i Chrome, Opera och Safari med -webkit- prefix, följaktligen -webkit-form-outside.

De form utanför egenskapen kommer att orsaka att inline-innehållet slingras runt (utanför) efter elementkurvan, i stället för boxmodellen. Ursprungligen var det också form inuti att sätta in innehållet inuti ett element; Text i ett cirkulärt element skulle också formas till en cirkelform. Implementeringen har dock skjutits upp för CSS Shapes Level 2.

Från topp till botten: form-ute och form-inuti i funktion.

De form-marginal egenskapen sätter marginen runt vilken form som använder form utanför.

Låt oss ta en titt på några exempel.

Skapa en form

Det enklaste sättet att ta reda på hur CSS Shapes fungerar är förmodligen genom att skapa en cirkel. Så, här är en div (vår cirkel), med flera stycken bredvid.

Lorem ipsum ...

Här är några grundläggande styling, inklusive bredden och höjden på vår cirkel, den border-radius att forma elementet och en flottör så att stycket slingrar runt elementet.

.cirkel bredd: 250px; höjd: 250px; bakgrundsfärg: # 40a977; gränsen: 50%; flyta till vänster;

Som vi skulle undvika, är styckena nu inslagna kring elementet. Men eftersom egenskapen i radieradien inte definierar den faktiska elementformen, bildar styckevägen inte cirkelkurvan.

Om vi inspekterar elementet via vår webbläsare DevTools, hittar vi elementet är faktiskt fortfarande en låda. Så, även om vår div har utseendet av en cirkel, så border-radius har gjort ingenting åt faktisk form av elementet.

Lägg märke till den rektangulära höjdpunkten runt elementet.

För att vår paragraf ska följa den cirkulära formen måste vi ändra faktisk element form genom form utanför fast egendom; i det här fallet lägger vi till en med cirkel() funktionen passerade som värdet.

.cirkel bredd: 250px; höjd: 250px; bakgrundsfärg: # 40a977; gränsen: 50%; flyta till vänster; -webkit-form-utanför: cirkel (); form-utanför: cirkel ();

Våra stycken viks nu snyggt runt cirkelns omkrets.

Dessutom, om vi nu inspekterar elementet via DevTools, ser vi att elementet är korrekt gjord i en cirkel.

Lägg märke till den mörkare höjdpunkten.

Med några marginaler, se hur det kan förbättra en enkel layout:

Anpassa cirkeln

De cirkel() funktionen tar ett par värden för att definiera radie och den center koordinat respektive: cirkel (r vid x y). Som standard härstammar radiusvärdet från elementstorleken; om elementet är 300px Bred, till exempel, kommer radie att vara 150px (radien är halva cirkelens diameter).

På samma sätt, x och y koordinater mäts i förhållande till elementets storlek och de är som standard inställda på 50% 50%; mitt i elementets centrum.

Cirkeln är placerad i mitten av elementet.

Dessa två värden kommer att vara användbara när du vill ändra storlek på formen, samtidigt som du håller den faktiska elementstorleken, eller flyttar formen medan du behåller elementpositionen. I följande exempel reducerar vi cirkelradien till 60 bildpunkter och ställ in mittkoordinaten till 30% 70%, som ska flytta cirkeln längst ned till vänster om elementlådan.

Punkterna passerar nu genom elementrutan följer cirkelstorleken. Visa demo.

Det är värt att notera att när man ändrar cirkeln måste både centrumkoordinaten och radien uttryckligen definieras. Att bara lägga till en av dem är ogiltig.

cirkel (60px vid 30% 70%) // korrekt. cirkel (60px) // ogiltig. cirkel (vid 30% 70%) // ogiltig.

Formboxmodell

CSS-former ärver samma boxmodell princip som elementet, men tillämpas utanför själva elementets räckvidd. Detta gör det möjligt för oss att separat ställa in elementet, säg till border-box medan du ställer formen på padding-box. Ändra formen boxmodell, lägg till en av boxmodell nyckelord, innehåll-box, margin-box, border-box, eller padding-box efter funktionen.

.cirkel bredd: 250px; höjd: 250px; bakgrundsfärg: # 40a977; gränsen: 50%; flyta till vänster; vaddering: 10px; gräns: 20px solid #ccc; marginal: 30px; -webkit-form-utanför: cirkel () padding-box; form-utanför: cirkel () vadderingsbox;

Standardfältmodellen för formen är inställd på margin-box. Och i följande exempel har vi ändrat det till padding-box för att berätta för webbläsaren att utesluta elementmarginalen när man bestämmer formstorleken eller spänningen. Nu borde vi hitta stycket passera genom gränsen och omedelbart vidröra elementets polstring.

Den orangefärgade kvadraten är marginalen, den gula rutan är gränsen och den gröna torget är vadderingen,

Jag rekommenderar starkt att du checkar ut vår fria kurs på grunderna för CSS Box Model för mer om hur boxmodellen fungerar i detalj.

Skapa fler former

CSS Shapes-specifikationen kommer med några fler formfunktioner:

ellips(): Som namnet antyder kommer denna funktion att skapa en ellipsform. Vi kan konfigurera ellipsradien och flytta även formkoordinaten. Men till skillnad från cirkel() funktion, ellips() funktionen tillämpar två radiemätningar, horisontella och vertikala, följaktligen ellips (100px 180px vid 10% 20%).
polygon(): Med den här funktionen kan vi skapa mer komplexa former som trianglar, hexagoner och icke-geometriska former. Att använda polygon är inte lika lätt som att skapa en cirkel, men verktyget till polygonskonverterare gör det lite mer intuitivt.

Avslutar

I denna handledning tittade vi på den grundläggande tillämpningen av CSS-former; Vi skapade en form, anpassade storleken, positionen och boxmodell. Vid skrivetiden är flera aspekter av CSS-former fortfarande mycket grova runt kanterna, vilket är förmodligen varför vi inte ser det användas allmänt ännu.

Som tidigare nämnts i denna handledning, CSS Shapes form inuti egendom som tillåter oss att sätta in och forma innehåll i ett element, har satts på is.
CSS Shapes-specifikationen tillhandahåller en separat egenskap som heter form-box att definiera formboxmodellen, men det verkar för närvarande inte tillämpligt på alla webbläsare.
Safari kräver -webkit- prefix, betonar att den här funktionen är experimentell.

Ändå, trots långsam utveckling och skillnad över webbläsare för närvarande ser jag fram emot CSS Shapes! När de stora webbläsarna plockar upp det kan jag inte vänta med att se några riktigt kreativa layouter på webben!

Webbdesign