Hvordan man bruger CSS3-gradienter - dummier

En CSS3-gradient (som er en blanding mellem to eller flere farver) kan være en god baggrund. Tidligere ville udviklere lave en gradient ved at opbygge en tynd gradientstrimmel i et billedredigeringsprogram, og derefter bruge gentagelses-x eller gentag-y-reglerne for at få det mindre billede til at replikere på tværs af siden. Dette var en flot teknik, men det var ikke frygteligt fleksibelt, og kun relativt enkle lineære gradienter var mulige.

CSS3 har tilføjet en bemærkelsesværdig gradientregel, der gør gradienter indbyggede gennem CSS. Når denne teknik er fuldt vedtaget, gør det gradvis lettere at arbejde med.

CSS3 understøtter to hovedtyper af gradienter: lineær og radial. En lineær gradient ændrer farver langs en retlinie, og en radial gradient udstråler udad fra et midtpunkt.

Gradientmekanismen har været en af ​​de langsommere dele af CSS, der skal standardiseres og vedtages, så den ændrer sig stadig, men det ser ud til at browserne endelig sætter sig på en standard. Desværre er de leverandørspecifikke præfikser nødvendige for øjeblikket.

Sådan opbygges en simpel gradient

Den enkleste gradient er vist i boks 1. Det varierer fra venstre mod højre, starter med rødt og slutter med hvidt.

# box1 {baggrundsbillede: lineær gradient (venstre, rød, hvid); baggrundsbillede: -moz-lineær-gradient (venstre, rød, hvid); baggrundsbillede: -webkit-lineær-gradient (venstre, rød, hvid);}

Sådan bygger du en simpel lineær gradient:

1. Definer vælgeren.

   En gradient er defineret i CSS, og du skal bruge nogen af ​​dine standard CSS-selektorer til at bestemme hvilket element du vil tilføje gradienten til.

2. Brug baggrundsbilledreglen.

   En gradient er en speciel form for billede. Du kan bruge baggrundsbilledreglen til at anvende en gradient til baggrunden for ethvert element, herunder hele kropet på siden.

3. Indtast lineær-gradientfunktionen.

   Et par CSS-elementer kræver parentes, fordi de teknisk set er funktioner. Skelnen betyder ikke lige nu, men du skal indarbejde parenteserne, når du bruger denne type værdi. Linjærgradientteknikken er en funktion.

4. Bestem den retning, gradienten vil flyde.

   Du kan lave en gradientstrøm i hvilken retning du vil inde i elementet. Indikerer venstre, får elementet at strømme fra venstre mod højre. Du kan bruge til at flyde fra top til bund eller øverst til venstre for at gå fra øverste venstre til nederste højre. Brug en kombination af øverste, venstre, nederste og højre. Du kan også angive en vinkel i grader som vist i det næste eksempel.

5. Angiv en startfarve.

   Brug et af standardfarveværktøjerne (farve navne, hex farver, rgb () / rgba () eller hsl ()) for at bestemme begyndelsesfarven.

6. Angiv en endefarve.

   Den sidst angivne farve vil være slutkursens farve. Graden flyder lige fra begyndelsen til slutningen af ​​farve jævnt.

7. Gentag med browserudvidelser.

   Du skal tilføje varianter til de specifikke browsere. Du skal lave en ny version af baggrundsbilledreglen for hver større leverandør.

Sådan laver du en mere interessant gradient

Som du ser på boks 2, vil du se en mere kompleks gradient, der viser flere farver og en interessant vinkel.

# box2 {baggrundsbillede: lineær gradient (75deg, rød, hvid 33%, hvid 66%, blå); baggrundsbilde: -moz-lineær-gradient (75deg, rød, hvid 33%, hvid 66%, blå); baggrundsbillede: -webkit-lineær-gradient (75deg, rød, hvid 33%, hvid 66%, blå);}

Sådan tilføjer du mere pizazz til dine gradienter.

1. Brug en vinkel for retning.

   I stedet for at angive din gradientretning med standard øverste / venstre søgeord, kan du angive en startvinkel. Vinkler måles matematisk i grader, hvor 0 kommer fra højre og 90 kommer fra top-down. Du skal angive graden måling med dig, så 75 grader er skrevet som 75deg.

2. Tilføj så mange farver som du ønsker.

   En gradient kan have et hvilket som helst antal farver i det. Hver ændring i farver kaldes et farvestop . Eksemplet viser tre forskellige farver.

3. Bestem, hvor farven stopper, ske.

   Som standard er farverne fordelt jævnt langs gradienten. Hvis du vil, kan du flytte en hvilken som helst farve, der vises overalt på den gradient du ønsker. Farvestoppestederne er angivet med procentdele. Det er ikke nødvendigt at tilføje en placering til det første og sidste farve stop, da de antages at være 0% og 100%.

4. Opret et farvebånd ved at give to stop af samme farve.

   Boks 2 indeholder et bånd af hvidt. For at få denne effekt blev der produceret to farvestopper med hvid, en på 33% og den anden ved 66%. Dette bryder gradienten groft i tredjedele.

5. Sæt to farver på samme sted for en abrupt farveændring.

   Hvis du vil have en abrupt farveændring, skal du blot sætte to forskellige farver i samme procentdel.

6. Gentag for alle browsere.

   Igen skal du overveje de forskellige browsere, indtil denne teknik bliver mere standardiseret.

Sådan opbygges en radial gradient

CSS3 understøtter en anden gradienttype kaldet radialgradient . Grundidéen er den samme, undtagen i stedet for at følge en lige linje som en lineær gradient, synes en radial gradient at strømme fra et centralt punkt i elementet og udstråle udad.

Den grundlæggende radiale gradient vist i boks 3 er oprettet med denne CSS kode:

# box3 {baggrundsbillede: radial-gradient (hvid, blå); baggrundsbillede: -moz-radial-gradient (hvid, blå); baggrundsbillede: -webkit-radial-gradient (hvid, blå);}

Som den kan se, skabes den grundlæggende radiale gradient meget som en lineær gradient, medmindre den bruger den radiale gradientfunktion i stedet for den lineære- gradient funktion.

Radiale gradienter har mange muligheder, hvilket gør dem ret lovende, men browsersupporten til disse forskellige standarder er ret spotty. Boks 4 har en radial gradient med tre farver:

# box4 {baggrundsbillede: radial-gradient (rød, hvid, blå); baggrundsbillede: -moz-radial-gradient (rød, hvid, blå); Baggrundsbillede: -webkit-radial-gradient (rød, hvid, blå);}

Det er også muligt at ændre formen af ​​gradienten fra cirkel til ellipse, for at ændre midten af ​​gradienten til et andet punkt inde i element, og for at angive farvestop. Du skal kontrollere de nuværende specifikationer for at se, hvordan disse ting er færdige, da de stadig er helt eksperimentelle.