HTML-Hajen

Baggrunde; farver og farveeffekter









Baggrunde

På elementer som tabeller og sektioner med tekst, eller for den sags skyld BODY tag'en, hvor man et indhold, der gør det muligt at se baggrunden, kan man styre baggrundens udseende, i dette tilfælde farverne. Til baggrundsfarver har man flg. muligheder:

Flade farver

Simple flade farver laves med stylen background-color, og fungerer helt simpelt, f.eks.

<DIV STYLE="background-color:#FFFFFF">Tekst på hvid baggrund</DIV>

hvilket kommer til at se således ud:

Tekst på hvid baggrund



Som default er baggrundsfarven helt ud til kanten af det element den er lagt på, men det behøver den ikke være. Dette styres med background-clip. Til background-clip har man flg. værdier:

VærdiEffekt
border-boxDefaultværdien. Baggrundsfarven når helt ud til kanten af elementet.
padding-boxBaggrundsfarven når ud til rammen af elementet, hvis der er en sådan.
content-boxBaggrundsfarven starter i øverste venstre hjørne af indholdet.
initialSætter værdien til defaultværdien
inheritHer nedarves værdien fra forældreelementet


Det kan være meget svært at se forskel på især border-box og padding-box, men er her der et eksempel på hver, hvor kanten er lavet stiplet og 10px bred, så man bedre kan se forskellen:

Med STYLE="background-clip:border-box"
Vær ikke snobbet.
Vær ikke vigtig.
Vær ikke underdanig.
Vær fordringsfuld overfor Dem selv men ikke overfor Andre.
Det har været mig så magtpåliggende at få nedskrevet disse grundlæggende Råd for vor Omgangstone, at de er faldet mig i Pennen, før jeg tog fat det, hvor jeg rettelig skulde begynde, nemlig med at sige, at al virkelig god Opførsel kommer indefra, udspringer naturligt fra det Sind, som er åbent for Velvilje, Forståelse og Medynk med Andre.


Med STYLE="background-clip:padding-box"
Vær ikke snobbet.
Vær ikke vigtig.
Vær ikke underdanig.
Vær fordringsfuld overfor Dem selv men ikke overfor Andre.
Det har været mig så magtpåliggende at få nedskrevet disse grundlæggende Råd for vor Omgangstone, at de er faldet mig i Pennen, før jeg tog fat det, hvor jeg rettelig skulde begynde, nemlig med at sige, at al virkelig god Opførsel kommer indefra, udspringer naturligt fra det Sind, som er åbent for Velvilje, Forståelse og Medynk med Andre.


Med STYLE="background-clip:content-box"
Vær ikke snobbet.
Vær ikke vigtig.
Vær ikke underdanig.
Vær fordringsfuld overfor Dem selv men ikke overfor Andre.
Det har været mig så magtpåliggende at få nedskrevet disse grundlæggende Råd for vor Omgangstone, at de er faldet mig i Pennen, før jeg tog fat det, hvor jeg rettelig skulde begynde, nemlig med at sige, at al virkelig god Opførsel kommer indefra, udspringer naturligt fra det Sind, som er åbent for Velvilje, Forståelse og Medynk med Andre.



Farvegradienter generelt

Farvegradienter har været lidt problematiske at anvende, da ikke alle browsere har afviklet dem lige godt, hvis de i det hele taget har kunnet afvikle dem. Det betyder, at vi i dag er nødt til at have en lappeløsning, hvor alle de nye browsere bruger den samme kode, de lidt ældre browsere skal have hver sin kode, og de helt gamle skal have defineret en flad farve de kan anvende. Derfor: hvis det med farvegradienterne virker lidt omstændigt, er der en god grund til det.

Man arbejder med to grundligende typer af gradienter:
Begge findes i to versioner, den hvor gradienten forløber én gang, og den hvor gradienten kører som et loop. Begge dele bliver gennemgået i dette afsnit.

Den style man anvender hedder background, og man specificerer
Vær især opmærksom på, at webkit er orienteret modsat af de andre, så den skal være left, når de andre er right, osv. Den overordnede syntax for de to gradienter er:
Syntaxen kommer til at give mening, når der kommer nogle eksempler på, i de næste afsnit.


Lineære farvegradienter

Ved de lineære gradienter angiver man en retning og de farver gradienten skal igennem, dvs. mindst to. Til retning bruger man left, right, top og bottom, eller man angiver en vinkel, f.eks. 45deg for en 45 graders hældning. Retningerne kan kombineres, f.eks. top right, der får gradienten til at pege mod elementets øverste højre hjørne. Bemærk, at man i koden til de nye browsere også bruger det engelske to, altså til højre, to right og ikke bare højre.

Så, hvis vi laver klassen LinearGradient, som er lineær fra venstre til højre med farveskift fra grøn til sort, og grøn som farvevalg for de browsere der ikke kan afvikle gradienter, ser koderne således ud:

<STYLE>
.LinearGradient {
   background: #40FF00;
   background: -webkit-linear-gradient(left, #40FF00, blue);
   background: -o-linear-gradient(right, #40FF00, blue);
   background: -moz-linear-gradient(right, #40FF00, blue);
   background: linear-gradient(to right, #40FF00, blue);
}
</STYLE>

<DIV CLASS="OpacityGradient">Tekst på baggrund med grøn til blå farvegradient</DIV>

På siden kommer det til at se således ud:

Tekst på baggrund med grøn til blå farvegradient


Tre farver i en 45 grader vinkel bliver så

<STYLE>
.LinearGradient {
   background: yellow;
   background: -webkit-linear-gradient(10deg, yellow, #40FF00, blue);
   background: -o-linear-gradient(10deg, yellow, #40FF00, blue);
   background: -moz-linear-gradient(10deg, yellow, #40FF00, blue);
   background: linear-gradient(10deg, yellow, #40FF00, blue);
}
</STYLE>

<DIV CLASS="OpacityGradient">Tekst på baggrund med gul til grøn til blå farvegradient i 10 grader vinkel</DIV>

Bemærk, at ved grader, har webkit samme orientering som de andre, og man har ikke et to på den sidste linje.

På siden kommer det til at se således ud (feltet er gjort højere, så vinklingen er til at se):

Tekst på baggrund med gul til grøn til blå farvegradient i 10 grader vinkel



Som default bliver farverne ligeligt fordelt i gradienten, men dette kan man justere, ved efter farven at specificere hvor meget den skal udgøre af den samlede farve. Hvis vi tager den foregående gradient og specificerer den gule farve til 40 %, ser koden således ud:

<STYLE>
.LinearGradient {
   background: yellow;
   background: -webkit-linear-gradient(10deg, yellow 40%, #40FF00,blue);
   background: -o-linear-gradient(10deg, yellow 40%, #40FF00, blue);
   background: -moz-linear-gradient(10deg 40%, yellow, #40FF00, blue);
   background: linear-gradient(10deg, yellow 40%, #40FF00, blue);
}
</STYLE>

<DIV CLASS="OpacityGradient">Tekst på baggrund med gul (40 %) til grøn til blå farvegradient i 10 grader vinkel</DIV>

På siden kommer det til at se således ud (feltet er gjort højere, så effekten er til at se):

Tekst på baggrund med gul (40 %) til grøn til blå farvegradient i 10 grader vinkel


I stedet for relative afstande i procenter, kan man også bruge absolutte afstande (px, cm, osv.), hvis dette er mere hensigtsmæssigt.


Gradient tillader også at man kører gradienten gentagende gange. Så hedder det bare repeating-linear-gradient i stedet for linear-gradient. For at få det til at fungere i praksis, kræver det dog lidt mere end bare at skrive repeating-linear-gradient i stedet for linear-gradient.

Når man specificerer farvesekvensen starter man med første farve, uden angivelse af længde. Ved anden farve angiver man afstanden hvor den skal være skiftet helt over. Det kan enten være relativt i procenter eller absolut i f.eks. px eller cm. Det der er vigtigt er, at afstande i denne sammenhæng er afstande fra startpunktet. De efterfølgende farver er ligeledes farve plus afstanden, og her er det det bliver vigtigt hvor vi angiver afstandene fra. Hvis første til anden farve er skiftet ved 20px og anden til tredje farve ligeledes skal skifte over 20px, skal der ved tredje farve stå 40px, og så fremdeles.

Får man ikke angivet en afstand for farverne, bliver loopet kun kørt igennem én gang, som var det en almindelig linear-gradient. Om man vælger relative eller absolutte afstande er en smagssag, og hvad der er hensigstmæssigt til siden.

Hvis vi tager gradienten grøn til blå, ser koderne således ud:

<STYLE>
.LinearGradient {
   background: #40FF00;
   background: -webkit-repeating-linear-gradient(left, #40FF00, #2E64FE 20%);
   background: -o-repeating-linear-gradient(right, #40FF00, #2E64FE 20%);
   background: -moz-repeating-linear-gradient(right, #40FF00, #2E64FE 20%);
   background: repeating-linear-gradient(to right, #40FF00, #2E64FE 20%);
}
</STYLE>

<DIV CLASS="OpacityGradient">Tekst på baggrund med gentagende grøn til blå farvegradient</DIV>

På siden kommer det til at se således ud:

Tekst på baggrund med gentagende grøn til blå farvegradient


Æstetisk er det ikke altid så kønt med den skarpe overgang i gentagelserne, så man kan med fordel slutte sekvensen af med startfarven, f.eks.

<STYLE>
.LinearGradient {
   background: #40FF00;
   background: -webkit-repeating-linear-gradient(left, #40FF00, #2E64FE 100px, #40FF00 110px);
   background: -o-repeating-linear-gradient(right, #40FF00, #2E64FE 100px, #40FF00 110px);
   background: -moz-repeating-linear-gradient(right, #40FF00, #2E64FE 100px, #40FF00 110px);
   background: repeating-linear-gradient(to right, #40FF00, #2E64FE 100px, #40FF00 110px);
}
</STYLE>

<DIV CLASS="OpacityGradient">Tekst på baggrund med gentagende grøn til blå til grøn farvegradient</DIV>

Hvilket på siden kommer det til at se således ud:

Tekst på baggrund med gentagende grøn til blå til grøn farvegradient


Ved at lege med farvekombinationer og vinkler på gradienterne, kan man således opnå nogle ret gode farveeffekter på sine baggrunde.


Radiale farvegradienter

Radiale gradienter fungerer helt analogt til de lineære gradienter, blot med den forskel, at i stedet for at kunne vinkle gradienten, kan man flytte rundt på centrum.

Hvis vi starter med at se på en helt basal farvegradient fra gul til grøn, så ser koden således ud:

<STYLE>
.RadialGradient {
   background: yellow;
   background: -webkit-radial-gradient(yellow, #40FF00);
   background: -o-radial-gradient(yellow, #40FF00);
   background: -moz-radial-gradient(yellow, #40FF00);
   background: radial-gradient(yellow, #40FF00);
}
</STYLE>

<DIV CLASS="OpacityGradient">Tekst på baggrund med gul til grøn radial farvegradient</DIV>

På siden kommer det til at se således ud:

Tekst på baggrund med gul til grøn radial farvegradient



På samme måde som de lineære gradienter, kan man angive en størrelse på farverne, både relativ (procenter) og absolut (f.eks. px eller cm). Man kan også angive en form. Her kan man vælge mellem ellipseformet, som er default, og cirkelformet. Så, hvis vi gentager radialen fra gør, men med 40 % gul og gør den cirkelformet i stedet, ser koden således ud:

<STYLE>
.RadialGradient {
   background: yellow;
   background: -webkit-radial-gradient(circle, yellow 40%, #40FF00);
   background: -o-radial-gradient(circle, yellow 40%, #40FF00);
   background: -moz-radial-gradient(circle, yellow 40%, #40FF00);
   background: radial-gradient(circle, yellow 40%, #40FF00);
}
</STYLE>

<DIV CLASS="OpacityGradient">Tekst på baggrund med gul (40 %) til grøn cirkulær farvegradient</DIV>

og på siden kommer det til at se således ud:

Tekst på baggrund med gul (40 %) til grøn cirkulær farvegradient



Radialens diametre, dvs. hvor flad ellipsen er, kan man justere efter behov. Dette gøres ved at specificere bredde og højde, enten relativt (procenter) eller absolut (f.eks. px eller cm). Hvis vi prøver at justere den første ellipse med 50% bredde og 10 % højde, så der koden således ud:

<STYLE>
.RadialGradient {
   background: yellow;
   background: -webkit-radial-gradient(50% 10%, yellow, #40FF00);
   background: -o-radial-gradient(50% 10%, yellow, #40FF00);
   background: -moz-radial-gradient(50% 10%, yellow, #40FF00);
   background: radial-gradient(50% 10%, yellow, #40FF00);
}
</STYLE>

<DIV CLASS="OpacityGradient">Tekst på baggrund med fladtrykt gul til grøn radial farvegradient</DIV>

På siden kommer det til at se således ud:

Tekst på baggrund med fladtrykt gul til grøn radial farvegradient



Placeringen af radialens centrum er som udgangspunkt midt i elementet. Dette har man også mulighed for at ændre. Placeringen består af to dele, en afstand fra top/bund og højre/venstre side og en angivelse af startpunkt. Som startpunkt har man flg. valgmuligheder:
De fire placeringer flytter kun ganske lidt på overgangen i forhold til kanterne, og har kun begrænset praktisk anvendelse. Afstanden fra kanterne derimod, giver gode designmuligheder. Man skal lige være opmærksom på, at det øjeblik man bruger placeringen, bliver størrelsen som vist oven over sat ud af funktion.

<STYLE>
.RadialGradient {
   background: #40FF00;
   background: -webkit-radial-gradient(50px 50px, closest-side, #40FF00, #2E64FE 200px);
   background: -o-radial-gradient(50px 50px, closest-side, #40FF00, #2E64FE 200px);
   background: -moz-radial-gradient(50px 50px, closest-side, #40FF00, #2E64FE 200px);
   background: radial-gradient(closest-side at 50px 50px, #40FF00, #2E64FE 200px);
}
</STYLE>

<DIV CLASS="OpacityGradient">Tekst på baggrund med grøn til blå radial farvegradient med forskudt centrering</DIV>

På siden kommer det til at se således ud:

Tekst på baggrund med grøn til blå radial farvegradient med forskudt centrering



På samme måde som man på de lineære gradienter kan lave en gentagende gradient, kan man gøre det med radiale gradienter, og analogt til de lineære gradienter, gør med det med repeating-radial-gradient. Hvis vi ser på vores gradient grøn til blå til grøn fra længere oppe, bliver den analoge syntax således:

<STYLE>
.RadialGradient {
   background: #40FF00;
   background: -webkit-repeating-radial-gradient(#40FF00, #2E64FE 100px, #40FF00 110px);
   background: -o-repeating-radial-gradient(#40FF00, #2E64FE 100px, #40FF00 110px);
   background: -moz-repeating-radial-gradient(#40FF00, #2E64FE 100px, #40FF00 110px);
   background: repeating-radial-gradient(#40FF00, #2E64FE 100px, #40FF00 110px);
}
</STYLE>

<DIV CLASS="OpacityGradient">Tekst på baggrund med grøn til blå til grøn cycklisk radial farvegradient</DIV>

På siden kommer det til at se således ud:

Tekst på baggrund med grøn til blå til grøn cycklisk radial farvegradient


Bredden af farverne kan, ligesom i de lineære gradienter sættes enten relativt eller absolut efter behag og hvad der er hensigtsmæssigt. Ligeledes kan placeringen af centrum flyttes som beskrevet oven over.


Transparens/opacitet

Vil man have baggrunden gjort lidt transparent/opak, bruger man opacity eller rgba-farve, og her skal man lige være lidt opmærksom på hvor meget man vil have gjort opak. Opacity gør alt opak, også teksten, fordi opacity er en separat variabel fra background-color. Med rgba ligger opaciteten i selve farven, dvs. det er kun baggrundsfarven der bliver opak. Vær desuden opmærksom på, at opacity ikke fungerer for Internet Explorer til og med 8, så vil man også tage hensyn til disse, skal man også bruge filter. Så hvis man vil have en opacitet på 50 % på baggrunden, ser koderne således ud:

<DIV STYLE="background-color:#FFFFFF; opacity:0.5; filter:alpha(opacity=30)">Tekst på hvid baggrund med opacity og filter</DIV>

<DIV STYLE="background-color:rgba(255,255,255,0.5)">Tekst på hvid baggrund med rgba</DIV>

hvilket på skærmen kommer til at se således ud:

Tekst på hvid baggrund med opacity og filter

Tekst på hvid baggrund med rgba



På samme måde som man kan lave farvegradienter, kan man lave opacitetsgradienter. I stedet for at lave en gradient mellem to farver, laver man en gradient på to opaciteter med rgba-farver. Dette kunne f.eks. være klar til hvid (her med hvid baggrund for de ældre browsere der ikke kan afvikle opacitet). Så ser klasse og kode således ud:

<STYLE>
.OpacityGradient {
   background: #FFFFFF;
   background: -webkit-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1));
   background: -o-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1));
   background: -moz-linear-gradient(right, rgba(255,255,255,0),rgba(255,255,255,1));
   background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));
}
</STYLE>

<DIV CLASS="OpacityGradient">Tekst på klar til hvid baggrund med opacitetsgradient</DIV>

hvilket på skærmen kommer til at se således ud:

Tekst på klar til hvid baggrund med opacitetsgradient


Man kan selvfølgelig også lave en gradient hvor overgangen er forskudt, her er den transparente sat til 75%:

Tekst på klar til hvid baggrund, forskudt til 75%, med opacitetsgradient


Ligeledes kan man lave gradienter over flere farver. Her går vi over en 50% transparent rød til en 100% hvid:

Tekst på klar over rød til hvid baggrund med opacitetsgradient


og man kan, på samme måde, justere vinkel, type osv., ved at bruge teknikkerne fra farvegradienterne.