Kort fortalt
- Farvestop i en gradient er de punkter langs gradienten, hvor en bestemt farve nås, skrevet som en farve efterfulgt af en position som
#7c3aed 40%. - Stop uden positioner fordeles jævnt, hvilket sjældent er det mest naturlige valg.
- Et color hint er en enlig procentværdi mellem to stop, der flytter midtpunktet i deres overgang uden at tilføje en farve.
- To stop i samme position skaber en skarp kant, og det er sådan, striber og skarpe bånd laves i CSS.
- Flere mellemliggende stop, der følger en easingkurve, fjerner den synlige kant, hvor en lineær overgang begynder og slutter.
På denne side
Farvestop i gradienter er de punkter, hvor en gradient når en bestemt farve. I CSS er hvert stop en farve og en valgfri position, som #7c3aed 40%, og browseren blander i en lige linje mellem nabostop. Hvor du placerer dem, afgør næsten alt: om en overgang føles glat eller brat, om én farve dominerer, og om øjet ser en søm, hvor en overgang begynder. At flytte stop er ofte en større forbedring end at skifte farver.
Sådan virker farvestop i gradienter
En gradientlinje løber fra 0 procent til 100 procent. Hvert stop fastgør en farve til et punkt på linjen. Udelader du positionerne, fordeler browseren stoppene jævnt, så tre farver lander på 0, 50 og 100 procent. Mellem hvert par ændrer farven sig i et konstant tempo. Hele syntaksen er dokumenteret i MDNs reference om linear-gradient().
#1e3a8a, #f472b6Hvad der sker
#1e3a8a 20%, #f472b6 80%Hvad der sker
#1e3a8a, 30%, #f472b6Hvad der sker
#1e3a8a 50%, #f472b6 50%Hvad der sker
#1e3a8a 0 40%, #f472b6 40% 100%Hvad der sker
#1e3a8a 10px, #f472b6 200pxHvad der sker
Hvorfor jævnt fordelte stop ser kunstige ud
Rigtigt lys ændrer sig sjældent i et jævnt tempo. En solnedgang er for det meste én farve med et smalt bånd af forandring nær horisonten; en skygge er for det meste mellemtone med et kort fald ved kanten. Jævn fordeling giver hver farve samme andel, hvilket læses som et diagram. Bestem, hvilken farve der fører, og lad den fylde det meste af pladsen.
Color hints: flyt midtpunktet
Et color hint er en nøgen procentværdi placeret mellem to stop. Det tilføjer ikke en farve; det flytter det punkt, hvor overgangen er præcis halvvejs. Et hint på 20 procent betyder, at farven når sit midtpunkt tidligt, så den anden farve kommer hurtigt og så bliver hængende. Hints er den billigste måde at få en gradient med to farver til at føles mindre mekanisk.
Hårde stop til striber og bånd
Når to stop deler en position, er der ingen afstand at blande hen over, så farven skifter øjeblikkeligt. Det er sådan, striber, delte baggrunde, statuslinjer og flag tegnes med intet andet end en gradient. Syntaksen med dobbelt position, farve start slut, gør det kortere at skrive. Gentagne gradienter tager den samme idé og gentager den, som beskrevet i gentagne lineære gradienter.
Blødt fordelte stop: fjern sømmen
En lineær overgang har en synlig start og slutning. Lad en mørk scrim tone ud til gennemsigtig over et foto, og du kan ofte se en linje, hvor overgangen begynder, fordi forandringstempoet springer fra nul til fuld fart. Flere mellemliggende stop placeret langs en easingkurve løser det: farven begynder at ændre sig langsomt, tager fart og falder så til ro. Det er især nyttigt til overlays bag tekst og til gennemsigtige gradienter.
/* Linear: a visible edge where the fade starts */
.scrim-linear {
background: linear-gradient(180deg, rgba(10, 12, 20, 0) 40%, rgba(10, 12, 20, 0.8) 100%);
}
/* Eased: stops follow an ease in out curve, no edge */
.scrim-eased {
background: linear-gradient(180deg,
rgba(10, 12, 20, 0) 40%,
rgba(10, 12, 20, 0.02) 46%,
rgba(10, 12, 20, 0.08) 52%,
rgba(10, 12, 20, 0.18) 58%,
rgba(10, 12, 20, 0.32) 66%,
rgba(10, 12, 20, 0.48) 74%,
rgba(10, 12, 20, 0.62) 82%,
rgba(10, 12, 20, 0.73) 91%,
rgba(10, 12, 20, 0.8) 100%);
}Placering af stop: en praktisk metode
- 1
Vælg den førende farve
Giv den 50 til 70 procent af linjen. Den sætter stemningen.
- 2
Placér skiftet, hvor øjet skal hen
Sæt det hurtigste farveskift nær fokuspunktet, ikke automatisk i midten.
- 3
Tilføj hints, før du tilføjer farver
Føles en overgang forkert, så prøv først at flytte dens midtpunkt. Ekstra farver tilføjer kompleksitet.
- 4
Tjek midtpunkterne
Se på farven halvvejs mellem hvert par. Er den grå, så tilføj en bro, eller bland i OKLCH, som forklaret i interpolation i gradienter.
- 5
Gør lange overgange bløde
For alt, der toner ud til gennemsigtig eller til en flad farve, tilføjer du mellemliggende stop, så der ikke er nogen søm.
Undgå
- Hver farve får en lige stor andel
- En ny farve tilføjet for at løse hvert problem
- Lineære overgange til gennemsigtig bag tekst
- Hårde stop, hvor du mente bløde overgange
Gør
- Én førende farve, de andre kommer sent
- Color hints til at forskyde en overgang
- Blødt fordelte stop til scrims og overgange
- Hårde stop kun til striber og bånd
Vil du se stop i deres enkleste form, gennemgår CSS linear gradients hele syntaksen, og typer af gradienter viser, hvordan stop opfører sig i radiale og koniske gradienter. I Gradiently klarer en Mark sin egen blanding og sit eget lys i alle størrelser, så du kan designe med det samme og bruge tiden på ordene.
Spørgsmål, folk stiller
Hvad er et farvestop i en gradient?
Et punkt langs en gradient, hvor en bestemt farve nås, skrevet i CSS som en farve med en valgfri position, som #7c3aed 40%.
Hvad sker der, hvis jeg ikke giver stoppene en position?
Browseren fordeler dem jævnt fra 0 til 100 procent. Tre farver lander på 0, 50 og 100 procent.
Hvad er et color hint i en CSS-gradient?
En enlig procentværdi mellem to stop, som #4c1d95, 25%, #f9a8d4. Den flytter overgangens halvvejspunkt uden at tilføje en farve.
Hvordan laver jeg en skarp linje i en CSS-gradient?
Giv to stop samme position, for eksempel #0f172a 50%, #f8fafc 50%, eller brug syntaksen med dobbelt position #0f172a 0 50%, #f8fafc 50% 100%.
Hvordan får jeg en gradient til at tone glat ud til gennemsigtig?
Tilføj flere mellemliggende stop, hvis opacitet følger en ease in out-kurve. En enkel overgang med to stop viser ofte en linje, hvor den begynder.
Skrevet af Gradiently
Holdet bag Gradiently, et designværktøj bygget om Marks: levende gradienter, der får alt, du designer, til at ligne dig.
Se vores profil