Opprette linjære gradienter med kryssbrowser med CSS3
Linjære gradienter
Den vanligste typen gradient du vil se er en lineær gradient av to farger. Dette betyr at gradienten vil bevege seg i en rett linje som endres gradvis fra den første fargen til den andre langs den linjen. Bildet på denne siden viser en enkel venstre-til-høyre gradient av # 999 (mørkegrå) til #fff (hvit).
Linjære gradienter er enkleste å definere, og har størst 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+. Internet Explorer kan legge til gradienter ved hjelp av a filter og støtter dem tilbake til IE 5.5. Dette er ikke CSS3, men det er et alternativ for kompatibilitet med nettleseren.
Når du definerer en gradient må du definere flere forskjellige ting:
- Hvilken type gradient er det?
lineærellerradial - Hvor gradienten skal starte
- Hvor gradienten skal stoppe
- Hvilke farger er i gradienten og hvor de skal starte og stoppe
For å definere lineære gradienter ved hjelp av CSS3 skriver du:
lineær-gradient (vinkel eller side eller hjørne, fargestopp, fargestopp)
- Først definerer du typen av gradient med navnet
lineær -gradient. - Deretter definerer du start- og stopppunktene for gradienten på en av to måter:
vinkelav linjen i grader fra 0 til 359, med 0 grader peker rett opp. Eller med funksjonen "side eller hjørne", for eksempelvenstre,Ikke sant,bunn, ogtopp. Disse vil bli forklart mer detaljert på neste side. Hvis du forlater disse ut, 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 skal starte eller slutte med den fargen. Standarden er å plassere fargene jevnt langs linjen. Du vil lære mer om fargestopp på side 3.
Så, for å definere ovennevnte gradient med CSS3, skriver du:
lineær gradient (venstre, # 999999 0%, #ffffff 100%);
Og for å sette det som bakgrunn av a DIV du skriver:
div {bakgrunnsbilde: lineær gradient (venstre, # 999999 0%, #ffffff 100%;} Nettleserutvidelser for CSS3 Linear Gradients
For å få gradienten til å fungere på kryssbrowser, 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-fargegradientene 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å den ovennevnte grå til hvite gradienten vil du skrive:
/ * 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 * /-m lineær gradient (venstre, # 999999 0%, #ffffff 100%);
Mozilla Extension-De -moz- forlengelse fungerer som CSS3-egenskapen, bare med -moz- forlengelse. For å få ovennevnte gradient for Firefox, skriv:
-moz-lineær gradient (venstre, # 999999 0%, #ffffff 100%);
Opera Extension-De -o- utvidelse legger gradienter til Opera 11.1+. For å få den ovennevnte gradienten, skriv:
-o-lineær gradient (venstre, # 999999 0%, #ffffff 100%);
Webkit Extension-De -webkit- utvidelsen fungerer mye som CSS3-egenskapen. For å definere ovenforstående gradient for Safari 5.1+ eller Chrome 10+ skriver du:
-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 hvilken gradient som en verdi, i stedet for 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 Code
Hvis du vil ha fullstendig kryssbrowser-støtte for å få den grå til hvite gradienten ovenfor, bør du først inkludere en fastback-farge for nettlesere som ikke støtter gradienter, og det siste elementet bør være CSS3-stilen for nettlesere som er helt kompatible. Så skriver du:
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%);
De neste sidene i denne opplæringen forklarer delene av en gradient mer detaljert, og den siste siden peker deg på et verktøy som er en utmerket måte å lage CSS3-gradienter automatisk.
Se denne lineære gradienten i handling ved å bruke bare CSS.
02 av 04Opprette diagonale gradienter-Gradientens vinkel
Start- og stopppunktene bestemmer vinkelen for gradienten. De fleste lineære gradienter 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 midten av elementet. 0deg peker opp, 90deg peker til høyre, 180 grader peker ned, og 270deg peker til venstre. Du kan definere en vinkel fra 0 til 359 grader.
Du bør merke seg at i en firkant beveger en vinkel på 45 grader fra øverste venstre hjørne nederst til høyre, men i et rektangel er start- og sluttpunktene litt utenfor formen, som du kan se på bildet.
Den mer vanlige måten å definere en diagonal gradient på er å definere et hjørne, for eksempel øverst til høyre og gradienten beveger seg fra det hjørnet til det motsatte hjørnet. Du kan definere 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 senter
- Nede til høyre
- nede til venstre
- bunnsenter
- høyre senter
- venstre senter
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-lineær-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 finnes noen IE-filtre i dette eksemplet. Det er fordi IE bare tillater to typer filtre: topp til bunn (standard) og venstre til høyre (med GradientType = 1 bytte om).
Se denne diagonale lineære gradienten i handling ved hjelp av bare CSS.
03 av 04Farge stopper
Med CSS3 lineære gradienter kan du legge til flere farger i gradienten din for å skape enda mer avanserte effekter. For å legge til disse fargene legger du til flere farger på slutten av eiendommen din, skilt med kommaer. 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 kun inkludere den første og andre fargen du vil vise.
Her er CSS for ovennevnte 3-fargegradient:
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 gang med bare CSS.
04 av 04Gjør bygningsgradienter enklere
Det er to steder jeg anbefaler for å hjelpe deg med å bygge gradienter, de har hver sin fordel og ulempe, jeg har ikke funnet en gradientbygger som gjør alt enda.
Ultimate CSS Gradient GeneratorDenne gradientgeneratoren er veldig populær fordi den utfører på lignende måte som gradientbyggere i programmer som Photoshop. Jeg liker også det fordi det gir deg alle CSS-utvidelsene, ikke bare Webkit og Mozilla. Problemet med denne generatoren er at den bare støtter horisontale og vertikale gradienter. Hvis du vil gjøre diagonale gradienter, må du gå til den andre generatoren jeg anbefaler. CSS3 Gradient GeneratorDenne generatoren tok meg litt lengre tid å forstå enn den første, men det støtter å skifte retning til en diagonal. Hvis du vet om en annen CSS Gradient Generator som du liker bedre enn disse, vennligst gi oss beskjed.
