Så här börjar du med CSS Shapes

Webben har vanligtvis varit en plats för lådor och rektanglar, men en växande CSS-specifikation kommer att ändra det. I den här artikeln ska jag presentera dig för CSS Shapes, förklara vad de är och de grundläggande begreppen du behöver för att börja använda dem.

Alla exemplen är kopplade till Github , så att du kan visa och ladda ner källkoden som utgångspunkt för ditt eget experiment.

Vad är CSS-former?

De CSS-former specifikation beskriver geometriska former för oss i CSS. I nivå 1 i specifikationen, nu vid status för kandidatrekommendation, kan former endast tillämpas på flytande element. Ett exempel är det enklaste sättet att komma igång.

.shape { float: left; width: 150px; height: 150px; margin: 20px; shape-outside: circle(50%); }

I ovanstående exempel lägger vi till denna klass i en bild. Vi flyter bilden till vänster, ger den en bredd, höjd och en marginal och använder sedan egenskapsformen -utsidan för att kurva texten runt cirkeln.

Se exempel

Innan du går vidare, använder du Chrome-huvudet på över till http://betravis.github.io/shape-tools/ och dra bokmärken för Visa former till bokmärkesfältet.

Om du sedan går till min exempelsida och klickar på bokmärket kan du se hur cirkelformen dras:

Grundläggande former

Den form-externa egenskapen som används i vårt enkla exempel kan ta olika värden. De första möjligheterna kallas "grundläggande former" i specifikationen. Dessa grundläggande former är funktioner:

infällning ()
cirkel()
ellips()
polygon()

infällning ()

Funktionen inset () är för att definiera former på rektangulära element, vilket float gör för oss och i de flesta fall är tillräckliga. Det kan finnas tider när den extra kontrollen kommer till nytta.

Funktionen inset () kan överföras fyra positionsargument som är förskjutna inåt från elementets kanter, plus en radie för den rektangulära formen, föregås av nyckelordet "round".

inset (högra längst ner till vänster omradie)

till exempel:

inset(10px 20px 10px 20px round 50%);

Argumentets argument följer samma stenografi som marginal, så om du vill ha ett inlägg på 20 pixlar runt elementet du kan använda:

inset(10px round 50%);

I mitt exempel har jag använt en bild som har mycket vitt utrymme under det. Om jag bara flyter bilden har jag ett stort gap nedanför. Genom att använda inmatningsvärdet kan jag infoga botten av formen, så att texten kan flöda närmare den.

.shape { float: left; width: 200px; height: 200px; shape-outside: inset(0 0 70px 0 round 10px); }

Se exemplet , och använd bokstäverna Visa former för att se formen.

cirkel()

Vi träffade cirkelens grundläggande form i början av den här artikeln. Cirkelformatet () -formen beskrivs fullständigt i beskrivningen som:

circle(r at cx cy);

Värdet r är cirkelns radie, 50% är halva elementets bredd. De andra två värdena är x- och y-koordinater för cirkelcentralen, det här gör att du kan driva cirkeln runt.

I mitt exempel använde jag:

circle(50%);

Jag kunde också ha beskrivit detta som:

circle(50% at 50% 50%);

I min exempelsida på Github Jag har en ikon, den har en transparent bakgrund och för att göra exemplen tydligare. Jag har gett bilden en grå bakgrundsfärg, vaddering, en kant och en marginal:

.shape { float: left; width: 150px; height: 150px; margin: 20px; padding: 20px; background-color: #cccccc; border: 10px solid #999999; }

Det är inställt att flyta till vänster, och om vi inte tillämpar några former på den här bilden ser det ut som skärmdumpen nedan.

Jag kan skapa en enkel cirkelform:

.circle { shape-outside: circle(50%); }

Om jag använder cirkelvärdet av form-insidan och denna tid ändrar koordinaterna. Cirkeln skjuts upp och till vänster.

.circle-coords { shape-outside: circle(50% at 30% 30%); }

Du kan använda absoluta eller relativa värden för koordinaterna eller nyckelorden som vid placering av bakgrundsbilder.

Vid denna tidpunkt är det värt att ta en titt på begreppet referenslådor. Det finns fyra möjliga referenslådor som vi kan använda:

innehåll-box
padding-box
border-box
margin-box

Standardreferensrutan för cirkeln är marginalrutan.

shape-outside: circle(50%) margin-box;

Är detsamma som att skriva:

shape-outside: circle(50%);

Som du förväntar dig att marginalboxen är begränsad av elementets marginal, gränsrutan vid gränsen, kommer stoppboxen av vadderingen och innehållsrutan att begränsas av det faktiska innehållet.

Läsa Denna artikel för en fullständig förklaring av hur referenslådor fungerar i samband med CSS-former.

Om vi tittar på min exempelsida med bokmärket Visa former kan du se tydligt hur det fungerar.

Det sista jag ska visa dig med cirkel är hur man klickar på innehållet för att följa formen som du har skapat. När jag lagt till synlig vaddering och gränsar till mitt element verkar vår text överlappa den. Vi kan faktiskt klippa innehållet i formen med hjälp av egenskapen clip-path från CSS Masking Level 1-specifikationen. Det krävs förhandskorrigering (se [Kan jag använda] [7]).

.circle-clip { shape-outside: circle(50%) margin-box; -webkit-clip-path: circle(50%) ; clip-path: circle(50%) ; }

Som du kan se i ovanstående skärmdump är vårt element nu klippt för att följa kurvan. Det här fungerar riktigt bra för bilder, så att du kan klippa dem så texten verkar flöda längs kurvorna.

ellips()

Många former kan böjas runt med hjälp av ellipsvärdet, även om de inte är uppenbarligen en ellips.

Att använda ellips är ungefär som att använda cirkel, förutom att istället för ett värde för radie måste du ange x- och y-radie separat.

shape-outside(rx ry at cx cy);

Radiervärdena kan vara absoluta eller relativa enheter och även nyckelord närmast och längst . Dessa nyckelord är också giltiga för användning som en cirkels radie, men mindre användbar i praktiken.

Mitt exempel utan någon form som appliceras är helt enkelt flytande.

.shape { float: left; width: 200px; height: 200px; margin: 20px; }

Jag kan använda radien sökord:

.ellipse-keywords { shape-outside: ellipse(closest-side farthest-side at 50% 50%); }

Vilket skapar en cirkel på detta element eftersom de faktiska dimensionerna på bilden är kvadratiska.

För att tvinga en ellipse använder jag absolut längd enheter.

.ellipse-values { shape-outside: ellipse(90px 150px at 50% 50%); }

För att flytta ellipsen över ändrar jag koordinaterna:

.ellipse-center { shape-outside: ellipse(closest-side farthest-side at 70% 80%); }

polygon()

Om du behöver riktigt fin kontroll när du skriver din form, kommer polygonvärdet att hjälpa. Du kan ange så många koordinater som du behöver för din form - med minst tre.

Varje par koordinater är åtskilda av ett komma.

.shape-polygon { shape-outside: polygon(0 20px, 160px 40px, 180px 70px, 180px 120px, 120px 200px, 60px 210px, 0 220px); }

Med bokmärket Visa former kan du se formen.

Former från en bild

Ett annat sätt att skapa en form är att ge en bild som värdet för form-utanför. Den bilden måste ha en alfakanal. (Du kan läsa mer om hur du sparar dina bilder om du använder Photoshop på Adobe Web Platform blogg .)

Du kan använda en bild som redan finns på din sida eller skicka in en bild från andra håll.

Obs! Bilden du använder måste vara CORS Compatible. Första gången jag spelade med det kunde jag inte förstå varför min form inte fungerade när jag provade lokalt. Ta reda på mer här .

Min exempelsida innehåller tre olika användningar av denna teknik. I det första exemplet har jag en bild på min sida och jag vidarebefordrar den bilden som webbadressen för att skapa formen från.

.shape-image { shape-outside: url('noun_109069.png'); shape-image-threshold: 0.5; }

Form-bild-tröskeln definierar tröskeln för opacitet som vi borde använda, från 0 som är helt transparent till 1, vilket är helt ogenomskinligt.

Som du ser ser texten upp mot bilden.

I det andra exemplet använder jag en annan ikon och anger också egenskapen for formmarginal. Detta skapar en marginal som är böjd runt elementets bana.

.shape-image-margin { shape-outside: url('noun_109207_cc.png'); shape-image-threshold: 0.5; shape-margin: 20px; }

Du behöver inte skapa en form baserad på något på sidan. I det här sista exemplet har jag skapat en bild i Photoshop, som bara ser ut så här.

Jag ska använda det och skapa en form på något genererat innehåll för att forma min text längs en diagonal linje.

.content:before { content: ""; float: left; width: 200px; height: 200px; shape-outside: url('alpha.png'); shape-image-threshold: 0.5; }

Det innebär att du kan skapa en maskeringsbild och använda det oberoende av vad som finns på din sida.

Former från referenslådan

Du kan också ge ett värde till form-extern egenskap som är referenslådan som vi diskuterade tidigare när vi tittat på cirkelvärdet ().

Till exempel:

.circle-margin-box { shape-outside: margin-box; }

Det här är användbart där du har använt gränsen för att lägga till en rundad kant till ett element och helt enkelt vill att innehållet ska kurva runt den gränsen. Som i det här exemplet.

Webbläsarstöd

En av de fina sakerna om CSS Shapes är att eftersom de måste appliceras på en float, kan de enkelt användas som en progressiv förbättring för din webbplats.

Webbläsare som inte stöder former kommer att visa flottören som du förväntar dig, med en fyrkantig låda runt elementet. Webbläsare som stöder Formar har den form du angav. Du kan se ett bra exempel på detta på den nya sajten för Webben framåt podcast. På podcastsidorna används CSS-former för att kurva texten runt en cirkelbild av gästen.

Du kan se hur det här ser ut i Chrome till vänster. Firefox (till höger) stöder ännu inte former och så får vi rutan runt bilden.

En Firefox-användare skulle inte veta att de saknades på den lilla kontakten, och det skadar inte webbplatsens upplevelse att inte ha det - det är bara extra trevligt att stödja webbläsare.

Du kan se fullständig, aktuell webbläsarsupportinformation på Kan jag använda hemsida. I skrivande stund kräver Safari ett -webkit-prefix i egenskaperna CSS Shapes. Mina exempel använder Lea Verou Prefix Free manus.

Med Form Nivå 1 vid Kandidatrekommendationsstatus kommer vi förhoppningsvis att se den i alla moderna webbläsare snart. Det finns ingen anledning att inte börja använda det för att lägga till finjusteringar på dina mönster. Var noga med att testa i en webbläsare utan support, speciellt om du lägger över text på bilder där brist på stöd kan göra innehållet svårt att läsa.

Om du vill försöka polyfillformar i icke-stödjande webbläsare har Adobe Web Platform-teamet skapat en polyfil som är tillgänglig på github .

Resurser och vidare läsning

I den här artikeln har jag beskrivit de viktigaste sakerna du kanske behöver veta för att börja använda CSS Shapes i dina webbplatser idag. För mer information, inklusive information om vad som kommer i nivå 2-specifikationen, ta en titt på följande resurser.

Ikoner från Noun-projektet . Fox-ikonen är av Laura Olivares, Soffa ikon av Pixel.

avancerad css css former

Så här börjar du med CSS-former