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.
- Farvegradienter.
- Transparens.
Flade farver
Simple flade farver laves med stylen background-color, og fungerer helt simpelt, f.eks.
hvilket kommer til at se således ud:
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:
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"
Med STYLE="background-clip:padding-box"
Med STYLE="background-clip:content-box"
<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ærdi | Effekt |
| border-box | Defaultværdien. Baggrundsfarven når helt ud til kanten af elementet. |
| padding-box | Baggrundsfarven når ud til rammen af elementet, hvis der er en sådan. |
| content-box | Baggrundsfarven starter i øverste venstre hjørne af indholdet. |
| initial | Sætter værdien til defaultværdien |
| inherit | Her 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.
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.
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.
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:
Den style man anvender hedder background, og man specificerer
Man arbejder med to grundligende typer af gradienter:
- Lineære gradienter, dvs. side til side, top til bund, osv.
- Radiale gradienter, dvs. fra et center og udefter.
Den style man anvender hedder background, og man specificerer
- farven for de browsere der ikke understøtter gradienter
- -webkit- for Safari 5.1 til 6.0 og Chrome 10.0 til 26.0
- -o- for Opera 11.1 til 12.0.
- -moz- for Firefox 3.6 til 15
- linear-gradient eller radial-gradient for resten, dvs. de nyere browsere
- background: linear-gradient(retning, farve 1, farve 2, ...);
- background: radial-gradient(form størrelse position, startfarve, ..., slutfarve);
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:
På siden kommer det til at se således ud:
Tre farver i en 45 grader vinkel bliver så
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):
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:
På siden kommer det til at se således ud (feltet er gjort højere, så effekten er til at se):
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:
På siden kommer det til at se således ud:
Æ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.
Hvilket på siden kommer det til at se således ud:
Ved at lege med farvekombinationer og vinkler på gradienterne, kan man således opnå nogle ret gode farveeffekter på sine baggrunde.
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>
.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>
.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>
.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>
.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>
.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:
På siden kommer det til at se således ud:
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:
og på siden kommer det til at se således ud:
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:
På siden kommer det til at se således ud:
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:
På siden kommer det til at se således ud:
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:
På siden kommer det til at se således ud:
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.
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>
.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>
.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>
.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:
- closest-side
- farthest-side
- closest-corner
- farthest-corner (default)
<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>
.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>
.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:
hvilket på skærmen kommer til at se således ud:
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:
hvilket på skærmen kommer til at se således ud:
Man kan selvfølgelig også lave en gradient hvor overgangen er forskudt, her er den transparente sat til 75%:
Ligeledes kan man lave gradienter over flere farver. Her går vi over en 50% transparent rød til en 100% hvid:
og man kan, på samme måde, justere vinkel, type osv., ved at bruge teknikkerne fra farvegradienterne.
<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>
<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>
.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.