Oprettelse af linjære gradienter med tværbrowser med CSS3

01 af 04

Oprettelse af lineære gradienter med cross-browser med CSS3

Lineære gradienter

Den mest almindelige form for gradient du vil se er en lineær gradient af to farver. Dette betyder, at graden vil bevæge sig i en lige linje, der ændres gradvist fra den første farve til den anden langs den linje. Billedet på denne side viser en simpel venstre-til-højre gradient af # 999 (mørkegrå) til #fff (hvid).

Lineære gradienter er det nemmeste at definere, og har størst støtte i browsere. CSS3 lineære gradienter understøttes i Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+ og Safari 4+. Internet Explorer kan tilføje gradienter ved hjælp af en filter og støtter dem tilbage til IE 5.5. Dette er ikke CSS3, men det er en mulighed for kompatibilitet på tværs af browseren.

Når du definerer en gradient, skal du definere flere forskellige ting:

Hvilken type gradient er det-lineær eller radial
Hvor gradienten skal starte
Hvor gradienten skal stoppe
Hvilke farver er der i gradienten og hvor de skal starte og stoppe

For at definere lineære gradienter ved hjælp af CSS3 skriver du:

lineær-gradient (vinkel eller side eller hjørne, farve stop, farve stop)

Først definerer du typen af gradient med navnet lineær -gradient.

Derefter definerer du start- og stoppunkterne for gradienten på en af to måder: vinkel af linjen i grader fra 0 til 359, med 0 grader pegende lige op. Eller med funktionen "side eller hjørne", f.eks venstre, ret, bund, og top. Disse vil blive forklaret mere detaljeret på næste side. Hvis du forlader disse ud, vil gradienten flyde fra toppen til bunden af elementet.

Derefter definerer du farvestopperne. Du definerer farvestopperne med farvekoden og en valgfri procentdel. Procentdelen fortæller browseren, hvor linjen skal starte eller slutte med den farve. Standarden er at placere farverne jævnt langs linjen. Du vil lære mere om farvestop på side 3.

Så for at definere ovenstående gradient med CSS3 skriver du:
lineær gradient (venstre, # 999999 0%, #ffffff 100%);
Og for at sætte det som baggrunden for a DIV du skriver:
div {baggrundsbillede: lineær gradient (venstre, # 999999 0%, #ffffff 100%;}
Browserudvidelser til CSS3 lineære gradienter

For at få din gradient til at arbejde cross-browser, skal du bruge browser extensions til de fleste browsere og a filter til Internet Explorer 9 og lavere (faktisk 2 filtre). Alle disse har de samme elementer til at definere din gradient (bortset fra at du kun kan definere 2-farvegradienter i IE).

Microsoft-filtre og -udvidelse-Internet Explorer er den mest udfordrende at understøtte, fordi du har brug for tre forskellige linjer til at understøtte de forskellige browserversioner. For at få ovenstående grå til hvide gradient ville 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-Det -moz- udvidelse fungerer som CSS3 ejendom, bare med -moz- udvidelse. For at få ovenstående gradient for Firefox, skriv:
-moz-lineær gradient (venstre, # 999999 0%, #ffffff 100%);
Opera Extension-Det -o- udvidelse tilføjer gradienter til Opera 11.1+. For at få ovenstående gradient, skriv:
-o-lineær gradient (venstre, # 999999 0%, #ffffff 100%);
Webkit Extension-Det -webkit- udvidelse fungerer meget som CSS3 ejendommen. For at definere ovenstående gradient for Safari 5.1+ eller Chrome 10+ skriver du:
-webkit-lineær gradient (venstre, # 999999 0%, #ffffff 100%);
Der er også en ældre version af Webkit-udvidelsen, der virker med Chrome 2+ og Safari 4+. I den definerer du typen af gradient som en værdi, snarere end i ejendomsnavnet. For at få den grå til hvide gradient med denne udvidelse, skriv:
-webkit-gradient (lineær, venstre top, højre top, farve stop (0%, # 999999), farve stop (100%, # ffffff));
Fuld CSS3 lineær gradient CSS kode

For fuld understøttelse af browseren for at få den grå til hvide gradient over, skal du først inkludere en fastbackfarve til browsere, der ikke understøtter gradienter, og det sidste element skal være CSS3-stilen til browsere, der er fuldt kompatible. Så skriver du:
baggrund: # 999999;baggrund: -moz-lineær gradient (venstre, # 999999 0%, #ffffff 100%);baggrund: -webkit-gradient (lineær, venstre top, højre top, farve stop (0%, # 999999), farve stop (100%, # ffffff));baggrund: -webkit-lineær-gradient (venstre, # 999999 0%, #ffffff 100%);baggrund: -o-lineær gradient (venstre, # 999999 0%, #ffffff 100%);baggrund: -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);baggrund: lineær gradient (venstre, # 999999 0%, #ffffff 100%);
De næste sider i denne vejledning forklarer delene af en gradient mere detaljeret, og den sidste side peger på et værktøj, der er en glimrende måde at oprette CSS3-gradienter automatisk på.

Se denne lineære gradient i aktion ved brug af bare CSS.
02 af 04
Oprettelse af diagonale gradienter-Gradientens vinkel

Start- og stoppunkterne bestemmer gradientens vinkel. De fleste lineære gradienter er fra top til bund eller fra venstre til højre. Men det er muligt at bygge en gradient, der bevæger sig på en diagonal linje. Billedet på denne side viser en simpel gradient, der bevæger sig i en 45 graders vinkel på tværs af billedet fra højre mod venstre.

Vinkler til at definere gradientlinjen

Vinklen er en linje på en imaginær cirkel i midten af elementet. 0deg peger op, 90deg peger til højre, 180deg peger ned, og 270deg peger til venstre. Du kan definere en vinkel fra 0 til 359 grader.

Du skal bemærke, at i en firkant flytter en 45 graders vinkel fra øverste venstre hjørne til nederst til højre, men i et rektangel er start- og slutpunktene lidt uden for formen, som du kan se i billedet.

Den mere almindelige måde at definere en diagonal gradient på er at definere et hjørne, f.eks øverst til højre og gradienten bevæger sig fra det pågældende hjørne til det modsatte hjørne. Du kan definere startpositionen med følgende nøgleord:

top

ret

bund

venstre

centrum

Og de kan kombineres til at være mere specifikke, såsom:

øverst til højre

øverst til venstre

top center

nederst til højre

nederst til venstre

bundcenter

højre center

venstre center

Her er CSS for en gradient svarende til den afbildede, rød til hvid, der bevæger sig fra øverste højre hjørne til nederst til venstre:
baggrund: ## 901A1C;baggrundsbillede: -moz-lineær-gradient (højre top, # 901A1C 0%, # FFFFFF 100%);baggrundsbillede: -webkit-gradient (lineær, højre øverste, venstre bund, farve stop (0, # 901A1C), farve stop (1, #FFFFFF));baggrund: -webkit-lineær-gradient (højre top, # 901A1C 0%, #ffffff 100%);baggrund: -o-lineær-gradient (højre top, # 901A1C 0%, #ffffff 100%);baggrund: -ms-lineær-gradient (højre top, # 901A1C 0%, #ffffff 100%);baggrund: lineær gradient (højre top, # 901A1C 0%, #ffffff 100%);
Du har muligvis bemærket, at der ikke er nogen IE-filtre i dette eksempel. Det skyldes, at IE kun tillader to typer filtre: top til bund (standard) og venstre til højre (med GradientType = 1 kontakt).

Se denne diagonale lineære gradient i aktion ved brug af bare CSS.
03 af 04
Farve stopper

Med CSS3 lineære gradienter kan du tilføje flere farver til din gradient for at skabe endnu mere avancerede effekter. For at tilføje disse farver tilføjer du yderligere farver til slutningen af din ejendom, adskilt af kommaer. Du skal medtage hvor på linjen farverne skal starte eller slutte også.

Internet Explorer-filtre understøtter kun to farvestop, så når du opbygger denne gradient, bør du kun inkludere den første og anden farve, du vil vise.

Her er CSS for ovenstående 3-farvegradient:
baggrund: #ffffff;baggrund: -moz-lineær gradient (venstre, #ffffff 0%, # 901A1C 51%, #ffffff 100%);baggrund: -webkit-gradient (lineær, venstre top, højre top, farve stop (0%, # ffffff), farve stop (51%, # 901A1C), farve stop (100%, # ffffff));baggrund: -webkit-lineær gradient (venstre, #ffffff 0%, # 901A1C 51%, # ffffff 100%);baggrund: -o-lineær gradient (venstre, #ffffff 0%, # 901A1C 51%, # ffffff 100%);baggrund: -ms-lineær gradient (venstre, #ffffff 0%, # 901A1C 51%, # ffffff 100%);filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);baggrund: lineær gradient (venstre, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Se denne lineære gradient med tre farve stopper i aktion ved brug af bare CSS.
04 af 04
Gør bygningsgradienter lettere

Der er to steder, jeg anbefaler for at hjælpe dig med at opbygge gradienter, de har hver især fordele og ulemper, jeg har ikke fundet en gradientbygger, der gør alt endnu.

Ultimativ CSS Gradient GeneratorDenne gradientgenerator er meget populær, fordi den udfører på samme måde som gradientbyggere i programmer som Photoshop. Jeg kan også lide det, fordi det giver dig alle CSS-udvidelserne, ikke kun Webkit og Mozilla. Problemet med denne generator er, at det kun understøtter vandrette og lodrette gradienter. Hvis du vil lave diagonale gradienter, skal du gå til den anden generator, jeg anbefaler.
CSS3 Gradient GeneratorDenne generator tog mig lidt længere tid at forstå end den første, men det understøtter at ændre retningen til en diagonal.
Hvis du kender til en anden CSS Gradient Generator, som du kan lide bedre end disse, så lad os vide det.