Hvordan komme i gang med CSS Shapes

Internett har typisk vært et felt av bokser og rektangler, men en fremvoksende CSS-spesifikasjon skal endre det. I denne artikkelen vil jeg introdusere deg til CSS Shapes, forklare hva de er og kjernekonseptene du trenger for å begynne å bruke dem.

Alle eksemplene er koblet sammen på Github , slik at du kan se og laste ned kildekoden som utgangspunkt for ditt eget eksperiment.

Hva er CSS-former?

De CSS Shapes spesifikasjon beskriver geometriske former for oss i CSS. I nivå 1 av spesifikasjonen, nå ved kandidatstatus, kan former bare brukes til flytende elementer. Et eksempel er den enkleste måten å komme i gang.

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

I eksemplet ovenfor legger vi denne klassen til et bilde. Vi flyter bildet til venstre, gir det en bredde, høyde og en margin, og bruk deretter eiendomsformen -utvendig for å kurve teksten rundt sirkelen.

Se eksempel

Før du går videre, bruker du Chrome-hodet på over til http://betravis.github.io/shape-tools/ og dra Vis bokmerker bokmerke til bokmerkelinjen din.

Hvis du deretter går til min eksempelside og klikker på bokmerket, kan du se hvordan sirkelformen trekkes:

Grunnleggende former

Formen utenfor egenskapen som brukes i vårt enkle eksempel kan ta ulike verdier. De første mulighetene refereres til som "grunnformer" i spesifikasjonen. Disse grunnleggende former er funksjoner:

nedfelling ()
sirkel()
ellipse ()
polygon ()

nedfelling ()

Innstilt () -funksjonen er for å definere former på rektangulære elementer, hvilket flyter gjør for oss og i de fleste tilfeller er tilstrekkelig. Det kan være tidspunkter når tilleggskontrollen kommer til nytte.

Innstilt () -funksjonen kan overføres fire stillingsargumenter som er forskyvninger innover fra elementets kanter, pluss en kantlinje for rektangulær form, foran søkeordet 'runde'.

Innstikk (øverste høyre bunn i venstre runde radius);

for eksempel:

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

Argumentene for innspillet følger samme stenografi som margin, så hvis du vil ha et innspill på 20 piksler rundt elementet du kan bruke:

inset(10px round 50%);

I mitt eksempel har jeg brukt et bilde som har mye hvitt mellomrom under det. Hvis jeg bare flyter bildet, har jeg et stort gap under. Ved å bruke innstillingsverdien kan jeg legge inn bunnen av formen, slik at teksten kan strømme nærmere den.

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

Se eksemplet , og bruk bokstaven Vis figurer for å se formen.

sirkel()

Vi møtte sirkelens grunnleggende form i begynnelsen av denne artikkelen. Sirkelen () formverdien er fullstendig beskrevet i beskrivelsen som:

circle(r at cx cy);

Verdien r er radiusen til sirkelen, 50% er halvparten av elementets bredde. De andre to verdiene er x og y koordinater for sirkelsenteret, dette gir deg i hovedsak muligheten til å trykke sirkelen rundt.

I mitt eksempel brukte jeg:

circle(50%);

Jeg kunne også ha beskrevet dette som:

circle(50% at 50% 50%);

I min eksempelside på Github Jeg har et ikon, det har en gjennomsiktig bakgrunn og for å gjøre eksemplene tydeligere. Jeg har gitt bildet en grå bakgrunnsfarge, polstring, en kantlinje og en margin:

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

Det er satt til å flyte til venstre, og hvis vi ikke bruker noen figurer på dette bildet, ser det ut som skjermbildet nedenfor.

Jeg kan lage en enkel sirkelform:

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

Hvis jeg bruker sirkelverdien av form-inne og denne gangen endrer koordinatene. Sirkelen skyves opp og til venstre.

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

Du kan bruke absolutte eller relative verdier for koordinatene eller søkeordene som med posisjonering av bakgrunnsbilder.

På dette punktet er det verdt å ta en titt på begrepet referansekasser. Det er fire mulige referansekasser som vi kan bruke:

Innholdet-box
padding-box
border-box
margin-box

Standardreferanseboksen for sirkelen er marginalboksen.

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

Er det samme som å skrive:

shape-outside: circle(50%);

Som du forventer at marginalboksen er begrenset av elementets kantlinje, grenseboksen ved grensen, vil polstringsboksen av polstring og innholds boks bli begrenset av det faktiske innholdet.

Lese denne artikkelen for en fullstendig forklaring på hvordan referansekasser fungerer i sammenheng med CSS-former.

Hvis vi tar en titt på min eksempelside ved hjelp av bokmerke med Vis figurer, kan du se tydelig hvordan dette virker.

Det siste jeg vil vise deg med sirkel er hvordan å klippe innholdet for å følge den formen du har opprettet. Da jeg la til synlig polstring og grenser til elementet mitt, synes teksten å overlappe den. Vi kan faktisk klippe innholdet i formen ved hjelp av egenskapen klippegenskap fra CSS Masking Level 1-spesifikasjonen. Det krever for øyeblikket prefixing (se [Kan jeg bruke] [7]).

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

Som du kan se i skjermbildet ovenfor, er vårt element nå klippet for å følge kurven. Dette fungerer veldig bra for bilder, slik at du kan klippe dem slik at teksten ser ut til å flyte langs kurvene.

ellipse ()

Mange former kan bukkes rundt ved å bruke ellipsverdien, selv om de ikke er åpenbart en ellipse.

Bruke ellipse er veldig som å bruke sirkel, bortsett fra at i stedet for en verdi for radiusen, må du spesifisere x- og y-radiusene separat.

shape-outside(rx ry at cx cy);

Radiusverdiene kan være absolutte eller relative enheter og også søkeord nærmest og lengst side . Disse søkeordene er også gyldige for bruk som radius av en sirkel, selv om det er mindre nyttig i praksis.

Mitt eksempel uten bruk av form er rett og slett flytende.

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

Jeg kan bruke radius nøkkelordene:

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

Som lager en sirkel på dette elementet som de faktiske dimensjonene til bildet er firkantede.

For å tvinge en ellipse bruker jeg absolutte lengdeenheter.

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

For å skifte ellipse over endrer jeg koordinatene:

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

polygon ()

Hvis du trenger veldig fin kontroll når du tegner formen, vil polygonverdien hjelpe. Du kan angi så mange koordinater som du trenger for din form - med minst tre.

Hvert par koordinater skilles med et komma.

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

Ved å bruke bokmerkelappen Vis figurer kan du se formen.

Figurer fra et bilde

En annen måte å skape en form på er å gi et bilde som verdien for form-utvendig. Det bildet må ha en alfakanal. (Du kan finne ut mer om hvordan du lagrer bildene dine hvis du bruker Photoshop på Adobe Web Platform blogg .)

Du kan bruke et bilde som allerede finnes på siden din, eller sende inn et bilde fra andre steder.

Merk: Bildet du bruker må være CORS kompatibelt. Første gang jeg spilte med dette, kunne jeg ikke forstå hvorfor min form ikke fungerte da jeg testet lokalt. Finn ut mer her .

Min eksempelside inneholder tre forskjellige bruksområder av denne teknikken. I det første eksemplet har jeg et bilde på siden min, og jeg sender også bildet som URL for å lage formen fra.

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

Formen-bilde-terskelen definerer terskelen for ugjennomsiktighet vi skal bruke, fra 0 som er helt gjennomsiktig til 1, som er helt ugjennomsiktig.

Som du ser, kommer teksten vår rett opp mot bildet.

I det andre eksempelet bruker jeg et annet ikon og angir også form-marginalegenskapen . Dette skaper en margin som er buet rundt elementets bane.

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

Du trenger ikke å lage en form basert på noe på siden. I dette siste eksempelet har jeg laget et bilde i Photoshop, som bare ser ut som dette.

Jeg skal bruke det og lage en form på noe generert innhold for å forme teksten min langs en diagonal linje.

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

Dette betyr at du kan lage et maskeringsbilde og bruke det uavhengig av hva som er på siden din.

Figurer fra referanseboksen

Du kan også gi en verdi til form-utvendig egenskap som er referanseboksen vi diskuterte tidligere når vi så på sirkelen () -verdien.

For eksempel:

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

Dette er nyttig der du har brukt grense-radius for å legge til en avrundet kant til et element og bare at innholdet skal kurve rundt den grensen. Som i dette eksemplet.

Nettleserstøtte

En av de fine tingene om CSS Shapes er at de, som de må brukes på en flyte, enkelt kan brukes som en progressiv forbedring for nettstedet ditt.

Nettlesere som ikke støtter figurer, viser floaten som du forventer, med en firkantbar boks rundt elementet. Nettlesere som støtter figurer vil ha den formen du angav. Du kan se et godt eksempel på dette på det nye nettstedet for Weben foran podcast. På podcastsidene brukes CSS Shapes til å kurve teksten rundt et sirkulært bilde av gjesten.

Du kan se hvordan dette ser ut i Chrome til venstre. Firefox (til høyre) støtter ennå ikke Form og så får vi kvadratkassen rundt bildet.

En Firefox-bruker ville ikke vite at de manglet den lille berøringen, og det ødelegger ikke opplevelsen av nettstedet, for ikke å ha det - det er bare ekstra hyggelig å støtte nettlesere.

Du kan se full oppdatert nettleserinformasjon på Kan jeg bruke nettside. På tidspunktet for skriving krever Safari et -webkit-prefiks på egenskapene CSS Shapes. Mine eksempler bruker Lea Verou Prefiksfri manus.

Med Form Nivå 1 ved Kandidat Anbefalingsstatus vil vi forhåpentligvis se det i alle moderne nettlesere snart. Det er ingen grunn til ikke å begynne å bruke den for å legge til detaljer i designene dine. Bare vær sikker på å teste i en nettleser uten støtte, spesielt hvis du legger over tekst på bilder der mangel på støtte kan gjøre innholdet vanskelig å lese.

Hvis du vil prøve polyfillformer i ikke-støttende nettlesere, har Adobe Web Platform-teamet laget en polyfil som er tilgjengelig på GitHub .

Ressurser og videre lesing

I denne artikkelen har jeg detaljert de viktigste tingene du kanskje trenger å vite for å begynne å bruke CSS Shapes på nettstedene dine i dag. For mer informasjon, inkludert informasjon om hva som kommer i Nivå 2-spesifikasjonen, se på følgende ressurser.

Ikoner fra Noun-prosjektet . Fox-ikonet er av Laura Olivares, Sofa ikon av Pixel.

avansert css css figurer

Hvordan komme i gang med CSS-former