Border Gradient Menüblock

[scherenschlag]

Moin.
Ich hänge mal wieder.
Ich habe unter meinen Menüblock eine blaue Linie gezogen.

Code: Alles auswählen

.navbar {
  min-height: 70px;
  transition: all 0.3s;
  border-bottom: 5px solid blue;
  &:not(.navbar-short) {
  }

Soweit so gut.
Nun möchte ich aber das die Linie einen Farbverlauf hat. Rot>weiß>blau.
Irgendwie bekomme ich es nicht gebacken den Linear Gradient oder was auch immer einzusetzen.
Sperre im Kopf....

https://www.tsad17.de/bsv2022

[Nachtfalke]

Ich habe das im vorherigen Forum auf die schnelle gefunden.
Schau mal hie unter: https://www.nof-schule.de/forum/t-mobir ... arbverlauf

Eventuell hilft Dir das ja schon.

[Tommy Herrmann]

Moin,

... und vielen Dank für Deine Mithilfe Dieter. Ich hätte das jetzt längst vergessen

Hier hatte ich meine Beschreibung aus dem alten Forum in einer Testseite von Mobirise eingebaut - unter dem obersten Block:

https://www.mobirise-tutorials.com/Test ... ware-Ende/


CSS - In meinem Beispiel also beliebige Farben von links nach rechts:

Code: Alles auswählen

.myLineGradient {
  height: 5px;
  margin-top: 0px;
  background-color: red;
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}

Diese CSS-Anweisung geht also nur für einen Hintergrund-Bereich und nicht für eine eigentliche Border.

Anzeige als <div>

Code: Alles auswählen

<div class="container-fluid myLineGradient"></div>

Wobei ich für diese Linie einen extra, einfachen Text- Block aufgezogen haben, wie man im Screenshot erkennen kann. Die zusätzliche class="container-fluid" stellt dieses <div> auf die volle Bildschirmbreite ein, damit diese Linie auch die gesamte Bildschirmbreite bedeckt.

Achtung - bitte stelle zunächst einen gewissen Abstand ("padding") nach unten ein - mindestens "2", denn wenn ein Block zu schmal wird, kommt man nicht mehr an die Block-Werkzeuge ran und könnte den Block noch nicht einmal mehr löschen.

[scherenschlag]

Moin.
Danke Euch. Meinen NOF Beitrag hatte ich schon aufgerufen. Vergessen.
Ich hatte auch schon einiges probiert. Aber es war nie etwas von einer Linie zu sehen.
Oder ich hatte oben und unten noch einen "Background". Also die Linie war nicht direkt unter dem Menü.
Nun habe ich den Fehler. Ich habe vollständig verpennt auch im HTML einen Tag zu schreiben.
Habe mich voll auf die CSS Anweisungen konzentriert.