gradueret baggrundsfarve

[Judith]

Hej
Jeg vil rigtig gerne lave en farvegradueret baggrund. Har forsøgt at kopiere koder fra nettet uden held - er der nogen der ved hvordan man gør?

Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; rv:11.0) like Gecko

[Kim Ludvigsen]

Du skriver ikke, hvilke koder du har forsøgt med, eller hvor det ikke virker.

I gamle dage måtte man benytte et baggrundsbillede for at lave et gradueret farveskift, I dag kan det laves med CSS-koder - men det virker ikke i alle browsere. Og du kan heller ikke se det i KompoZer, hvis du bruger KompoZer til at lave siden med.

Her er et eksempel på en kode, hvor der gradueres fra toppen til bunden:

.gradbaggrund {
background: -webkit-linear-gradient(#ffffff, #000000); /* For Safari 5.1 til 6.0 */
background: -o-linear-gradient(#ffffff, #000000); /* For Opera 11.1 til 12.0 */
background: -moz-linear-gradient(#ffffff, #000000); /* For Firefox 3.6 til 15 */
background: linear-gradient(#ffffff, #000000); /* Standard-kode til alle nyere browsere */
}

Alle elementer med stilklassen gradbaggrund vil på gradueret baggrund fra hvid ( #ffffff) til sort (#000000). Udskift selv #ffffff, #000000 med de ønskede start- og slutfarver.

Koden vil virke i Internet Explorer 10, Chrome 10, Firefox 3.6, Safari 5.1 og Opera 11.6 og nyere versioner. Det største problem i den forbindelse er Internet Explorer, fordi en del brugere vil have ældre versioner af programmet - alle dem med Windows XP. Du kan stadig lave det med et baggrundsbillede, men det har også en ulempe, fordi gradueringen kommer til at afhænge af brugerens skærmopløsning og -størrelse.

Du kan finde flere eksempler på koder til gradueret baggrund, fx sidelæns og cirkelgraduering på denne side:
http://www.w3schools.com/css/css3_gradients.asp

[Judith]

Hej Kim
Tak for svar. Jeg har forsøgt at lave et stilark. Synes i øvrigt ikke det er så ligetil - vil gerne have et eksternt stilark, men selvom jeg har dit hæfte fandt jeg ikke helt ud af hvordan det fungerer. Kunne ikke få adgang til fanerne men så pludselig var jeg alligevel inde på baggrund. Men det er jo rart at vide hvordan! Jrg må nok bruge mere tid på det. Men jeg fandt nogle koder der også gav farven men ikke gradueringen. Dog havde jeg pludselig også et ark med fine gradueringer - blot i bjælker ned over siden.
Jeg vil prøve dine koder. Men du skriver at det ikke kan ses i Kompozer - hvad mener du med det? Og hvis det ikke dur i xp - den er der vel mange der har. Bliver der så hvid baggrund?

Venlig hilsen
Judith

[Kim Ludvigsen]

Gradueringen kan ikke ses i KompoZer, fordi KompoZers motor er baseret på en Firefox, der er ældre end version 3.6 og som derfor ikke kan vise graduering. Der kan også være lidt problemer med at få indsat koderne via KompoZer, fordi programmet ikke kan genkende dem. Men de kan indsættes direkte i kildekoden, hvis det er et internt stilark, eller direkte i en CSS-fil med en editor som fx Notesblok. Bemærk, du kan kun indsætte på disse mere nørdede måder, da brugerfladen i KompoZer ikke tillader indsættelse af ukendte koder.

XP-brugerne med Internet Explorer vil få vist en hvid baggrund, men du kan give dem en ensfarvet baggrundsfarve ved at indsætte:
background-color: #cccccc;
ovenover linjen
background: -webkit-linear-gradient(#ffffff, #000000); /* For Safari 5.1 til 6.0 */
Hvor du så udskifter #cccccc med den ønskede farve.

Hvis du støder på problemer med forskellige ting, så spørg her, og fortæl, hvad du vil opnå, hvad du har prøvet og hvad der så skete. Hvis det er noget som vises forkert på en side, vil det ofte være en fordel med en prøveside på et webhotel, så vi kan se både siden og den bagvedliggende kode.

[Judith]

Hej igen
Nu har jeg brugt et par timer mere uden held. Jeg har et baggrundsbillede jeg kan leve med - synes bare det andet er mere æsterisk, men det virker lidt problematisk. Men foreløbig mange tak. Måske kan det skiftes ud til sidst.

[scootergrisen]

[slettet]

[scootergrisen]

[slettet]

[Judith]

Hej Scootergris!

Her er hvordan det ser ud lige nu og dette har givet farven men ingen graduering.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>baggrund</title>
<style type="text/css">
body {
text-align: center;
background: #b93222;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#b93222), to(#f6ada5));
background: -webkit-linear-gradient(#b93222, #f6ada5);
background: -moz-linear-gradient(#b93222, #f6ada5);
background: -ms-linear-gradient(#b93222, #f6ada5);
background: -o-linear-gradient(#b93222, #f6ada5);
background: linear-gradient(#b93222, #f6ada5);
-pie-background: linear-gradient(#b93222, #f6ada5);
background:-linear-gradient(top,#b93222,#f6ada5);
}
</style>
</head>
<body>
<br>
</body>
</html>

Venlig hilsen Judith

[Kim Ludvigsen]

Har du prøvet at tjekke i en browser? Det virker ganske fint i en nyere browser. Som tidligere nævnt kan du ikke se gradueringen i KompoZer.

Der er dog én ulempe ved koden, hvis indholdet ikke fylder hele siden i højden, vil du få gentaget gradueringen.

[Judith]

Hej Kim
Ja, det kan jeg godt se, men hvad er det der skal ændres for at gradueringen fylder hele siden?

[Kim Ludvigsen]

Lige oven over </style> indsætter du en ny linje med:
html {height:100%;}
så skulle det virke.

[Judith]

når jeg gør det kan jeg ikke få lov at gemme siden!!!

[Kim Ludvigsen]

Du må have indsat forkert, det virker fint her. Får du en fejlmeddelelse, når du prøver at gemme?

Prøv at kopiere al koden ind her.

[scootergrisen]

[slettet]

[Judith]

Hej igen
den siger "gemning mislykkedes" her er hele koden
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>baggrund</title>
html {height:100%;]

<style type="text/css">
body {
text-align: center;
background: #b93222;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#b93222), to(#f6ada5));
background: -webkit-linear-gradient(#b93222, #f6ada5);
background: -moz-linear-gradient(#b93222, #f6ada5);
background: -ms-linear-gradient(#b93222, #f6ada5);
background: -o-linear-gradient(#b93222, #f6ada5);
background: linear-gradient(#b93222, #f6ada5);
-pie-background: linear-gradient(#b93222, #f6ada5);
background:-linear-gradient(top,#b93222,#f6ada5);
}
</style>
</head>
<body>
<br>
</body>
</html>