Share
I den forrige opplæringen tok vi et glimt ved å lage CSS-former, slik at vi kunne definere den sanne formen til et element. Vi berørte det grunnleggende; Lag en sirkel og pakk inn et par linjer med tekst rundt den. La oss nå utforske mer komplekse former, noe som gjør sidelayoutene rikere og mindre dyrebare.
Utover enkle former som sirkler og rektangler kan vi også lage polygoner; former som består av flere (typisk fem eller flere) sider, for eksempel en femkant eller en sekskant. For å lage en, bruker vi CSS polygon () funksjon som tar flere kommaseparerte verdier som definerer formkoordinatene:
Accentsconagua
.form float: left; bakgrunnsstørrelse: inneholde; bakgrunn-gjentak: ikke-gjenta; margin: 30px; bredde: 265px; høyde: 265px; form-margin: 20px; .pentagon bakgrunnsbilde: url ('... /img/pentagon.svg'); form-utvendig: polygon (32px 126px, 163px 32px, 293px 127px, 244px 282px, 82px 281px); Med ovennevnte kode har vi lagt til fem koordinater, og danner dermed en femkantet form. Hvis du legger til et annet koordinat til funksjonen, vil formen bli til en sekskant, en til en heptagon, en annen for en ottekant, og så videre.
Å lage en polygonform manuelt er ikke så lett som å lage en sirkel eller en ellipse, spesielt hvis polygonen er kompleks og innebærer dusinvis av koordinater. Heldigvis er det et praktisk verktøy som gjør at CSS Shapes blir mer intuitive.
CSS Shapes Editor er en Chrome-utvidelse. Når du har installert den, legger den til en ny fane som heter figurer i DevTools under Elements fanen, i linje med de andre underfanene (Styles, Datamaskin, etc.)
De figurer fanen inneholder a form utenfor eiendom sammen med et pluss + logg for å hjelpe oss med å legge til CSS Shape-funksjoner. La oss velge polygon () og elementet på siden, så kan vi begynne å tegne formen rett i nettleseren, akkurat som et grafikkprogram.
Når vi tegner, vil nettleserutvidelsen oppdatere polygonfunksjonen med de respektive koordinatene for tegningen som er tegnet, samtidig som den legges til som en inline-stil til elementet. Når du er ferdig, kopier du den genererte koden og lim den inn i stilarket.
Genererte polygonkoordinaterVed å bruke denne samme teknikken kan vi enkelt tegne og bruke noen form eller form på vår nettside, for eksempel:
Bilde fra Slik legger du til drama til en regnfull scene med Adobe PhotoshopEn annen mulig verdi vi kan bruke i form utenfor propertyis the url () funksjon; Den samme funksjonen som vi bruker andre steder i CSS for å legge til et bakgrunnsbilde. I dette tilfellet url () funksjon gjør det mulig form utenfor Egenskap for å definere en elementform basert på bildet.
Du kan velge å bruke url () funksjon i stedet for polygon () når du har et spesielt komplisert grafikk, med mange kurver og hjørner, og du vil at innholdet ditt skal vikle rundt det jevnt. Eller når det handler om brukergenerert innhold der definering av formen kan være vanskelig.
Vi skal bruke denne macaw papegøyen fra Unsplash. Først må du opprette en versjon med gjennomsiktighet, for eksempel:
Formen på vår macaw papegøyeDet opprinnelige papegøyebildet legges til beholderen som et bakgrunnsbilde:
.container background-repeat: no-repeat; bakgrunnsbilde: url ('... /img/parrot.png'); For selve formen legger vi det til et annet element i containeren, og denne gangen bruker vi en annen CSS Shape-egenskap som heter form-bilde-terskel.
.form form-margin: 15px; form-utvendig: url ('... /img/parrot-shape.png'); form-bilde-terskel: 0; Denne bestemte egenskapen setter terskelen for minimal gjennomsiktighet som definerer bildeformen; det tar et tall mellom 0 til 1 som verdien. Så hvis du har litt gjennomsiktig bilde, vil du kanskje sette den på 0.8 eller 0.5. Vi har satt vår verdi til 0 siden området rundt papegøyeformen er helt gjennomsiktig.
Resultatet skal se ut som:
Nettleserstøtte for CSS-former er anstendig; men ikke forvent mye fra Firefox, Internet, Explorer eller Edge. Også, svar på Stephens spørsmål i den forrige opplæringen, har vi flere alternativer.
"Dette er kult, men ekte spørsmål: hva er fallbacken for IE / FF? Det virker som å gå all-in med en form layout ville ende opp på noen rare steder for mange brukere. "- Stephen Bateman
Først kan vi bruke Modernizr. Modernizr er et pålitelig JavaScript-bibliotek for leserfunksjonstesting. Sørg for at du har tatt med CSS figurer og Legg til CSS klasser alternativ når du laster ned biblioteket. Deretter kan du angi layoutformatene når CSS Shape ikke støttes, som følger:
/ ** * Når nettleseren ikke støtter "CSS Shape". * / .no-shapes. shape shape-outside: polygon (); / ** * Stiler når nettleseren støtter "CSS Shape". * / .former.shape
Hvis innlasting Modernizr virker for mye, siden du bare trenger å teste om nettleseren har CSS aktivert, kan du legge til følgende JavaScript-linjer.
hvis ('undefined' === typeof document.querySelector ('.form'). style.shapteOutside) document.body.classList.add ('no-css-shape'); Hver eiendom i CSS kommer med tilsvarende under JavaScript Style-objektet, som gjør at vi kan legge stil dynamisk gjennom JavaScript. Denne koden registrerer om nettleseren har shapeOutside metode, da det ikke er tilfelle, legger vi til no-css-form klasse som vi kan bruke til å legge til fallback stiler.
.form form-utvendig: polygon (); .no-former. shape
Til slutt kan vi bruke CSS @Brukerstøtte syntaks i stilarket, for eksempel.
@supports (form-outside: circle ()) .shape shape-outside: circle ();
Det er opp til deg å bestemme hvilken tilnærming som passer best for prosjektet.
En flott ting om CSS Shapes er at det har en naturlig nedgang. Ikke tenk på det. Har en firkant. http://t.co/u9D6y6Apfc pic.twitter.com/mfg8BFTMgP
- Jen Simmons (@ jensimmons) 11. februar 2015
I denne opplæringen oppdaget vi hvordan du bruker polygon () Fungerer i CSS Shape og lærte hvordan vi kan tegne polygoner enkelt ved hjelp av en Chrome-utvidelse. Vi lærte også å utnytte et bilde for å tegne figurer for oss; spesielt nyttig med altfor komplekse former. Til slutt, til tross for CSS Shapes rimelig nettleserstøtte, snakket vi om å bruke grasiøse alternativer for ikke-støttede nettlesere.
