Kleurverloop

Status
Niet open voor verdere reacties.
G

GerardX

Gebruiker
Lid geworden
25 jan 2022
Berichten
99
Ik wil zowel het kop- als het voetdeel van een webstek in wording een kleurverloop geven. De kop bevat een horizontaal menu met klikbare afbeeldingen.
Voor de kop heb ik de stijl
Code: 
#kop {
    background: linear-gradient (#f0ffff, #bfefff);
}
Dat bleek perfect te werken. Vervolgens heb ik deze stijl gekopieerd en daarna "kop" door "voet" vervangen en andere kleuren gekozen, maar helaas. Wat ik ook probeer ik krijg geen verlopende kleuren. Wat doe ik fout?

Oh ja, wanneer ik slechts de kleur 'grey' als waarde opgeef, krijg ik keurig die kleur.
 
Laatst bewerkt door een moderator:
Probeer het zo eens?
Code: 
  background-image: linear-gradient(#f0ffff, #bfefff);
 
Hier wel, dan moet je elders eens kijken naar je HTML-code
 
Aar zei:
Hier wel,
Vreemd. Mijn "voet"deel is geen afbeelding (image). Vandaar dat ik jouw suggestie op zich niet zo logisch vond, maar niet geschoten ...
dan moet je elders eens kijken naar je HTML-code
Klik om te vergroten...
Lijkt me ook niet logisch omdat er wel een grijze kleur getoond wordt wanneer ik als stijldeclaratie "background: grey;"" opgeef. Nietemin toch gekeken en daar staat simpel
<div id="voet">
Hier moet nog tekst komen.
</div>
Die tekst wordt gewoon in groen uitgevoerd omdat ik die kleur in de "#voet"-stijl heb opgegeven. Er is dus wel een relatie tussen de html en css maar de eerder genoemde "background: linear-gradient();"wordt niet uitgevoerd terwijl dat een kopie van elders is, die daar wel werkt (dus is het ook erg onwaarschijnlijk, dat er sprake is van een type-fout, toch?
Ik schrijf mijn html en css via Geany, dus vallen type-fouten en onvolkomenheden ook snel op. Maar ... niettemin, het werkt niet.
Klik om te vergroten...
Klik om te vergroten...
 
Hier werkt het perfect:
https://jsfiddle.net/ryspwtjb/
HTML: 
<div id="kop">
Dit is de kop.
</div>

<div id="voet">
Dit is de voet
</div>

Code: 
div {
  font-size: 30px;
  padding: 5px;
  margin: 3px;
}

#kop {
 background-color: #f0ffff;
 background-image: linear-gradient(#f0ffff, #bfefff);
 }
 
 #voet {
 background-color: #f0ffff;
 background-image: linear-gradient(#f0ffff, #bfefff);
 }
 
Laatst bewerkt:
GerardX zei:
Vreemd. Mijn "voet"deel is geen afbeelding (image). Vandaar dat ik jouw suggestie op zich niet zo logisch vond, maar niet geschoten ...
Klik om te vergroten...
En een kleurverloop (gradient) is geen kleur. Dit wordt bij CSS gewoon gezien als een background-image.
 
Oplossing van Aar zou moeten werken. Syntax
Code: 
background-image: linear-gradient ( [direction,] color1, color2 [, colorN]  );

Belangrijk is dat de div een width en height heeft (of dat er tags in staan met een width en height)
 
Laatst bewerkt:
bron zei:
Belangrijk is dat de div een width en height heeft (of dat er tags in staan met een width en height)
Klik om te vergroten...
Dat bleek ook het probleem niet. De hoogte staat op 5em en de breedte op 100%.

Maar raad eens? Nadat ik wat had zitten rommelen, werkte het ineens wel zoals gewenst. Ik heb een donkerbruin vermoeden, dat nadat ik de kop-stijl had gekopieerd en ik de kleurwaarden had veranderd, ik een punt i.p.v. een komma tussen die waarden heb getypt. Die toetsen zitten vlak naast elkaar en een misaanslag is dus zo gemaakt. Zolang iets niet correct is, blijft Geany het navolgende in gewone zwarte tekst tonen, maar dit blijkt niet wanneer je een punt i.p.v. een komma typt. Je kunt natuurlijk niet alles hebben en het is een les voor een volgende keer om juist die punten en komma's als eerste te controleren. ;)

Bedankt voor je inzet.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan