Lag Gradienter med CSS 3

July 26  by Eliza

Gradienter er en favoritt effekt av grafiske designere overalt fordi gradienter skape en myk overgang av farge. Legge gradienter til bakgrunnen av en webside eller §§ innenfor en side legger fylde og dybde til et design.

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

Lag Gradienter med CSS 3


I tidligere versjoner av CSS, hvis du ønsket å bruke en gradient i bakgrunnen av et element, for eksempel en <div> tag, du måtte bruke et bilde. Hvis du var flink, du opprettet en 1-pixel-wide grafikk som var så høye som du ønsket gradient og deretter settes det som bakgrunn, slik at det gjentas for å fylle plassen. Hvis du har designet et bakgrunnsbilde godt, kunne bildefilstørrelsen være liten, men begrensningene mange.

For eksempel, måtte du gjøre gradient like høy eller høyere enn den plassen du ønsket å fylle, som begrenset din evne til å skape fleksible sidedesign. Tilsvarende matchende en annen bakgrunnsbilde bak gradient, hvis et design hadde denne type bilde, var ingen enkel oppgave. Kort sagt, legge gradienter til sidedesign var mulig, men også en ekte problemfri.

Tast CSS 3 og designere overalt kan feire de nye graderingsalternativer for å løse alle de gamle problemene på en gang. Gradienter generert med CSS 3 nedlasting raskere og automatisk justere for å fylle plassen perfekt.

CSS 3 gradienter kan utformes som lineær, eller radial, og du kan bruke forskjellige band av farge på forskjellig avstand langs kontinuum. Alt i alt, kan CSS 3 gradienter brukes i de fleste situasjoner der en designer ønsker å bruke ett og er en betydelig forbedring i CSS.

Når du legger til en gradient til en bakgrunn - enten det er på bakgrunn av hele siden eller et element på en side, for eksempel en <div> tag - graderingen justerer automatisk å fylle hele plassen med mindre du angir en størrelse. Gradienter kan også brukes i grensen mellom elementene, og for å fylle i sentrum av en kule i en ikke-sorterte liste.

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

-webkit-gradient (lineær, <point1>, <poeng2>, fra (<farge>), til (<farge>));

Radial gradienter er opprettet på denne måten:

-webkit-gradient (radial, <punkt>, <radius>, <punkt>, <radius> [, <stopp>] *) <farge>;

Her er to eksempler på gradienter brukes som bakgrunnsbilde:

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

    background-image: -webkit-gradient (
    lineær,
    venstre bunnen,
    venstre topp,
    farge-stop (0,32, #FFFFFF),
    farge-stop (0,66, # 245FAB)
    );

  • Denne koden eksemplet oppretter en radial gradient med flere farger:

    Lag Gradienter med CSS 3

bakgrunn: -webkit-radial-gradient (radial, senter sentrum, 0, senter sentrum, 70,5, fra (grønn), til (gul));

Her er koden som brukes til å lage gradient i bakgrunnen områder av kroppen, overskrifter, og replikker i Jelly Rancher nettsiden vist i figuren.

body {background-image: -webkit-gradient (lineær, venstre øverst, venstre bunn, farge-stop (0, blå), farge-stop (.25, # 98fc45), farge-stop (1, gjennomsiktig)); }

I eksemplet kan du se at en lineær gradient ble opprettet som starter på toppen og går til bunns. Du kan variere gradient ved å starte den i øvre venstre hjørne og endte på nedre høyre hjørne, noe som ville danne gradient langs en diagonal bane. Det er også flere farge stopper som er vist i eksempelet, som hver representerer en farge langs gradienten. Gradienten eksempel skrider frem som følger:

  • Begynn med fargen blå: farge-stop (0, blå).
  • Endre til den heksadesimale farge # 98fc45 på 25 prosent: farge-stop (.25, # 98fc45).
  • Deretter # 98fc45 blir gjennomsiktig gjennom resten av gradient inntil bakgrunnen er helt gjennomsiktig: farge-stop (1, gjennomsiktig).