---

Hej

Jeg vil gerne have en kolonne af tekst, der som baggrund har en
gradient. Men mængden af tekst vil skifte, og jeg ønsker at
gradienten skal gå fra mørk til lys på 100px, derefter skal den blot
vedblive med at være den lyse farve. Jeg har altså brug for en
"buffer" som fortsætter gradienten - uden at trække gradienten.

Håber det er til at forstå hvad der menes

Mange tak for al hjælp som tilbydes.

Cah

---

CAH skrev:

> Jeg vil gerne have en kolonne af tekst, der som baggrund har
> en gradient. Men mængden af tekst vil skifte, og jeg ønsker at
> gradienten skal gå fra mørk til lys på 100px, derefter skal
> den blot vedblive med at være den lyse farve. Jeg har altså
> brug for en "buffer" som fortsætter gradienten - uden at
> trække gradienten.

Det er ganske simpelt.

1: Lav din gradient som en grafikfil i den ønskede størrelse.
2: Brug den som baggrundsbillede i din kolonne (sørg for at sætte
background-repeat: no-repeat)
3: Sæt en baggrundsfarve på din div således at farven matcher
slutfarven på gradienten.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

---

Jens Gyldenkærne Clausen wrote:

> 1: Lav din gradient som en grafikfil i den ønskede størrelse.
> 2: Brug den som baggrundsbillede i din kolonne (sørg for at sætte
> background-repeat: no-repeat)

Man kan også lave gradienten i begrænset højde og så indsætte den sådan:

..kolonne {
color: #000;
background: #eee url(gradient.gif) top left repeat-y
}

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://ginnerskov.dk
http://html-faq.dk/

---

Jens GyldenkærneClausen wrote in dk.edb.internet.webdesign.html:
> CAH skrev:
>
Jeg har altså
> > brug for en "buffer" som fortsætter gradienten - uden at
> > trække gradienten.
>
> Det er ganske simpelt.
>
> 1: Lav din gradient som en grafikfil i den ønskede størrelse.
Og når du har lavet den i f.eks. 100x100 px - Crop'per du den til
1x100px - og bruger noget i stil med:
style="BACKGROUND: #efdcbf url(Billeder/Gardient-grå1.png) repeat-x;
> 2: Brug den som baggrundsbillede i din kolonne (sørg for at sætte
> background-repeat: no-repeat)
men ikke den - derved opnår du en 'lettere' hjemmeside'
> 3: Sæt en baggrundsfarve på din div således at farven matcher
> slutfarven på gradienten.

med venlig hilsen
Ole Hartig
'skipper'
ps: jeg testede det på min 'legeplads' - www.anett-h.dk og så i
'skraldespanden' - 'gradient.png' filen er 247byte!

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Erik Ginnerskov skrev:

> Man kan også lave gradienten i begrænset højde og så indsætte
> den sådan:
>
> .kolonne {
> color: #000;
> background: #eee url(gradient.gif) top left repeat-y
> }

Ja - den metode er at foretrække, da det giver en mindre grafikfil
(her fx 100px bred og 1px høj). Den kan også bruges på den anden
led:

..kolonne {
color: #000;
background: #eee url(gradient.gif) top left repeat-x
}

- hvor gradient.gif så er 1px bred og 100px høj.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

---

Georg OLE Peter HARTIG skrev:

> Og når du har lavet den i f.eks. 100x100 px - Crop'per du den
> til 1x100px - og bruger noget i stil med:
> style="BACKGROUND: #efdcbf url(Billeder/Gardient-grå1.png)
> repeat-x;


Ja - det er en bedre metode.

NB: Lav venligst en tom linje mellem citater og ny tekst (både før
og efter) i dine svar - det gør det meget lettere at overskue
indlægget
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

---

CAH skrev:

> Min erfaring med dette er at browseren ikke fortolker billed
> farven på samme måde som den fortolker html koden for en
> farve. Der bliver altså en faveforskel mellem billede og html
> koden for en farve. Er det noget jeg gør forkert?

Lad os se hvad du gør. Jeg har ikke haft problemer med teknikken.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

---

> 3: Sæt en baggrundsfarve på din div således at farven matcher
> slutfarven på gradienten.

Min erfaring med dette er at browseren ikke fortolker billed farven på
samme måde som den fortolker html koden for en farve. Der bliver
altså en faveforskel mellem billede og html koden for en farve. Er det
noget jeg gør forkert?

Istedet prøvede jeg følgende, jeg lagde en "fyld" gif fil som
bagground til tabellen, og så lagde jeg gradienten som baggrond til
tabel cellen, derved fik jeg gradienten til at ligge oven på fyld
giffen.

Man tak for al den hjælp der er kommet, og jeg modtager gerne forslag
til bedre måder at gøre det på.

Cah

---

CAH wrote:
>> 3: Sæt en baggrundsfarve på din div således at farven matcher
>> slutfarven på gradienten.
>
> Min erfaring med dette er at browseren ikke fortolker billed farven på
> samme måde som den fortolker html koden for en farve. Der bliver
> altså en faveforskel mellem billede og html koden for en farve. Er det
> noget jeg gør forkert?
>
> Istedet prøvede jeg følgende, jeg lagde en "fyld" gif fil som
> bagground til tabellen, og så lagde jeg gradienten som baggrond til
> tabel cellen, derved fik jeg gradienten til at ligge oven på fyld
> giffen.
>
> Man tak for al den hjælp der er kommet, og jeg modtager gerne forslag
> til bedre måder at gøre det på.
>
> Cah

Pas på kontrasten mellem tekst og baggrund, med skiftende farver, er det
nødvendigt med der en kontrast der kan stå mål med den lyseste farve.

Med venlig hilsen
Johnny Winther Ronnenberg
--
Internettet er for alle!
http://80.62.61.212/webuseability/index.asp

---

> Lad os se hvad du gør. Jeg har ikke haft problemer med teknikken.

Nu har jeg allerede lavet en anden løsning, men jeg skal se om jeg kan
få det sat op så man kan se problemet. Det skal dog nævnes at
forskllen er ret lille, jeg kunne f.eks. ikke se problemet på min
bærbare, men kun på skærmen til min stationære.

Cah