Stil websiteelementer med en CSS-baggrundsgradient

Hvis du har været på internettet i mere end et par minutter, er chancerne for, at du er stødt på en CSS-gradient. CSS baggrundsegenskab kan bruges til at oprette en række forskellige stilarter, og en af ​​de mest spændende typer er, hvad den kan gøre med gradientværdien.

At vide, hvordan man designer og opretter forskellige CSS-gradienter, er et aktiv for enhver softwaredesigner eller udvikler. Fra denne artikel lærer du alt hvad du behøver at vide for at begynde at integrere CSS-gradienter i dine projekter.

Hvad er en CSS-gradient?

En CSS-gradient er i det væsentlige en kombination af to eller flere farver, der glat overgår fra den ene til den næste. Overgangstilstanden for en CSS-gradient afhænger af den anvendte gradienttype. Der er to hovedtyper af gradienter, der ofte bruges i softwaredesign: lineær og radial.

Der er dog en tredje gradient, der er mindre populær og kendt som den koniske gradient.

Syntaks for CSS-gradienter

Baggrundsbillede: gradienttype (retning, farve1, farve2);

CSS-gradienten skal tildeles CSS-egenskaben i baggrundsbillede. Gradienttypen kan være en af ​​flere; lineær-gradient, radial-gradient eller konisk-gradient. Forløbstypen efterfølges af åbning og lukning af parenteser, der indeholder overgangsretningen for forløbet samt de farver, der skal medtages i forløbet.

Relaterede: Sådan indstilles et baggrundsbillede i CSS

Eksemplet ovenfor viser to farver, men en gradient kan indeholde flere forskellige farver. Det eneste krav er, at hver farve på listen er adskilt med et komma.

Hvad er en lineær gradient?

Den lineære gradient er den mest populære CSS-gradient. Det skaber en vandret, lodret eller diagonal overgangsforløb ved hjælp af to eller flere farver.

CSS Lineært gradienteksempel

Baggrundsbillede: lineær gradient (# 00A4CCFF, # F95700FF);

Koden ovenfor producerer følgende CSS-gradient:

Der er en hovedkomponent i gradientsyntaxen, der er udeladt fra eksemplet ovenfor. Denne komponent er overgangsretningen for gradienten, og den blev udeladt, fordi standardjusteringen af ​​den lineære gradient er lodret (top-til-bund); det er den ønskede output i dette eksempel.

Koden ovenfor giver det samme resultat som den følgende kodelinje. Den eneste forskel mellem de to er retningsafsnittet for koden.

Brug af det nederste lineære gradienteksempel

Baggrundsbillede: lineær gradient (til bund, # 00A4CCFF, # F95700FF);

Som du kan se fra output opretter koden ovenfor en gradient, der starter med blå på toppen og derefter langsomt overgår til den orange i bunden. Hvis du vil vende rækkefølgen af ​​farverne, kan du blot erstatte til bund med til top og dette vil vende retningen af ​​gradienten og producere følgende output:

I lighed med den lodrette justering kan den vandrette justering af en gradient opnås ved brug af to sæt retningsord: til venstre og til højre, som producerer henholdsvis følgende output.

Diagonal lineær gradient

Det er muligt at opnå en diagonal lineær gradientovergang i enhver retning af en lineær gradient. Der er kun fire specifikke lister over nøgleord, som du har brug for at vide for at gøre dette muligt.

• Nederst til højre
• Nederst til venstre
• Øverst til højre
• Til øverst til venstre

Brug af det diagonale lineære gradienteksempel

Baggrundsbillede: lineær gradient (nederst til højre, # 00A4CCFF, # F95700FF);

Eksemplet ovenfor producerer følgende output:

Som du kan se fra output ovenfor, foretager den lineære gradient sin overgang i en diagonal retning, der bevæger sig fra øverst til venstre til den nederste højre del af gradienten.

Flerfarvet lineær gradient

En lineær gradient kan have to eller flere farver, men hvordan ser flere farver ud i en gradient? Et flerfarvet lineært gradientfarvearrangement afhænger af dets retning. De, der overgår i vandret retning, får hver ny farve til venstre eller højre for den lineære gradient afhængigt af den nøjagtige retning af den lineære gradient.

Flerfarvet lineært gradienteksempel

Baggrundsbillede: lineær gradient (til højre, # 00A4CCFF, # F95700FF, # e2e223, # 2727e2, # 19ad19);

Ovenstående kode vil producere følgende output:

Som du kan se, tilføjes hver ny farve til højre for gradienten, hvilket skaber, hvad der til sidst forvandles til en regnbue. Den samme output kan opnås i lodret retning; det specifikke farveindretning på den lineære gradient afhænger imidlertid af nøgleordet i lodret retning (til top eller bund).

Hvad er en radial gradient?

Den radiale gradient opretter en spiralgradient på to flere farver, der starter fra midten som standard. Hvor den lineære gradient frembringer en lige gradient, der flyder lodret eller vandret, producerer den radiale gradient en cirkulær gradient, der flyder fra midten til de ydre kanter.

Brug af det radiale gradienteksempel

Baggrundsbillede: radial-gradient (cirkel, # 00A4CCFF, # F95700FF);

Ovenstående kode vil producere følgende output:

Ændring af Radial Gradient Center

Som standard starter en radial gradient i midten af ​​gradienten; det er dog muligt at ændre oprindelsesstedet med introduktionen af ​​et par søgeord.

Ændring af Radial Gradient Start Position Eksempel

Baggrundsbillede: radial-gradient (cirkel øverst til højre, # 00A4CCFF, # F95700FF);

Ovenstående kode vil producere følgende output:

Som du kan se fra output ovenfor, begynder gradienten nu fra øverste højre hjørne i stedet for midten. Denne ændring er mulig på grund af medtagelsen af ​​nøgleordet øverst til højre i koden ovenfor. Følgende liste over nøgleord kan også bruges til at ændre den radiale gradients oprindelsessted:

• Øverst til venstre
• Nederst til højre
• Nederst til venstre

Flerfarvede radiale forløb

Ligesom den lineære gradient kan den radiale gradient også bruge to er flere farver, den største forskel er, at hvor den lineære gradient føjer til gradienten i en lige linje, tilføjer den radiale gradient nye farver på den ydre kant.

Flerfarvet eksempel på radial gradient

Baggrundsbillede: radial-gradient (cirkel, # 00A4CCFF, # F95700FF, # e2e223, # 2727e2, # 19ad19);

Ovenstående kode vil producere følgende output:

Tilpasning af gradienter

Indtil videre har du set, hvordan du ændrer retning og centrum for en gradient, men du har ikke set, hvordan du tilpasser en gradient. Tilpasning af en gradient lyder måske som meget arbejde, men når du først har forstået det grundlæggende ved at skabe en CSS-baggrundsforløb det næste oplagte trin er at lære at gøre dine CSS-forløb mere enestående.

Som standard optager farverne i en gradient en jævnt fordelt plads, idet hver farve glat overgår til den efter den. Så hvis to farver kombineres for at danne en gradient, vil hver farve optage halvdelen af ​​den ledige plads, mens den skifter fra den ene til den anden. Hvis tre farver kombineres, optager hver farve en tredjedel af den plads, der er tilgængelig.

Med en tilpasset gradient kan du definere mængden af ​​plads, en farve vil optage i en gradient ved eksplicit at tildele farve-stop position.

Tilpasning af et lineært gradienteksempel 1

Baggrundsbillede: lineær gradient (til højre, # 00A4CCFF, # F95700FF 30%);

Ovenstående kode vil producere følgende output:

Outputtet ovenfor viser den anden farve i den lineære gradient, der stopper ved 30% -punktet for den første farve i gradienten, i stedet for sin sædvanlige position, og fordi den anden farve også er den endelige farve i gradienten, strækker den sig naturligvis til ende.

Hvis du placerer 30% i koden ovenfor i slutningen af ​​den første farve, skal tingene blive klarere.

Tilpasning af et lineært gradienteksempel 2

Baggrundsbillede: lineær gradient (til højre, # 00A4CCFF 30%, # F95700FF);

Koden ovenfor producerer følgende output.

Outputtet ovenfor viser tydeligt den første farve i gradienten, der stopper ved 30% punktet for den anden farve i gradienten. Dette eksempel sammen med ovenstående bør hjælpe med at gøre tilpasning af farve-stop lettere for dig at forstå.

Tilpasning af en radial gradient udføres på samme måde som en lineær gradient. Det eneste, du skal gøre for at opnå de samme resultater ovenfor i en radial gradient, er at ændre gradienttype og retning.

Opret CSS-gradienter har aldrig været nemmere

Denne tutorial-artikel giver dig værktøjerne til at identificere og oprette lineære og radiale gradienter. Hvis du har nået dette punkt, lærte du, hvordan du ændrer retningen og midten af ​​en gradient. Derudover har du nu færdighederne til at tilpasse CSS-gradienter og oprette unikke baggrundsgradienter.

Men hvis du ikke ønsker at gå direkte ind i oprettelse af nye og unikke gradienter, kan du starte med at oprette nogle flotte, allerede eksisterende.

27 Stilfulde CSS-baggrund Gradienteksempler

Solide farver er det sidste år. Gradienter er inde! Men hvordan opretter du dem i CSS?

Læs Næste

Om forfatteren

Udvid for at læse hele historien