Hvordan lage lineære graderinger i CSS3

Opprette linjære graderinger over nettlesere med CSS3

Bildet over viser en enkel gradient fra venstre til høyre på # 999 (mørk grå) til #fff (hvit).

Lineære graderinger er lettest å definere og har mest støtte i nettlesere. CSS3 lineære gradienter støttes i Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+ og Safari 4+.

Når du definerer en gradering, må du identifisere typen—lineær eller radial—Og hvor stigningen skal stoppe og starte. Legg også til fargene på gradienten og hvor disse fargene hver for seg begynner og slutter.

For å definere lineære gradienter ved bruk av CSS3, skriv:

lineær gradient (vinkel eller side eller hjørne, fargestopp, fargestopp) 

Først definerer du typen gradering med navnet.

Deretter definerer du start- og stoppunktene for gradienten på en av to måter: linjevinkelen i grader fra 0 til 359, med 0 grader som peker rett opp. Eller med funksjonene “side eller hjørne”. Hvis du lar disse være utenfor, vil gradienten flyte fra toppen til bunnen av elementet.

Deretter definerer du fargestoppene. Du definerer fargestoppene med fargekoden og en valgfri prosentandel. Prosentandelen forteller nettleseren hvor på linjen du skal starte eller avslutte med den fargen. Standard er å plassere fargene jevnt langs linjen. Du vil lære mer om fargestopp på side 3.

Så, for å definere overgangen med CSS3, skriver du:

lineær gradient (venstre, # 999999 0%, #ffffff 100%); 

Og for å sette det som bakgrunn for en DIV skriv:

div {
bakgrunnsbilde: lineær gradient (venstre, # 999999 0%, #ffffff 100%;
} 

Nettleserutvidelser for lineære graderinger av CSS3

For å få gradienten til å fungere tvers av nettlesere, må du bruke nettleserutvidelser for de fleste nettlesere og a filter for Internet Explorer 9 og lavere (faktisk 2 filtre). Alle disse tar de samme elementene for å definere gradienten din (bortsett fra at du bare kan definere 2-fargede graderinger i IE).

Microsoft-filtre og utvidelse—Internet Explorer er den mest utfordrende å støtte, fordi du trenger tre forskjellige linjer for å støtte de forskjellige nettleserversjonene. For å få ovennevnte grå til hvite gradient skriver du:

/ * IE 5.5–7 * /
filter: progid: DXImageTransform. Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
/ * IE 8–9 * /
-ms-filter: "progid: DXImageTransform. Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1) ";
/ * IE 10 * /
-ms-lineær-gradient (venstre, # 999999 0%, #ffffff 100%); 

Mozilla Extension-De -moz- utvidelse fungerer som CSS3-egenskapen, bare med utvidelsen. For å få gradienten ovenfor for Firefox, skriv:

-moz-lineær-gradient (venstre, # 999999 0%, #ffffff 100%); 

Opera Extension-De -o- utvidelse legger til graderinger i Opera 11.1+. For å få den ovennevnte gradienten, skriv:

-o-lineær-gradient (venstre, # 999999 0%, #ffffff 100%); 

Webkit-utvidelse-De -webkit- utvidelse fungerer mye som CSS3-egenskapen. For å definere overgangen for Safari 5.1+ eller Chrome 10+, skriv:

-webkit-lineær-gradient (venstre, # 999999 0%, #ffffff 100%); 

Det er også en eldre versjon av Webkit-utvidelsen som fungerer med Chrome 2+ og Safari 4+. I den definerer du typen gradient som en verdi, snarere enn i eiendomsnavnet. For å få den grå til hvite gradienten med denne utvidelsen, skriv:

-webkit-gradient (lineær, venstre topp, høyre topp, fargestopp (0%, # 999999), fargestopp (100%, # ffffff)); 

Full CSS3 Lineær gradient CSS-kode

For full støtte for tvers av nettlesere for å få den grå-hvite gradienten over, bør du først ta med en tilbakefall i fargen for nettlesere som ikke støtter graderinger, og det siste elementet skal være CSS3-stilen for nettlesere som er fullstendig kompatibel. Så du skriver:

bakgrunn: # 999999;
bakgrunn: -moz-lineær-gradient (venstre, # 999999 0%, #ffffff 100%);
bakgrunn: -webkit-gradient (lineær, venstre topp, høyre topp, fargestopp (0%, # 999999), fargestopp (100%, # ffffff));
bakgrunn: -webkit-lineær-gradient (venstre, # 999999 0%, #ffffff 100%);
bakgrunn: -o-lineær-gradient (venstre, # 999999 0%, #ffffff 100%);
bakgrunn: -ms-lineær-gradient (venstre, # 999999 0%, #ffffff 100%);
filter: progid: DXImageTransform. Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
-ms-filter: progid: DXImageTransform. Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
bakgrunn: lineær gradient (venstre, # 999999 0%, #ffffff 100%); 

Opprette diagonale stigninger - vinklingen til gradienten

Start- og stoppunktene bestemmer vinkelen til stigningen. De fleste lineære stigninger er fra topp til bunn eller fra venstre til høyre. Men det er mulig å bygge en gradient som beveger seg på en diagonal linje. Bildet på denne siden viser en enkel gradient som beveger seg i en 45-graders vinkel over bildet fra høyre til venstre.

Vinkler for å definere gradientlinjen

Vinkelen er en linje på en imaginær sirkel i sentrum av elementet. Et mål på 0deg peker opp, 90 grader peker til høyre, 180deg peker ned, og 270deg poeng igjen. Bruk et hvilket som helst vinkelmål.

I en firkant beveger en 45 graders vinkel seg fra øverste venstre hjørne til nederst til høyre, men i et rektangel er start- og sluttpunktene litt utenfor formen.

Den vanligste måten å definere en diagonal gradient er å definere et hjørne, for eksempel øverst til høyre og gradienten beveger seg fra det hjørnet til det motsatte hjørnet. Definer startposisjonen med følgende nøkkelord:

• topp
• Ikke sant
• bunn
• venstre
• senter

Og de kan kombineres for å være mer spesifikke, for eksempel:

• øverst til høyre
• øverst til venstre
• topp sentrum
• Nede til høyre
• nede til venstre
• nederste sentrum
• høyre sentrum
• venstre sentrum

Her er CSS for en gradient som ligner den på bildet, rød til hvit som beveger seg fra øverste høyre hjørne til nederst til venstre:

bakgrunn: ## 901A1C;
bakgrunnsbilde: -moz-lineær-gradient (høyre topp, # 901A1C 0%, # FFFFFF 100%);
bakgrunnsbilde: -webkit-gradient (lineær, høyre topp, venstre bunn, fargestopp (0, # 901A1C), fargestopp (1, #FFFFFF));
bakgrunn: -webkit-linear-gradient (høyre topp, # 901A1C 0%, #ffffff 100%);
bakgrunn: -o-lineær-gradient (høyre topp, # 901A1C 0%, #ffffff 100%);
bakgrunn: -ms-lineær-gradient (høyre topp, # 901A1C 0%, #ffffff 100%);
bakgrunn: lineær gradient (høyre topp, # 901A1C 0%, #ffffff 100%); 

Du har kanskje lagt merke til at det ikke er noen IE-filtre i dette eksemplet. Det er fordi IE bare tillater to typer filtre: topp til bunn (standard) og venstre mot høyre (med GradientType = 1 bytte om).

Farge stopper

Med CSS3 lineære gradienter, legg til flere farger i gradienten din for å skape enda bedre effekter. For å legge til disse fargene, sett inn flere farger på slutten av eiendommen, atskilt med komma. Du bør inkludere hvor på linjen fargene skal starte eller slutte også.

Internet Explorer-filtre støtter bare to fargestopp, så når du bygger denne gradienten, bør du bare ta med den første og andre fargen du vil vise.

Her er CSS for ovennevnte trefargesgradient:

bakgrunn: #ffffff;
bakgrunn: -moz-lineær-gradient (venstre, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
bakgrunn: -webkit-gradient (lineær, venstre topp, høyre topp, fargestopp (0%, # ffffff), fargestopp (51%, # 901A1C), fargestopp (100%, # ffffff));
bakgrunn: -webkit-lineær-gradient (venstre, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
bakgrunn: -o-lineær-gradient (venstre, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
bakgrunn: -ms-lineær-gradient (venstre, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
filter: progid: DXImageTransform. Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
bakgrunn: lineær gradient (venstre, #ffffff 0%, # 901A1C 51%, # ffffff 100%); 

Se denne lineære gradienten med tre fargestopp i aksjon ved bruk av bare CSS.