CSS3-logo   CSS Gradienter



Gradienter er virtuelle billeder uden nogen egentlig størrelse. De er alene beregnet til visning på skærm - de kan ikke printes. De kan indgå i præsentation på skrærm alle steder, hvor billeder kan indgå.


Der findes 4 former for gradienter:


  • linear-gradient
  • repeating-linear-gradient
  • radial-gradient
  • repeating-radial-gradient


De opbygges som værdier til CSS-propertyen Background.


I forenklet form ser deres syntaks således ud:


Liniær gradientbackground: linear-gradient(styredata, farve 1, ... farve n);
Gentagende liniær gradienthtml{background: repeating-linear-gradiant(styredata, farve 1, ... farve n); height: 100%}
Radial gradientbackground: radial-gradiant(styredata, form, farve 1, ... farve n);
Gentagende radial gradiantbackground: repeating-radial-gradient(styredata, farve1, ... farve n);


Fælles for de 4 typer gradienter er, at deres styre- og farvedata defineres i en kommasepareret steng, hvor første element indeholder styredata. De efterfølgende elementer lister de farver, der skal indgå i den enkelte gradient. Desuden kan der være knyttet et farvestop til de enkelte farver.


Når der indgår en parentes de opbyggede datastrenge skyldes det, at de reelt er funktioner, der umiddelbart indlæses i en metode i et underliggende javaScript program.



Styredata.

Styredata er optionelle og forskellige for de to hovedtyper af gradienter. De styrer gradienternes strukturelle opbygning.


Farvedata.

Der skal angives mindst 2 farver - startfarve og slutfarve. De skal angives i den rækkefølge, hvori de skal vises. Farverne kan angives ved nøgleord, hexadecimaler, RGB, RGBa, HSL eller HSLa.


Farvestop.

Et farvestop (color stop) fortæller browseren, hvor den pågældende farve skal vise fuld dækning, det vil sige det sted, hvor gradieringen med den foregådende farve ophører, og gradieringen med den efterfølgende farve påbegyndes. Man kan derved om nødvendigt styre gradieringens forløb henover skærmen.

Farvestop kanføres efter en farvekode (red 23%). De angives i procent eller pixel - også negative tal (-nnn). Procenttallene må godt indeholde decimaler med punktum som decimaltegn.

Anføres ingen farvestop foretager browseren en jævn liniær fordeling mellem de farver, der indgår i gradieringen.



Eksempler på effekten af farvestop i simple gradieringer.
black, whiteJævn overgang fra sort til hvid over hele den viste flade. Ingen farvestop.
black 0%, white 100%Jævn overgang fra sort til hvid over hele den viste flade. Farvestoppene ved 0 og 100 procent ses ikke.
black 0%, white 50%Jævn overgang fra sort til hvid på første halvdel af den viste flade. Sidste halvdel hvid. Farvestoppet ved 0 procent kan ikke ses, mens det ved 50 procent er synligt.
black 50%, white 100%Første halvdel af den viste flade er sort. På sidste halvdel jævn overgang fra sort til hvid. Farvestoppet ved 50 procent kan ses, mens det ved 100 procent ikke er synligt.
black 25%, white 75%Første fjerdedel af den viste flade er sort. Jævn overgang fra sort til hvid på den midterste halvdel af den viste flade. Sidste halvdel hvid. Både farvestoppene ved 25 procent og ved 75 procernt er synlige.



Liniær gradient

Til de liniære gradienter kan anvendes følgende:


Styredata.

Styring af gradientens retning. Skal læses som "ud af skærmen fra midten". Nøgleord kan anvendes alternativt med vinkeltal.

Styredata skal altid afsluttes med komma ","


VinkelNøgleordBetegnelse
Slutfarverne vises på "to"-stedet.
Default: Styredata og komma mangler. Svarer til to top.
nnndeg,Vinkel på nnn grader i.f.t. lodret opad.
0deg,to top,lodret.
45deg,to top right,skråt opad til højre.
90deg,to right,til højre.
135deg,to bottom right,Nedad mod højre.
180deg,to bottom,Nedad.
225deg,to bottom left,nedad mod venstre
270deg,to left,til venstre
315deg, -45deg,to top left,skråt opad til venstre.
360deg,to top,lodret


Farvedata

Der skal altid sættes komma "," mellem farvekoder. Der skal altid være mellemrum " " mellem farve og evt. farvestop.


FarvestopBetegnelse
farve,ingen farvestop
farve nn%,Farve med positivt farvestop
farve -nn%,Farve med negativt farvestop
farve nnpx,Farve med positivt farvestop
farve -nnpx,Farve med negativt farvestop


Køreklare eksempler på liniære gradienter.


background: linear-gradient(white, black);
background: linear-gradient(to right, yellow, green, brown);
background: linear-gradient(to right bottom, blue, red, green);
background: linear-gradient(70deg, green, magenta, forestgreen);
background: linear-gradient(black 20px, white 90%, black);



Repeterende liniær gradient

Til repeterende liniære gradienter kan anvendes følgende:


Styredata.

Som liniære gradienter.


Farvedata

Som Liniære gradienter. Der er dog 2 tilføjelser:

  • Der skal anføres farvestop på slutfarven. Dette tal styrer (ved division op i 100 eller dem samlede pixelmængde), hvor mange repetioner der skal være i det samlede forløb - 65% giver således ca. 1,5 gradient, mens 2% giver 50.
  • Hvis den første og den sidste farve i farverækken er forskellig fremkommer der et "hårdt" gradientskifte - umiddelbar overgang fra den ene farve til den anden. Sættes den samme farve både som startfarve og som slutfarve i farverækken fremkommer der et "glidende" gradientskifte.


Køreklare eksempler på repeterendre liniære gradienter.


background: repeating-linear-gradient(black, white 50%);
background: repeating-linear-gradient(to right, indigo, violet 10%, indigo 20%);
background: repeating-linear-gradient(to right bottom, red, green, yellow, black, red 25%);
background: repeating-linear-gradient(45deg, khaki 15%, lightyellow 40%);
background: repeating-linear-gradient(black 20px, white 20%, black 33.3334%);
background: repeating-linear-gradient(to bottom, red, orange, yellow, green, blue, indigo, violet, red 20%);



Radial gradient

Til de radiale gradienter kan anvendes følgende:


Styredata.

Styredataene er delt i 4 optionelle grupper. I det omfang de anvendes,skal de stå i samme rækkefølge som de 4 kolonner angiver. Strengen med styredata skal afsluttes med ",".


FormUdstræk-
ning
 Retning *) Startpunkt
Skal have
'at'
   foranstillet   
Betegnelse
Cirkel med startpunkt midt på skærmen.
ellipse
circle
Default: Ellipse. Form på gradienten.
nnpxAfgrænser så gradienten kun vises indenfor en cirkel med den pågældende afstand fra startpunktet. Definerer samtidig gradienten som en cirkel.
nnpx nnpxAfgrænser så gradienten kun vises indenfor ellipse med de pågældende afstande fra startpunktet. Definerer samtidig gradienten som en ellipse.
closest-sideEllipsen vises i retningen fra startpunktet til den nærmeste side.
closest-cornerEllipsen vises i retningen fra startpunktet til det nærmeste hjørne.
farthest-sideEllipsen vises i retningen fra startpunktet til den fjerneste side.
farthest-cornerEllipsen vises i retningen fra startpunktet til det fjerneste hjørne.
centerDefault: Angiver at gradienten skal starte midt på skærmen.
top left
top center
top right
center left
center right
bottom left
bottom center
bottom right
Startpunktets placering. Samme som background-position propertyen.
nn% nn%Procent på hhv. x- og y-akserne. Koordinat for hvor startpunktet skal være inde på skærmbilledet.
nnpx nnpxAntal pixel på hhv. x- og y-akserne. Koordinat for hvor startpunktet skal være inde på skærmbilledet.

*) Kun relevant for ellipser med startpunkt flyttet væk fra midten.



Farvedata.

Som liniære gradienter.


Køreklare eksempler på radiale gradienter.


background: radial-gradient(850px at top left, lightyellow, gold, lightyellow);
background: radial-gradient(circle at center left,red,green, yellow);
background: radial-gradient(farthest-corner ellipse at 55% 75%,magenta, turquoise, purple, green);
background: radial-gradient(25px circle,lime, tomato, plum);
background: radial-gradient(farthest-side circle at bottom right,brown, chocolate 40%, maroon);
background: radial-gradient(farthest-side at right top,fuchsia, green, hotpink, white 480px, fuchsia);
background: radial-gradient(at 100% 50%,blue, blueviolet, cyan, darkblue, forestgreen);
background: radial-gradient(at 100%,white, black);
background: radial-gradient(at 100px,red, yellow, green);



Repeterende radial gradient

Til de repeterende radiale gradienter kan anvendes følgende:


Styredata.

Som radiale gradienter.


Farvedata.

Som repeterende liniære gradienter.


Køreklare eksempler på repeterende radiale gradienter.


background: repeating-radial-gradient(lightyellow, gold 20px, lightyellow 40px);
background: repeating-radial-gradient(at bottom center, indigo, violet 10%, indigo 20%);
background: repeating-radial-gradient(farthest-side circle at top left, lightyellow, khaki 15%, lightyellow 40%);



Testbane

Du kan afprøve alle mulige gradienter sådan her:

  1. Opret en mappe. Kald den f.eks: "gradienter".
  2. I mappen oprettes og gemmes en tom fil kaldet "index.htm"
  3. Denne hvide kode kopieres til filen med hhv. CTRL-C og CTRL-V.
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Gradienter</title>
    <style>
    body {background-color: #white; margin: 0; padding 0;}
    div {margin:auto; width:940px; height:900px;}
    #grad {
    /* indsæt gradientstreng nedenfor: */


    background: radial-gradient(850px at top left, lightyellow, gold, lightyellow);


    /* indsæt gradientstreng ovenfor: */
    );
    </style>
    </head>
    <body>
    <div id="grad"><div />
    </body>
    </html>
  4. Gem index.htm filen.
  5. Gå baglæns i stifinder så du får vist "gradienter"-mappen. Klik / dobbeltklik på den.
  6. Din default browser vil nu vise et vindue med fanebladet "Gradienter" med den præinstallerede gradient. Viser "solopgang" i øverste venstre hjørne.
  7. Vil du have vist mere eller mindre gradient i højden skal du ændre tallet i / slette "height:900px;" i index.htm-filen.
  8. Vil du have vist mere eller mindre gradient i bredden skal du ændre tallet i / slette "width:940px;" i index.htm-filen.
  9. Du er nu klar til at vise forskellige gradienter.
  10. Hent (CTRL-C) en "køreklar gradient" fra højere oppe på denne side.
  11. Slet gradientlinien (den "gule" linie) i index-htm-programmet (CTRL-X) og indsæt i stedet den nye linie med CTRL-C og gem programmet.
  12. Genåbn dit browservindue - fanebladet "Gradienter" og Opdater / Genindlæs eller tryk på F5. Den nye gradient skulle nu gerne blive vist.
  13. Punkterne 10-12 kan gentages efter behov.
  14. Som overbygning 1 til pkt. 13 kan du i index.htm ændre i den eksisterende kode baseret på retningslinierne givet ovenfor på denne side, gemme filen og fortsætte med pkt. 12. Er der fejl i koden viser browseren ingenting. Gå da tilbage til index.htm-filen og forsøg at finde og rette fejlen - eller start på en frisk med pkt. 10. (Eksempler på farvenavne kan hentes her Colors).
  15. Som overbygning 2 til pkt. 13 kan du i index.htm-filen slette gradientlinien og selv opbygge en ny fra bunden, gemme den og fortsætte med pkt. 12.
  16. Når du har fundet den ønskede gradient, kan du kopiere gradientlinien i index.htm-filen over til css-filen knyttet til den hjemmeside du er igang med.
 




















x
x