CSS3 Lineær Gradienter [CSS3 Tips]
gradient er en god farve funktion tilføjelse i CSS3. I stedet for kun at tilføje en enkelt farve, kan vi nu føje flere farvekombinationer i en declareringsblok uden at stole på billeder, hvilket kan reducere HTTP-anmodningen på vores hjemmeside, så webstedet kan læses hurtigere.
Hvis du har spillet rundt med gradienter i CSS3, er du nok bekendt med de to metoder: radial og lineær gradient. Dagens post vil være om sidstnævnte.
Oprettelse af gradienter
Som specifikationen siger gradienter i CSS3 er et billede, har det ingen særlig egenskab som andre nye funktioner, så det erklæres ved hjælp af baggrundsbillede ejendom i stedet.
Hvis vi kigger på den komplette syntaks for gradient, ser det lidt ud overstuffed, som kan føre til forvirring for nogle mennesker.
div background-image: -webkit-lineær-gradient (top, # FF5A00 0%, # FFAE00 100%); baggrundsbillede: -moz-lineær-gradient (top, # FF5A00 0%, # FFAE00 100%); baggrundsbillede: -ms-lineær gradient (top, # FF5A00 0%, # FFAE00 100%); baggrundsbillede: -o-lineær gradient (top, # FF5A00 0%, # FFAE00 100%); baggrundsbilde: lineær gradient (top, # FF5A00 0%, # FFAE00 100%);
Så lad os grave i hver del af syntaxen en efter en for at gøre tingene mere klare.
Først og fremmest er lineær gradient deklareret med lineær-gradient () fungere. Funktionen har tre primære værdier. Den første værdi definerer gradientens startposition. Du kan bruge et beskrivende søgeord, som f.eks top for at starte gradienten, der strømmer fra top;
div baggrundsbillede: lineær gradient (top, # FF5A00, # FFAE00);
Udsnittet ovenfor er den officielle version fra W3C for at skabe gradienter. Det er faktisk enklere og ret selvforklarende, og det vil også skabe følgende gradient.
Du kan også bruge bund at gøre det modsatte, ellers ret og venstre.
Vi kan også oprette en diagonal gradient ved hjælp af vinkelgrad som gradient startposition. Her er et eksempel:
div baggrundsbillede: lineær gradient (45deg, # FF5A00, # FFAE00);
Udsnittet ovenfor vil oprette følgende farvegradient:
Den anden værdi af funktionen fortæller første farve information og dens stop position som er angivet i procent. Stoppositionen er faktisk valgfri; browseren er klog nok til at bestemme den rigtige position, så når vi ikke angiver den første farves stop, vil browseren tage 0% som standard.
Og den næste værdi er den anden farve kombination. Det virker som den foregående værdi, kun hvis det er den sidste farve, der blev anvendt, og vi har ikke angivet stop position, en værdi af 100% vil blive taget som standard. Lad os nu se på nedenstående eksempel:
div baggrundsbillede: lineær gradient (top, # FF5A00 0%, # FFAE00 100%);
Udsnittet ovenfor vil skabe en gradient som det vi så tidligere (ingen forskel) men nu angiver vi farvestoppositionen;
Lad os nu ændre farve stop, og denne gang vil vi angive 50% for den første farve og 51% for den anden farve, og lad os se, hvordan det viser sig;
div baggrundsbillede: lineær gradient (top, # FF5A00 50%, # FFAE00 51%);
Gennemsigtighed
Oprettelse gennemsigtighed i gradient er også muligt. For at skabe effekten skal vi oversætte farven hex ind i RGBA tilstand og sænk alfakanalen.
div baggrundsbillede: lineær gradient (top, rgba (255,90,0,0,2), rgb (255,174,0,0,2));
Udsnittet ovenfor vil sænke farveintensiteten med 20%, og gradienten bliver som sådan:
Flere farver
Hvis du vil have flere farver til at tilføje, skal du blot tilføje farverne ved siden af en anden med en kommaseparator og lade browseren bestemme hver farve stopposition.
div baggrundsbillede: lineær gradient (top, rød, orange, gul, grøn, blå, indigo, violet);
Udsnittet ovenfor vil oprette følgende regnbue.
Browser Kompatibilitet
Desværre har alle nuværende browsere endnu ikke understøttet standardsyntaxen på tidspunktet for denne skrivning. De har stadig brug for sælgerens præfiks (-webKit-, -Moz-, -Frk- og -o-). Så derfor er den komplette syntaks vist som denne:
div background-image: -webkit-lineær-gradient (top, # FF5A00 0%, # FFAE00 100%); baggrundsbillede: -moz-lineær-gradient (top, # FF5A00 0%, # FFAE00 100%); baggrundsbillede: -ms-lineær gradient (top, # FF5A00 0%, # FFAE00 100%); baggrundsbillede: -o-lineær gradient (top, # FF5A00 0%, # FFAE00 100%); baggrundsbilde: lineær gradient (top, # FF5A00 0%, # FFAE00 100%);
På den anden side er Internet Explorer, specifikt version 9 og lavere, langt fra standarden. Graden i IE9 og nedenfor erklæres med filter, så hvis vi vil tilføje gradient på disse browsere, skal vi skrive noget som dette;
div filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # FF5A00, endColorstr = # FFAE00);
Det filter har sine begrænsninger: for det første tillader det ikke mere end tre farver tilføjet, og at skabe gennemsigtighedseffekten er også lidt vanskelig - det tillader ikke RGBA, men IE filter anvendelser #ARGB;
div filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # 33FF5A00, endColorstr = # 33FFAE00);
Her er et værktøj til at hjælpe dig med at konvertere RGBA til #ARGB.
- Demo
- Download kilde
Skrive syntaksen hurtigere
Som du kan se ovenfor, skal vi for at opretholde gradientkompatibiliteten på tværs af browsere tilføje yderligere fem koder, der er ineffektive.
Der er mange måder, vi kan gøre for at forenkle opgaven; f.eks. ved at bruge Prefix-Free, Prefixr, LESS eller Sass til at hjælpe med at kompilere koderne, men frem for alt anbefaler vi at bruge dette værktøj, ColorZilla Gradient. Dette værktøj vil simpelthen generere alle de nødvendige koder for gradienterne til at arbejde i alle browsere.
Endelige Ord
I dag har vi diskuteret en hel del om at skabe gradienter, vi har undersøgt hver del af syntaxen, skabt gennemsigtige effekter og opretholder browser kompatibilitet. Så på nuværende tidspunkt håber vi, at du allerede har en bedre forståelse om emnet.
Der er stadig mange ting, vi planlægger at udforske CSS3 Gradienter i vores kommende stillinger, så hold dig til Hongkiat.com. Endelig tak fordi du læser dette indlæg, vi håber du har haft det godt.
Yderligere læsning
- Bullet Proof Cross Browser RGBA Backgrounds - Lea Verou
- CSS3 Image - W3.org
- Hvornår kan jeg bruge CSS3 Gradients - CanIUse.com
