Sådan kommer du i gang med CSS Shapes

Internettet har typisk været et sted for kasser og rektangler, men en fremskreden CSS-specifikation vil ændre det. I denne artikel vil jeg introducere dig til CSS Shapes, forklare hvad de er og de grundlæggende begreber du skal bruge til at begynde at bruge dem.

Alle eksemplerne er forbundet med Github , så du kan se og downloade kildekoden som udgangspunkt for dit eget eksperiment.

Hvad er CSS-former?

Det CSS Shapes specifikation beskriver geometriske figurer for os i CSS. På niveau 1 i specifikationen, nu ved kandidatrekommendationsstatus, kan former kun anvendes til flydende elementer. Et eksempel er den nemmeste måde at komme i gang med.

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

I ovenstående eksempel tilføjer vi denne klasse til et billede. Vi flyder billedet tilbage, giver det en bredde, højde og en margen, og brug derefter ejendomsformen - uden for at kurve teksten rundt om cirklen.

Se eksempel

Før du går videre, skal du bruge Chrome-hovedet på over til http://betravis.github.io/shape-tools/ og træk Vis bogmærker til din bogmærkebjælke.

Hvis du så går til min eksempelside og klikker på bogmærket, kan du se, hvordan cirkelformen er tegnet:

Grundlæggende former

Den form-udvendige egenskab, der anvendes i vores enkle eksempel, kan tage forskellige værdier. De første muligheder betegnes som "grundlæggende former" i specifikationen. Disse grundlæggende former er funktioner:

inset ()
cirkel()
ellipse ()
polygon ()

inset ()

Indgangen () -funktionen er til at definere former på rektangulære elementer, hvilket flyde gør for os og i de fleste tilfælde er tilstrækkeligt. Der kan være tidspunkter, hvor den ekstra kontrol kommer i brugbar.

Indtastningsfunktionen () kan overføres fire positionsargumenter, som er forskydninger indad fra elementets kanter plus en grænseradius for den rektangulære form, forud for søgeordet 'runde'.

indsats (øverste højre nederste venstre runde radius);

for eksempel:

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

Argumentets argumenter følger samme stenografi som margen, så hvis du vil have et input på 20 pixels rundt om det element, du kunne bruge:

inset(10px round 50%);

I mit eksempel har jeg brugt et billede der har meget hvidt rum under det. Hvis jeg bare flyder billedet, har jeg et stort hul nedenunder. Ved at bruge inputværdien kan jeg indsætte bunden af formen, så teksten kan strømme tættere på den.

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

Se eksemplet , og brug formularen Vis figurer til at se formen.

cirkel()

Vi mødte cirkelens grundlæggende form i begyndelsen af denne artikel. Formularværdien for cirkel () er beskrevet i beskrivelsen som:

circle(r at cx cy);

Værdien r er cirklens radius, idet 50% er halvdelen af elementets bredde. De to andre værdier er x- og y-koordinater for cirkelcentret, dette giver dig i det væsentlige mulighed for at skubbe cirklen rundt.

I mit eksempel brugte jeg:

circle(50%);

Jeg kunne også have beskrevet dette som:

circle(50% at 50% 50%);

I mit eksempel side på Github Jeg har et ikon, det har en gennemsigtig baggrund og for at gøre eksemplerne klarere. Jeg har givet billedet en grå baggrundsfarve, polstring, en kant og en margen:

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

Det er sat til at flyde til venstre, og hvis vi ikke anvender nogen figurer på dette billede, ser det ud som skærmbilledet nedenfor.

Jeg kan skabe en simpel cirkelform:

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

Hvis jeg bruger cirkelværdien af form-inde og denne gang ændrer koordinaterne. Cirklen skubbes op og til venstre.

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

Du kan bruge absolutte eller relative værdier for koordinaterne eller søgeordene som med positionering af baggrundsbilleder.

På dette tidspunkt er det værd at tage et kig på begrebet referencekasser. Der er fire mulige referencebokse, som vi kan bruge:

indhold-box
padding-box
border-box
margin-box

Standardreferenceboksen for cirklen er marginalboksen.

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

Er det samme som at skrive:

shape-outside: circle(50%);

Som du ville forvente, at marginalboksen er begrænset af elementets margen, grænseoverskridelse ved grænsen, vil polstringskassen af polstring og indholds boks blive begrænset af det faktiske indhold.

Læs denne artikel for en fuldstændig forklaring på, hvordan referencebokse virker i sammenhæng med CSS Shapes.

Hvis vi kigger på min eksempelside ved hjælp af Show Shapes bookmarklet, kan du tydeligt se, hvordan dette virker.

Det sidste, jeg vil vise dig med cirkel, er, hvordan du klipper indholdet for at følge den form, du har oprettet. Da jeg tilføjede synlige polstring og grænser til mit element, synes vores tekst at overlappe det. Vi kan faktisk klippe indholdet af formen ved hjælp af klipbaneegenskaben fra CSS Masking Level 1-specifikationen. Det kræver for øjeblikket prefixering (se [Kan jeg bruge] [7]).

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

Som du kan se i ovenstående skærmbillede, er vores element nu klippet for at følge kurven. Dette fungerer rigtig godt for billeder, så du kan klippe dem, så teksten ser ud til at flyde langs kurverne.

ellipse ()

Mange former kan bukkes rundt ved at bruge ellipsværdien, selvom de ikke er en ellipse.

Brug af ellipse er meget som at bruge cirkel, bortset fra at i stedet for en værdi for radiusen, skal du angive x- og y-radiussen separat.

shape-outside(rx ry at cx cy);

Radiusværdierne kan være absolutte eller relative enheder og også søgeord nærmeste side og fjerneste side . Disse søgeord er også gyldige til brug som en cirkels radius, selvom det er mindre nyttigt i praksis.

Mit eksempel uden nogen form anvendt er simpelthen floated.

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

Jeg kan bruge radius søgeord:

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

Som skaber en cirkel på dette element, da de faktiske dimensioner af billedet er firkantede.

For at tvinge en ellipse bruger jeg absolutte længdeenheder.

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

For at skifte ellipse over ændrer jeg koordinaterne:

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

polygon ()

Hvis du har brug for rigtig fin kontrol, når du tegner din form, vil polygonværdien hjælpe. Du kan angive så mange koordinater som du har brug for til din form - med mindst tre.

Hvert par koordinater er adskilt af et komma.

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

Ved hjælp af Show Shapes bookmarklet kan du se formen.

Former fra et billede

En anden måde at skabe en form på er at give et billede som værdien for form udenfor. Det billede skal have en alfakanal. (Du kan finde ud af mere om, hvordan du gemmer dine billeder, hvis du bruger Photoshop på Adobe Web Platform blog .)

Du kan bruge et billede allerede på din side eller sende et billede fra andre steder.

Bemærk: Billedet du bruger skal være CORS kompatibelt. Første gang jeg spillede med dette kunne jeg ikke forstå, hvorfor min form ikke fungerede, da jeg testede lokalt. Få mere at vide her .

Mit eksempelside indeholder tre forskellige anvendelser af denne teknik. I det første eksempel har jeg et billede på min side, og jeg sender også dette billede som URL'en for at oprette formen fra.

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

Formen-billedgrænsen definerer tærskelværdien af opacitet, som vi skal anvende, fra 0, som er fuldt gennemsigtig til 1, hvilket er helt uigennemsigtigt.

Som du kan se, kommer vores tekst lige op imod billedet.

I det andet eksempel bruger jeg et andet ikon og angiver også form-marginalegenskaben . Dette skaber en margen buet omkring elementets bane.

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

Du behøver ikke at oprette en form baseret på noget på siden. I dette sidste eksempel har jeg lavet et billede i Photoshop, som bare ser ud som dette.

Jeg skal bruge det og skabe en form på noget genereret indhold for at forme min tekst langs en diagonal linje.

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

Det betyder, at du kan oprette et maskeringsbillede og bruge det uafhængigt af, hvad der er på din side.

Former fra referenceboksen

Du kan også give en værdi til form-udvendig egenskab, som er den referencerække, vi diskuterede tidligere, når vi kigger på cirkelværdien ().

For eksempel:

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

Dette er nyttigt, hvor du har brugt grænseradius for at tilføje en afrundet kant til et element og blot vil have indholdet til at kurve omkring den grænse. Som i dette eksempel.

Browser support

En af de gode ting om CSS Shapes er, at de, som de skal anvendes på en float, nemt kan bruges som en progressiv forbedring til dit websted.

Browsere, der ikke understøtter figurer, viser float som du ville forvente med en firkantet kasse rundt om elementet. Browsere, der understøtter Formularer, vil have den form, du har angivet. Du kan se et godt eksempel på dette på det nye websted for Weben fremad podcast. På podcastsiderne bruges CSS Shapes til at kurve teksten omkring et cirkulært billede af gæsten.

Du kan se, hvordan dette ser ud i Chrome til venstre. Firefox (til højre) understøtter endnu ikke figurer, og så får vi kvadratkassen rundt om billedet.

En Firefox-bruger ville ikke vide, at de manglede det lille tryk, og det beskadiger ikke oplevelsen af webstedet for ikke at have det - det er bare ekstra godt i at understøtte browsere.

Du kan se de fulde opdaterede browsersupportoplysninger på Kan jeg bruge internet side. På tidspunktet for skrivning kræver Safari et -webkit-prefix på CSS Shapes-egenskaberne. Mine eksempler bruger Lea Verou's Prefix Free manuskript.

Med Form Niveau 1 ved Kandidat Anbefaling Status vil vi forhåbentlig se det i alle moderne browsere snart. Der er ingen grund til ikke at begynde at bruge det til at tilføje efterbehandling til dine designs. Bare vær sikker på at teste i en browser uden support, især hvis du overlejrer tekst på billeder, hvor manglende support kan gøre indholdet svært at læse.

Hvis du vil prøve polyfillede former i ikke-understøttende browsere, har Adobe Web Platform-teamet oprettet en polyfil, der er tilgængelig på Github .

Ressourcer og videre læsning

I denne artikel har jeg beskrevet de vigtigste ting, du måske skal vide for at begynde at bruge CSS Shapes på dine websteder i dag. For mere information, herunder oplysninger om, hvad der kommer i niveau 2-specifikationen, kig på følgende ressourcer.

Ikoner fra Noun-projektet . Fox-ikon er af Laura Olivares, Sofa ikon af Pixel.

avanceret css css figurer