CSS og nett

CSS og nett

CSS lineær gradient: komplett guide til linear-gradient()

6 min lesetid

Hver del av linear-gradient() forklart med et levende eksempel ved siden av koden, fra standardretningen til harde stopp, lagdelt glans og jevnere OKLCH-blandinger.

CSS og nett

Radiell gradient i CSS: form, størrelse og plassering

4 min lesetid

radial-gradient() sprer farger utover fra et punkt. Her forklares alle delene med levende eksempler, samt lagene bak myk glød, spotlys og vignettering.

CSS og nett

CSS conic gradient: hjul, kakediagrammer og glans

4 min lesetid

conic-gradient() sveiper farge rundt et punkt som viseren på en klokke. Den ene ideen tegner fargehjul, kakediagrammer, smultringdiagrammer, metallglans og stjerneutbrudd.

CSS og nett

CSS mesh-gradient: slik bygger du en av radielle lag

5 min lesetid

Det finnes ingen mesh-gradient() i CSS. Her er lagmetoden som etterligner en på en overbevisende måte, uskarpheten og kornet som fullfører den, og når et bilde eller en shader er det bedre valget.

CSS og nett

Gradienttekst i CSS, gjort riktig

5 min lesetid

Tre linjer CSS legger en gradient inni bokstavene dine. Å gjøre den lesbar, robust og smakfull tar noen få til, og å vite når du bør la teksten være vanlig.

CSS og nett

CSS gradientkant: fire måter å tegne en på

4 min lesetid

border-color tar ikke en gradient, så hver gradientkant er en omvei. Her er de fire som betyr noe, hva hver kan og ikke kan, og hvilken du bør velge.

CSS og nett

Animerte gradientbakgrunner med CSS, gjort riktig

4 min lesetid

Gradienter kan ikke animeres direkte, men alt rundt dem kan. Fire teknikker, hva hver koster nettleseren, og hvordan du holder bevegelsen rolig og valgfri.

CSS og nett

CSS gradient OKLCH: interpolasjon for jevnere blandinger

5 min lesetid

De fleste kjedelige gradienter med grått midtparti er ikke et fargeproblem, men et regneproblem. To ord, in oklch, endrer hvor nettleseren gjør regnestykket.

CSS og nett

CSS-støytekstur: legg korn på gradienter med SVG

4 min lesetid

Et svakt lag med støy skjuler banding og får flat skjermfarge til å føles som trykk eller film. Her er SVG-filteret bak det, justert og klart til å limes inn.

CSS og nett

Tailwind-gradienter: lineære, radiale og koniske i v4

4 min lesetid

Tailwind v4 ga gradientklassene nye navn, la til vinkler, radiale og koniske gradienter, og byttet standardblandingen til oklab. Her er hele systemet, med CSS-en hver klasse lager.

CSS og nett

SVG-gradienter: lineære, radiale, streker, tekst og masker

5 min lesetid

SVG har sitt eget gradientsystem, eldre enn CSS-gradienter og i stand til ting de ikke kan: fargelegge en strek, fylle et ord, dele én gradient mellom mange former og tone ut hva som helst med en maske.

CSS og nett

Gradientknapper i CSS som føles eksklusive

4 min lesetid

De fleste gradientknapper ser billige ut av de samme få grunnene: for mange fargetoner, en hover som hopper og tekst som forsvinner i den lyse enden. Her er oppskriften som unngår alle tre.

CSS og nett

Ytelse for CSS-gradienter: gjør gradienter en side tregere?

6 min lesetid

En statisk CSS-gradient er nesten gratis. Kostnadene kommer fra det folk gjør med gradienter: enorme uskarphetseffekter, bakgrunner som tegnes om ved rulling og animasjoner som aldri stopper. Slik ser du forskjellen.

CSS og nett

CSS-mønstre med gjentakende gradienter

5 min lesetid

Harde fargestopp gjør gradienter til former, og background-size gjør formene til fliser. Med disse to grepene kan du tegne de fleste klassiske mønstre med noen få kodelinjer, uten bildefiler.

CSS og nett

Figma-gradienter: tips for jevnere resultater

5 min lesetid

Figma lager en gradient på to klikk og en god på tjue. Her er den raske veien gjennom gradienteditoren, samt løsninger på grå midtpartier, fargebånd og CSS som ikke samsvarer.

CSS og nett

WebGL-gradienter og shadere, forklart for designere

7 min lesetid

Noen gradienter på nettet driver, gløder og skimrer på en måte ingen bilder eller CSS-regler kan. De er shadere. Slik fungerer de, med ord en designer kan bruke.

CSS og nett

Gradientbakgrunn i e-post: hva som fungerer i Gmail og Outlook

5 min lesetid

Gradienter ser fantastiske ut i en nettleser og uforutsigbare ut i en innboks. Bygg dem i lag, så får hver leser noe som ser tilsiktet ut.

CSS og nett

Dynamiske OG-bilder: lag lenkeforhåndsvisninger automatisk

5 min lesetid

Å lage et forhåndsvisningsbilde for hver side for hånd skalerer dårlig, og ett generisk bilde for hele nettstedet sløser bort det mest viste bildet du har. Generer dem i stedet.