Radial Gradient Oppskrifter

0
21

Radial graderinger er ganske dang kule. Det er utrolig vi kan male på bakgrunn av et element med dem så lett. Enkelt er et relativt begrep om. Det er sikkert lettere enn du trenger å opprette en grafisk i programvare fra tredjepart å bruke som bakgrunn, og syntaksen er svært learnable. Men det er heller ikke så lett å huske på hvis du ikke bruker det ofte, og det er mer komplisert enn linear-gradient().

Jeg tenkte jeg skulle sette sammen en side med referanse eksempler, så hvis du vet hva du trenger, men glem syntaksen, det er lett å finne som starter koden eksempel her.

Sentrert Utbrudd

Den enkleste mulige syntaks steder den første fargen i sentrum av element og den andre fargen på utsiden, og det er at:

Se Penn Radial Gradient – Sentrert av Chris Coyier (@chriscoyier) på CodePen.

Som vil strekke gradient i en ellipse på en ikke-square element om. Hvis du ikke liker det, kan du tvinge formen inn i en sirkel, som det andre eksempelet her viser:

Se Penn Radial Gradient – Circle vs Ellipse ved Chris Coyier (@chriscoyier) på CodePen.

Du kan også kontrollere størrelsen ved bokstavelig talt å si hvor stor sirkel/ellipse bør være (den endelige fargen vil fortsatt strekke seg for å dekke element) av:

  • Ved å bruke et nøkkelord nærmeste-side, lengst-side, nærmeste hjørne, lengst-hjørne
  • Eksplisitt sier som radial-gradient(sirkel 100px, …)
  • Ved å bruke farge-stopper som radial-gradient(#56ab2f, #a8e063 150px)

Se Penn Radial Gradient – Dimensjonering av Chris Coyier (@chriscoyier) på CodePen.

Her er noen av at ting er i bruk:

Se Penn Bruk av Radial Graderinger av Chris Coyier (@chriscoyier) på CodePen.

Se Pen Lyser tekst av Chris Coyier (@chriscoyier) på CodePen.

Plassering

I tillegg til å kontrollere størrelsen og formen på gradient, den andre store triks for å vite med radial graderinger er at du kan plassere sentrum av dem.

Dette er en av svakhetene, finner jeg, med gradient generatorer. De hjelpe deg med å velge farger og farge stopper og sånt, men de vanligvis lettbåt på lokalisering ting.

Dette er en vakker gradient tool, men ikke hjelp med plassering eller størrelse. Noen av dem som gjør det hjelpe litt med posisjonering (se “Ekspert” innstillinger), men ikke utsette alle muligheter.

Sentrum av en radial gradient trenger ikke å være i sentrum! Du kan For eksempel plassere center i øverste venstre som dette:

.element {
bakgrunn: radial-gradient(
øverst til venstre,
var(–lys), var(–mørk) /* ved hjelp av variabler bare for moro! */
)
}

Her er alle fire hjørner:

Se Penn Plassert Radial Graderinger av Chris Coyier (@chriscoyier) på CodePen.

Du kan også være veldig spesielt posisjonert. Her er et eksempel på en gradient plassert nøyaktig 195px fra venstre langs bunnen av elementet. Det har også en bestemt størrelse, men ellers har den standard ellipse form:

.element {
bakgrunn: radial-gradient(
150px 40px på 195px bunnen,
#666, #222
);
}

Se Penn Spesielt posisjonert gradient av Chris Coyier (@chriscoyier) på CodePen.

En annen liten ting å vite er at du kan bruke gjennomsiktige i gradienter å utsette fargen bak hvis det er nødvendig, eller delvis transparente farger som rgba(255, 255, 255, 0.5) til å gjøre det samme på en fargelagt farge stopp.

Også, radial graderinger kan brukes med flere bakgrunner, å bruke flere av dem til en enkelt element, selv overlappende!

.element {
bakgrunn:
radial-gradient(
sirkelen øverst til venstre,
rgba(255, 255, 255, 0.5),
gjennomsiktig 100px
),
radial-gradient(
sirkelen øverst til høyre,
rgba(255, 255, 255, 0.5),
gjennomsiktig 100px
),
radial-gradient(
nederst til venstre,
rgba(255, 0, 255, 0.5),
gjennomsiktig 400px
),
radial-gradient(
nederst til høyre,
rgba(255, 100, 100, 0.5),
gjennomsiktig 400px
);
}

Se Penn Flere Graderinger av Chris Coyier (@chriscoyier) på CodePen.

For å markere ideen om at midten av gradienten kan være hvor som helst, her er en gradient som følger musen:

Se Penn Radial Gradient Flytte Med Musen ved å Leo Sammarco (@lsammarco) på CodePen.

Ressurser

Folk har en tendens til å tenke på nettleseren støtte, og rettmessig så, men ikke tenk for mye på det i dette tilfellet. Vi er på ganske mye over hele linja støtte selv uten noen prefikser.

  • Det er også gjenta-linear-gradient() og her Ana Tudor blir i noen detalj og bruke tilfeller.
  • Trenger du noen farger som kan gå pent sammen i en gradient? uiGradients er fint.
  • MDN på radial-gradient
  • Se vår komplette guide til alle graderinger her!

OK bye!

Se Penn CSS Sunset Sunrise av Marty Saetre (@msaetre) på CodePen.