Gradienter og grafiske lag

Tre slags gradienter

En gradient er et CSS-billede, som browseren beregner. Den kan vise både glidende overgange og skarpt adskilte farvefelter:

• linear-gradient(): langs en retning, fx en bjælke.
• radial-gradient(): ud fra et centrum, fx en blød maske.
• conic-gradient(): rundt om et centrum, fx en procent-ring.

Skarpe stop og masker

Når to stop mødes, får du en skarp kant. Et efterfølgende stop på 0 flyttes frem til det foregående stops position:

.gradient-progress {
  --percent: 70%;
  background: linear-gradient(90deg, royalblue var(--percent), gainsboro 0);
}

En gradient som baggrund tegner farver. En gradient som mask-image styrer synligheden: for en almindelig gradientmaske viser uigennemsigtige områder indholdet, og transparente områder skjuler det. Det er maskens alpha, ikke om farven er sort eller hvid, der er afgørende her.

I denne øvelse er gradienten selve farvefyldningen, mens en gentaget SVG-stjerne fungerer som maske. Forholdet mellem num og max bestemmer fyldningen; masken giver den form som stjerner. Steps viser overgangen fra et almindeligt baggrundsbillede til en maske.

Gitter fra temaopgaven

Et lille gradientbillede kan gentages som fliser. I øvelsen formes først et hjørne med en konisk gradient; background-size bestemmer derefter afstanden mellem gitterlinjerne. En radial gradient ovenpå toner gitteret ned mod kanterne.

Prøv: Ændr kun flisens størrelse, og forklar, hvorfor du får flere eller færre felter. Slå derefter det øverste baggrundslag fra. Første billede i listen ligger øverst.

Det sidste trin bruger alpha(), som er en nyere farvefunktion. Et alternativ til netop den transparente farve er oklch(from var(--pattern-color) l c h / 0.35).

Fra cirkel til ring

En conic-gradient() kan vise en andel af en hel omgang. For at få en ring skal midten dækkes eller selve baggrunden begrænses til kanten.

Demoen arbejder med tre ting:

1. Farvestop bestemmer den udfyldte andel af omgangen.
2. En transparent border og border-box giver gradienten plads under kanten.
3. Et øverste lag begrænset til padding-box dækker midten.

En hvid midte er en malet flade, ikke et gennemsigtigt hul. Det sidste step bruger @supports (background-clip: border-area) til at tegne alene i kantområdet, når browseren understøtter det. Her kan baggrunden bag elementet ses gennem midten.

Forudsig → afprøv → forklar: Slå mønsterbaggrunden til. Hvilken udgave har en virkelig gennemsigtig midte?

Til diagrammet i næste emne bruger vi SVG, så streg og markør deler et tydeligt koordinatsystem.