/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
Tekst oven på gradient med buffer?
Fra : CAH


Dato : 19-09-05 21:55

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


 
 
Jens Gyldenkærne Cla~ (19-09-2005)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 19-09-05 22:50

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

Erik Ginnerskov (19-09-2005)
Kommentar
Fra : Erik Ginnerskov


Dato : 19-09-05 23:43

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/



Georg OLE Peter HART~ (20-09-2005)
Kommentar
Fra : Georg OLE Peter HART~


Dato : 20-09-05 00:24

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

Jens Gyldenkærne Cla~ (20-09-2005)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 20-09-05 09:25

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

Jens Gyldenkærne Cla~ (20-09-2005)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 20-09-05 09:29

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

Jens Gyldenkærne Cla~ (20-09-2005)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 20-09-05 09:30

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

CAH (20-09-2005)
Kommentar
Fra : CAH


Dato : 20-09-05 09:06

> 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


Johnny Winther Ronne~ (20-09-2005)
Kommentar
Fra : Johnny Winther Ronne~


Dato : 20-09-05 17:10

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



CAH (21-09-2005)
Kommentar
Fra : CAH


Dato : 21-09-05 08:37


> 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


Søg
Reklame
Statistik
Spørgsmål : 177552
Tips : 31968
Nyheder : 719565
Indlæg : 6408847
Brugere : 218887

Månedens bedste
Årets bedste
Sidste års bedste