Home-theater-designers
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 -baggrundsejendommen 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 software designer 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 jævnt overgår fra den ene til den næste. Overgangstilstanden for en CSS -gradient afhænger af den anvendte gradient. Der er to hovedtyper af gradienter, der almindeligvis bruges i softwaredesign: lineær og radial.
Der er dog en tredje type gradient, der er mindre populær og kendt som den keglegradient.
CSS gradienter syntaks
Background-image: gradient-type (direction, color1, color2);
CSS-gradienten skal tildeles CSS-egenskaben med baggrundsbillede. Gradienttypen kan være en af flere; lineær-gradient, radial-gradient eller konisk-gradient. Gradienttypen efterfølges af åbnings- og lukkebeslag, der indeholder gradientens overgangsretning, samt de farver, der skal inkluderes i gradienten.
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 overgangsgradient ved hjælp af to eller flere farver.
CSS lineært gradienteksempel
Background-image: linear-gradient(#00A4CCFF, #F95700FF);
Koden ovenfor vil producere følgende CSS -gradient:
Der er en hovedkomponent i gradientsyntaksen udeladt fra eksemplet ovenfor. Denne komponent er gradientens overgangsretning, og den blev udeladt, fordi standardjusteringen af den lineære gradient er lodret (top-til-bund); det er det ønskede output i dette eksempel.
Koden ovenfor producerer det samme resultat som den følgende kodelinje. Den eneste forskel mellem de to er retningssektionen af koden.
Brug af eksempel på bundlinjær gradient
Background-image: linear-gradient(to bottom, #00A4CCFF, #F95700FF);
Som du kan se fra outputtet, skaber koden ovenfor en gradient, der starter med blå på toppen og derefter langsomt overgår til den orange i bunden. Hvis du ville vende farvernes rækkefølge, kunne du blot erstatte til bunden med til top og dette vil vende gradientens retning og producere følgende output:
På samme måde som den lodrette justering kan den vandrette justering af en gradient opnås ved brug af to sæt retningssøgeord: til venstre og til højre , som vil producere henholdsvis følgende output.
hvordan ser man på gamle beskeder på iphone
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 søgeord, som du skal vide for at gøre dette muligt.
- Nederst til højre
- Nederst til venstre
- Øverst til højre
- Øverst til venstre
Brug af det diagonale lineære gradienteksempel
Background-image: linear-gradient(to bottom right, #00A4CCFF, #F95700FF);
Eksemplet ovenfor producerer følgende output:
Som du kan se fra outputtet ovenfor, foretager den lineære gradient sin overgang i en diagonal retning, der bevæger sig fra øverste venstre til 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 er afhængigt af dets retning. Dem, der overgår i en vandret retning, vil have hver ny farve vist til venstre eller højre for den lineære gradient, afhængigt af den præcise retning af den lineære gradient.
Flerfarvet lineært gradienteksempel
Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);
Kodelinjen ovenfor vil producere følgende output:
Som du kan se tilføjes hver ny farve til højre for forløbet, hvilket skaber det, der til sidst forvandler sig til en regnbue. Det samme output kan opnås i lodret retning; det specifikke farvearrangement på den lineære gradient afhænger imidlertid af søgeordet i lodret retning (til top eller bund).
Hvad er en radial gradient?
Radialgradienten skaber en spiralgradient på to er 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 yderkanterne.
Brug af eksempelet Radial Gradient
Background-image: radial-gradient( circle, #00A4CCFF, #F95700FF);
Kodelinjen ovenfor vil producere følgende output:
Ændring af Radial Gradient Center
Som standard starter en radial gradient i midten af gradienten; dog er det muligt at ændre udgangspunktet med introduktionen af et par søgeord.
sælge computerdele til kontanter i nærheden af mig
Ændring af eksempel på startposition for radial gradient
Background-image: radial-gradient(circle at top right, #00A4CCFF, #F95700FF);
Kodelinjen ovenfor vil producere følgende output:
Som du kan se fra outputtet over starter gradienten nu fra øverste højre hjørne i stedet for midten. Denne ændring er mulig på grund af inkluderingen af søgeordet øverst til højre i koden ovenfor. Følgende liste over søgeord kan også bruges til at ændre udgangspunktet for den radiale gradient:
- Øverst til venstre
- Nederst til højre
- Nederst til venstre
Flerfarvede radiale gradienter
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 tilføjer gradienten i en lige linje, tilføjer den radiale gradient nye farver på yderkanten.
Flerfarvet radial gradienteksempel
Background-image: radial-gradient(circle, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);
Kodelinjen ovenfor vil producere følgende output:
Tilpasning af gradienter
Hidtil har du set, hvordan du ændrer retningen og midten af en gradient, men du har ikke set, hvordan du tilpasser en gradient. Tilpasning af en gradient kan lyde som meget arbejde, men når du forstår det grundlæggende i at oprette en CSS -baggrundsgradient, er det næste oplagte trin at lære at gøre dine CSS -gradienter mere unikke.
hvordan man forbinder to kolonner i excel
Som standard optager farverne i en gradient en jævnt fordelt mængde plads, hvor hver farve jævnt overgår til den efterfølgende. Så hvis to farver kombineres til en gradient, vil hver farve optage halvdelen af den ledige plads, mens den overgår fra den ene til den anden. Hvis tre farver kombineres, vil hver farve optage en tredjedel af den ledige plads.
Med en tilpasset gradient kan du definere den mængde plads, en farve vil optage i en gradient ved eksplicit at tildele farve-stop-position .
Tilpasning af et lineært gradienteksempel 1
Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF 30%);
Kodelinjen ovenfor 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 den sædvanlige position, og fordi den anden farve også er den sidste farve i gradienten, strækker den sig naturligvis til enden .
Hvis du skulle placere de 30% i koden ovenfor i slutningen af den første farve, skulle tingene blive tydeligere.
Tilpasning af et lineært gradienteksempel 2
Background-image: linear-gradient( to right, #00A4CCFF 30%, #F95700FF );
Ovenstående kode vil producere følgende output.
Outputtet ovenfor viser klart den første farve i gradienten, der stopper ved 30% -punktet for den anden farve i gradienten. Dette eksempel sammen med ovenstående skal være med til at gøre tilpasning af farvestop lettere for dig at forstå.
Tilpasning af en radial gradient sker 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 gradienttypen og retningen.
Opret CSS -gradienter har aldrig været lettere
Denne vejledningsartikel giver dig værktøjerne til at identificere og oprette lineære og radielle 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 baggrundsforløb.
Men hvis du ikke vil gå direkte i gang med at oprette nye og unikke gradienter, kan du starte med at oprette nogle flotte allerede eksisterende.
Del Del Tweet E -mail 27 Stilfulde CSS -baggrundsgradienteksemplerSolide farver er det sidste år. Gradienter er i! Men hvordan opretter du dem i CSS?
Læs Næste Relaterede emner- Programmering
- Web-udvikling
- Webdesign
- CSS
Kadeisha Kean er en softwareudvikler i fuld stak og teknisk/teknologisk forfatter. Hun har den særlige evne til at forenkle nogle af de mest komplekse teknologiske begreber; producerer materiale, der let kan forstås af enhver nybegynder i teknologi. Hun brænder for at skrive, udvikle interessant software og rejse rundt i verden (gennem dokumentarer).
Mere fra Kadeisha KeanAbonner på vores nyhedsbrev
Tilmeld dig vores nyhedsbrev for at få tekniske tips, anmeldelser, gratis e -bøger og eksklusive tilbud!
Klik her for at abonnere