CSS3 Linjære gradienter [CSS3 Tips]
gradient er en flott farge funksjon tillegg i CSS3. I stedet for å bare legge til en enkelt farge, kan vi nå legge til flere fargekombinasjoner i en deklarasjonsblokk uten å stole på bilder, noe som kan redusere HTTP-forespørselen på nettstedet vårt slik at nettstedet laster raskere.
Hvis du har spilt rundt med gradienter i CSS3, er du sannsynligvis kjent med de to metodene: radial og lineær gradient. Dagens innlegg vil være om sistnevnte.
Opprette gradienter
Som spesifikasjonen sier gradienter i CSS3 er et bilde, har det ingen spesiell egenskap som andre nye funksjoner tillegg, så det er erklært ved hjelp av bakgrunnsbilde eiendom i stedet.
Hvis vi ser på komplett syntaks for gradient, ser det litt ut overstuffed, noe som kan føre til forvirring for noen mennesker.
div bakgrunnsbilde: -webkit-lineær-gradient (topp, # FF5A00 0%, # FFAE00 100%); bakgrunnsbilde: -moz-lineær-gradient (topp, # FF5A00 0%, # FFAE00 100%); bakgrunnsbilde: -ms-lineær gradient (topp, # FF5A00 0%, # FFAE00 100%); bakgrunnsbilde: -o-lineær gradient (topp, # FF5A00 0%, # FFAE00 100%); bakgrunnsbilde: lineær gradient (topp, # FF5A00 0%, # FFAE00 100%);
Så la oss grave inn i hver del av syntaksen en etter en for å gjøre ting klarere.
Først og fremst er lineær gradient deklarert med lineær-gradient () funksjon. Funksjonen har tre hovedverdier. Den første verdien definerer gradientutgangsposisjonen. Du kan bruke et beskrivende søkeord, som topp for å starte gradienten som strømmer fra topp;
div bakgrunnsbilde: lineær gradient (topp, # FF5A00, # FFAE00);
Utsnittet ovenfor er den offisielle versjonen fra W3C for å lage gradienter. Det er faktisk enklere og ganske selvforklarende, og det vil også skape følgende gradient.
Du kan også bruke bunn å gjøre det motsatte, ellers Ikke sant og venstre.
Vi kan også lage en diagonal gradient ved hjelp av vinkelgrad som gradientutgangsposisjonen. Her er et eksempel:
div bakgrunnsbilde: lineær gradient (45deg, # FF5A00, # FFAE00);
Utsnittet ovenfor vil opprette følgende fargegradient:
Den andre verdien av funksjonen vil fortelle første farge informasjon og dens stopp posisjon som er oppgitt i prosent. Stoppposisjonen er faktisk valgfri; nettleseren er smart nok til å bestemme riktig posisjon, så når vi ikke angir den første fargens stopp, vil nettleseren ta 0% som standard.
Og den neste verdien er andre farge kombinasjon. Det virker som den forrige verdien, bare hvis den siste fargen er brukt, og vi angav ikke stopp posisjon, en verdi på 100% vil bli tatt som standard. Nå, la oss se på eksemplet nedenfor:
div bakgrunnsbilde: lineær gradient (topp, # FF5A00 0%, # FFAE00 100%);
Utsnittet ovenfor vil skape en gradient som det vi så tidligere (ingen forskjell), men nå angir vi fargestoppposisjonen;
La oss nå endre fargestopp, og denne gangen vil vi spesifisere 50% for den første fargen og 51% for den andre fargen, og la oss se hvordan det viser seg;
div bakgrunnsbilde: lineær gradient (topp, # FF5A00 50%, # FFAE00 51%);
åpenhet
Opprette åpenhet i gradient er også mulig. For å skape effekten må vi oversette fargen hex inn i RGBA modus og senk alfakanalen.
div bakgrunnsbilde: lineær gradient (topp, rgba (255,90,0,0,2), rgb (255,174,0,0,2));
Utsnittet ovenfor vil senke fargestyrken med 20%, og gradienten vil vise seg slik:
Flere farger
Skulle du ønske flere farger skal legges til, legg du bare til fargene ved siden av en annen med en kommaseparator og la nettleseren avgjøre hver fargestoppposisjon.
div bakgrunnsbilde: lineær gradient (topp, rød, oransje, gul, grønn, blå, indigo, fiolett);
Utsnittet ovenfor vil opprette følgende regnbue.
Nettleserkompatibilitet
Dessverre, på tidspunktet for denne skrivingen, har alle nåværende nettlesere ennå ikke å støtte standardsyntaxen. De trenger fortsatt leverandørens prefiks (-webkit-, -moz-, -ms- og -o-). Så derfor er den komplette syntaksen som følger:
div bakgrunnsbilde: -webkit-lineær-gradient (topp, # FF5A00 0%, # FFAE00 100%); bakgrunnsbilde: -moz-lineær-gradient (topp, # FF5A00 0%, # FFAE00 100%); bakgrunnsbilde: -ms-lineær gradient (topp, # FF5A00 0%, # FFAE00 100%); bakgrunnsbilde: -o-lineær gradient (topp, # FF5A00 0%, # FFAE00 100%); bakgrunnsbilde: lineær gradient (topp, # FF5A00 0%, # FFAE00 100%);
På den annen side er Internet Explorer, spesielt versjon 9 og lavere, langt fra standarden. Graden i IE9 og nedenfor er erklært med filter, så hvis vi ønsker å legge til gradient på disse nettleserne, må vi skrive noe slikt;
div filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # FF5A00, endColorstr = # FFAE00);
De filter har sine begrensninger: for det første tillater det ikke mer enn tre farger lagt til, og å skape gjennomsiktighetseffekten er også litt vanskelig - det tillater ikke RGBA, men IE filter bruker #ARGB;
div filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # 33FF5A00, endColorstr = # 33FFAE00);
Her er et verktøy for å hjelpe deg med å konvertere RGBA til #ARGB.
- Demo
- Last ned kilde
Skriver syntaksen raskere
Som du kan se ovenfor, for å opprettholde gradientkompatibiliteten på tvers av nettlesere, må vi legge til fem flere kodelinjer som er ineffektive.
Det er mange måter vi kan gjøre for å forenkle oppgaven; slik som å bruke Prefix-Free, Prefixr, LESS eller Sass for å kompilere kodene, men fremfor alt anbefaler vi at du bruker dette verktøyet, ColorZilla Gradient. Dette verktøyet vil ganske enkelt generere alle nødvendige koder for gradienter å jobbe i alle nettlesere.
Endelige ord
I dag har vi diskutert ganske mye om å skape gradienter, vi har sett på hver del av syntaksen, skaper gjennomsiktige effekter og opprettholder nettleserens kompatibilitet. Så, på dette tidspunkt håper vi at du allerede har en bedre forståelse om emnet.
Det er fortsatt mange ting vi planlegger å utforske på CSS3 Gradienter i våre fremtidige innlegg, så hold deg til Hongkiat.com. Til slutt, takk for at du leser dette innlegget, vi håper du likte det.
Videre lesning
- Bullet Proof Cross Browser RGBA Bakgrunner - Lea Verou
- CSS3 Image - W3.org
- Når kan jeg bruke CSS3 Gradients - CanIUse.com
