Lage gradienter med CSS 3 - dummies

Gradienter er en favoritt effekt av grafiske designere overalt fordi gradienter gir en jevn overgang av farge. Legge til gradienter i bakgrunnen av en nettside eller til seksjoner på en side, legger til rikdom og dybde i et design.

I figuren kan du se forskjellen mellom en radial og en lineær gradient.

I tidligere versjoner av CSS, hvis du ønsket å bruke en gradient i bakgrunnen av et element, for eksempel en tag, måtte du bruke et bilde. Hvis du var smart, skapte du en grafikk på 1 pixel som var så høyt som du ønsket gradienten, og deretter satt den inn som en bakgrunn, slik at den gjentok for å fylle ut plassen. Hvis du utformet et bakgrunnsbilde godt, kan bildefilstørrelsen være liten, men begrensningene mange.

Du måtte for eksempel gjøre gradienten så høy eller høyere enn plassen du ønsket å fylle, noe som begrenset din evne til å lage fleksible sidedesigner. På samme måte var det ikke en enkel oppgave å matche et andre bakgrunnsbilde bak graden, hvis et design hadde denne typen bilde. Kort sagt, det var mulig å legge til gradienter for sideutforming, men også et ekte problem.

Skriv inn CSS 3 og designere overalt kan feire de nye gradientalternativene for å løse alle de gamle problemene samtidig. Gradienter generert med CSS 3 laste ned raskere og automatisk justere for å fylle rommet perfekt.

CSS 3 gradienter kan utformes som lineære eller radiale, og du kan bruke forskjellige fargebånd i forskjellige avstander langs kontinuumet. Alt i alt kan CSS 3 gradienter brukes i de fleste situasjoner hvor en designer ønsker å bruke en og er en betydelig forbedring for CSS.

Når du legger til en gradient i en bakgrunn - enten det er bakgrunnen til hele siden eller et element på en side, for eksempel en tag - justerer gradienten automatisk for å fylle hele rommet, med mindre du angir en størrelse. Gradienter kan også brukes i grensen til elementer og å fylle midtpunktet på en kule i en uordnet liste.

Her er den enkleste syntaksen for å lage en lineær gradient i CSS 3 for WebKit-nettlesere:

-webkit-gradient (lineær, fra () til ());

Radiale gradienter opprettes på denne måten:

-webkit-gradient (radial, [] *);

Her er to eksempler på gradienter brukt som bakgrunnsbilde:

• Følgende kode oppretter en lineær gradient med to farger:

  bakgrunnsbilde: -webkit-gradient (lineær, venstre bunn, venstre topp, farge -stopp (0, 32, #FFFFFF), fargestopp (0, 66, # 245FAB));
  

• Dette kodeeksemplet lager en radial gradient med flere farger:

  

bakgrunn: -webkit-radial-gradient (radial, midtpunkt, 0, midtpunkt, 70.5, fra (grønn) til (gul));

Her er koden som brukes til å skape gradienten i bakgrunnsområdene i kroppen, overskriftene og sidene på Jelly Rancher-nettsiden vist i figuren.

body {bakgrunnsbilde: -webkit-gradient (lineær, venstre topp, venstre bunn, fargestopp (0, blå), fargestopp (.25, # 98fc45), fargestopp (1, gjennomsiktig));}

I eksempelet kan du se at en lineær gradient ble opprettet som starter øverst og beveger seg til bunnen. Du kan variere gradienten ved å starte den øverst til venstre og slutter i nedre høyre hjørne, som vil danne gradienten langs en diagonal bane. Det er også flere fargestopp som er vist i eksemplet, som hver representerer en farge langs graden. Gradienteksemplet utvikler seg som følger:

• Begynn med fargen blå: fargestopp (0, blå).

• Bytt til heksadesimale farge # 98fc45 ved 25 prosent: fargestopp (.25, # 98fc45).

• Da blir # 98fc45 gjennomsiktig gjennom resten av gradienten til bakgrunnen er helt gjennomsiktig: fargestopp (1, gjennomsiktig).