Slik bruker du CSS-former i webdesign

Oppsettprinsippene - kolonner og rader, vinkler og linjer - som vi bruker til å bygge nettsteder i dag, er i stor grad påvirket av deres utskriftsarv. Og selv om nettverksimplementering på nettet blir bedre og mer polert, er weboppsett generelt uheldig sammenlignet med utskriftsmedier, særlig når det gjelder innholdsstrøm.

Magasiner og aviser har alltid hatt elegante måter å arrangere innholdsoppsett på, for eksempel innpakning av tekst rundt, eller innsiden, ikke-rektangulære former.

Multipurpose Magazine av GreenSocks

La oss undersøke hvordan CSS Shapes Modulet gir oss samme frihet på nettet.

Rask Intro til CSS Shapes

CSS Shapes gjør det mulig for webdesignere å lage mer abstrakte, geometriske layouter, utover enkle rektangler og firkanter. Spesifikasjonen gir oss nye CSS egenskaper som inkluderer form utenfor og form-margin. Nettleserstøtte er rimelig, selv om disse egenskapene for tiden bare er tilgjengelige i Chrome, Opera og Safari, med -webkit- prefiks, dermed -webkit-form utenfor.

De form utenfor Egenskapen vil føre til at inlineinnholdet vikles rundt (utenfor) etter elementkurven, i stedet for boksemodellen. I utgangspunktet var det også form inne å pakke inn innholdet i et element; tekst i et sirkulært element vil også bli formet i en sirkelform. Imidlertid har implementeringen blitt utsatt for CSS Shapes Level 2.

Fra topp til bunn: form-utvendig og form-innsiden i aksjon.

De form-margin Egenskapen setter marginen rundt etter hvilken form som bruker form utenfor.

La oss ta en titt på noen eksempler.

Opprette en form

Den enkleste måten å finne ut hvordan CSS Shapes fungerer, er sannsynligvis ved å lage en sirkel. Så, her er en div (vår sirkel), med flere avsnitt ved siden av.

Lorem ipsum ...

Her er noen grunnleggende styling, inkludert bredden og høyden på vår sirkel, den border-radius å forme elementet, og en flyte slik at avsnittet brytes rundt elementet.

.sirkel bredde: 250px; høyde: 250px; bakgrunnsfarge: # 40a977; border-radius: 50%; flyte: venstre;

Som vi ville unntatt, er avsnittene nå pakket rundt elementet. Men siden egenskapen for grense-radius ikke definerer den faktiske elementformen, danner ikke styrekastet sirkelkurven.

Hvis vi inspiserer elementet gjennom vår DevTools-nettleser, finner vi elementet er faktisk en boks. Så, selv om vår div har utseendet på en sirkel, border-radius har ikke gjort noe til faktiske form av elementet.

Legg merke til det rektangulære høydepunktet rundt elementet.

For at vårt avsnitt skal følge den sirkulære formen, må vi endre faktiske element form gjennom form utenfor eiendom; I dette tilfellet legger vi til en med sirkel() funksjon bestått som verdi.

.sirkel bredde: 250px; høyde: 250px; bakgrunnsfarge: # 40a977; border-radius: 50%; flyte: venstre; -webkit-form-utenfor: sirkel (); form-utvendig: sirkel ();

Våre avsnitt brytes nå pent rundt sirkelens omkrets.

I tillegg, hvis vi nå kontrollerer elementet gjennom DevTools, ser vi at elementet er riktig gjengitt i en krets.

Legg merke til det mørkere høydepunktet.

Med noen marginer, se hvordan det kan forbedre et enkelt oppsett:

Tilpasse sirkelen

De sirkel() funksjonen tar et par verdier for å definere radius og midtkoordinat henholdsvis: sirkel (r ved x y). Som standard er radiusverdien avledet fra elementstørrelsen; hvis elementet er 300px Bredt, for eksempel vil radius være 150px (radiusen er halvparten av sirkelens diameter).

På samme måte, x og y koordinatene måles i forhold til elementets størrelse, og de er som standard satt til 50% 50%; rett ved midten av elementet.

Sirkelen er plassert i midten av elementet.

Disse to verdiene vil komme til nytte når du vil endre størrelsen på formen, samtidig som du holder den faktiske elementstørrelsen, eller beveg formen mens du beholder elementposisjonen. I det følgende eksempelet reduserer vi sirkelradiusen til 60px og sett midtkoordinatet til 30% 70%, som skal flytte sirkelen til nederst til venstre i elementboksen.

Nåværende stykker passerer nå gjennom elementboksen følger sirkelstørrelsen. Se demonstrasjonen.

Det er verdt å merke seg at når man endrer sirkelen, må både senterkoordinat og radius defineres eksplisitt; Å legge til bare en av dem er ugyldig.

sirkel (60px ved 30% 70%) // riktig. sirkel (60px) // ugyldig. sirkel (ved 30% 70%) // ugyldig.

Shape Box Model

CSS figurer arver det samme boks modell prinsippet som elementet, men brukt utenfor selve elementets omfang. Dette tillater oss å sette elementet separat, si til border-box mens du stiller formen til padding-box. Forandre formen boks modell, legg til en av boks modell søkeord, Innholdet-box, margin-box, border-box, eller padding-box etter funksjonen.

.sirkel bredde: 250px; høyde: 250px; bakgrunnsfarge: # 40a977; border-radius: 50%; flyte: venstre; polstring: 10px; grense: 20px solid #ccc; margin: 30px; -webkit-form-utvendig: sirkel () polstring-boks; form-utvendig: sirkel () polstringskasse;

Standardboksmodellen for formen er satt til margin-box. Og i det følgende eksempelet har vi endret det til padding-box for å fortelle nettleseren om å ekskludere elementmarginen når du bestemmer formens størrelse eller spenning. Nå skal vi finne avsnittet passere gjennom grensen, og umiddelbart berøre polstring av elementet.

Den oransje firkanten er marginen, den gule firkanten er grensen, og det grønne torget er polstring,

Jeg anbefaler på det sterkeste å sjekke ut vårt gratis kurs på grunnlaget for CSS Box-modellen for mer om hvordan bokmodellen fungerer i detalj.

Opprette flere former

CSS Shapes-spesifikasjonen leveres med noen flere formfunksjoner:

ellipse (): Som navnet antyder, vil denne funksjonen skape en ellipsform. Vi kan konfigurere ellipse radius og flytte form sentrum koordinat også. Men i motsetning til sirkel() funksjon, den ellipse () funksjonen gjelder to radiusmålinger, horisontal og vertikal, derfor ellipse (100px 180px ved 10% 20%).
polygon (): Denne funksjonen gjør det mulig å lage mer komplekse former som trekanter, sekskanter, samt ikke-geometriske former. Bruk av polygon er ikke så enkelt som å lage en sirkel, men verktøyet til Polygon Converter gjør det litt mer intuitivt.

Wrapping Up

I denne opplæringen så vi på grunnleggende bruken av CSS Shapes; Vi opprettet en form, tilpasset størrelsen, posisjonen og boks modell. På tidspunktet for skrivingen er flere aspekter av CSS-former fortsatt svært grove rundt kantene, noe som sannsynligvis er grunnen til at vi ikke ser det brukt mye ennå.

Som nevnt tidligere i denne opplæringen, CSS Shapes form inne eiendom, som gjør at vi kan pakke inn og forme innhold inne i et element, har blitt satt på is.
CSS Shapes-spesifikasjonen gir en egen egenskap som heter form-box å definere formboksmodellen, selv om det for øyeblikket virker ubrukelig for alle nettlesere.
Safari krever -webkit- prefiks, understreker at denne funksjonen er eksperimentell.

Likevel, til tross for lave fremskritt og uenighet på tvers av nettlesere, ser jeg frem til CSS Shapes! Når de store nettleserne plukker opp det, kan jeg ikke vente å se noen virkelig kreative layouter på nettet!

Webdesign