CSS conic gradient: hjul, lagkagediagrammer og glans

En CSS conic gradient fejer farve rundt om et midtpunkt, som en urviser fejer rundt om skiven. Hvor en lineær gradient skifter langs en linje, og en radial gradient skifter udad fra midten, skifter conic-gradient() med vinklen. Den starter øverst, løber med uret og bruges overalt, hvor CSS tager et billede. Det gør den til det naturlige værktøj til farvehjul, lagkagediagrammer, indlæsningsringe og de vinklede højlys i børstet metal.

Vælger du mellem gradienttyper til et design frem for at lære syntaksen, er gradienttyper og designguiden til koniske gradienter bedre udgangspunkter.

Syntaksen for conic-gradient()

/*               start angle   centre        stops */
conic-gradient(from 90deg at 30% 50%, #0ea5e9, #6366f1, #0ea5e9)

/* stops as angles or as percentages of the turn */
conic-gradient(#f59e0b 0deg 90deg, #1e293b 90deg)
conic-gradient(#f59e0b 0% 25%, #1e293b 25%)

Vinkler løber med uret fra toppen: 90deg er klokken tre, 180deg er klokken seks. Den fulde definition står på MDN’s side om conic-gradient(). Understøttelsen har i årevis været universel i nuværende Chrome, Edge, Safari og Firefox, så du behøver ingen præfikser.

Sådan roterer og flytter du fejningen

from roterer hele gradienten, hvilket er praktisk, når sømmen mellem første og sidste farve ellers ville ligge øverst. at flytter centrum. Flytter du det til et hjørne, bliver hjulet til en vifte af stråler, og flytter du det helt uden for boksen, får du en blød, vinklet vask, der slet ikke ligner et hjul.

Lagkage- og donutdiagrammer i CSS

Giv hvert udsnit en start og en slutning, og lad hvert starte, hvor det forrige sluttede. At skrive 0 som den anden stopposition er en genvej: en position, der er mindre end den forrige, sættes til den, så den nye farve starter præcis, hvor den sidste sluttede. Rund elementet med border-radius: 50%, og skær et hul med en radial maske, så bliver lagkagen til en donut.

.pie {
  width: 12rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(
    #6366f1 0 40%,   /* 40% */
    #22d3ee 0 65%,   /* 25% */
    #f59e0b 0 85%,   /* 20% */
    #e2e8f0 0        /* the rest, 15% */
  );
}

.donut {
  /* same background as .pie, then a hole */
  mask: radial-gradient(farthest-side, transparent 58%, #000 59%);
}

Hårde kanter i koniske gradienter kan se en anelse takkede ud langs udsnitslinjerne i nogle browsere. Generer det dig, så lad en brøkdel af en grad ligge mellem stoppene, som #6366f1 0 39.8%, #22d3ee 40.2% 65%, så kanten får et hår af blanding.

Farvehjul med farvetoneinterpolation

Et farvehjul har normalt brug for seks eller syv stop. Med interpolationsmetoder kan du bede browseren om selv at rejse rundt om farvetonecirklen. longer hue tager den lange vej rundt mellem to farvetoner, og når begge stop er den samme farve, er den lange vej hele cirklen, så to røde giver et helt spektrum.

.wheel {
  border-radius: 50%;
  background: conic-gradient(in hsl longer hue, #ff0000, #ff0000);
}

Metallisk glans og højlys

Ægte børstet metal og polerede skiver fanger lys i vinklede bånd, hvilket er præcis det, en conic gradient tegner. Skift mellem nogle få lyse og mørke grå toner med ujævn afstand, så læses fladen som metal. Lagt med lav opacity oven på en farve giver det samme trick glans til knapper og kort. Se gradientknapper for et gennemarbejdet eksempel.

Gentagende koniske gradienter til mønstre

repeating-conic-gradient() gentager sin stopliste rundt om omdrejningen. Korte stop med hårde kanter giver stjernesprængninger. Sammen med background-size bliver et tofarvet kvartmønster til et skakternet mønster, som ellers er akavet at tegne med gradienter. Mere i CSS-mønstre.

.checkerboard {
  background: repeating-conic-gradient(#e2e8f0 0 25%, #ffffff 0 50%) 0 0 / 32px 32px;
}