HTML gradient in nav bar?
Hallo, ich versuche vergebens eine nav bar zu bauen, welche durch hovern einen gradient freigibt, nicht hinter jedem linkblock soll ein gradient sein, sondern ein 'grosser' hinter allen zsm. Mein ansatz ist bis jetzt dies:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>G&M Barber</title>
</head>
<body>
<ul>
<li><a href="barber.html">Home</a></li>
<li><a href="barber.html">News</a></li>
<li><a href="barber.html">Contact</a></li>
<li><a href="barber.html">About</a></li>
</ul>
</body>
</html>
css:
body {
background-color: black;
}
ul {
background: linear-gradient(90deg, rgba(0, 3, 36, 1) 0%, rgba(121, 9, 118, 1) 47%, rgba(56, 134, 188, 1) 100%); border-radius: 12px;
overflow: hidden;
display: table;
margin: 0 auto;
padding: 0;
}
li {
display: inline-block;
}
li a {
display: block;
color: rgb(255, 255, 255);
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
text-align: center;
padding: 14px 16px;
text-decoration: none;
background: black;
}
li a:hover {
background: transparent;
}
jedoch sind die Abstände zwischen den li 'boxen' auch gefärbt, wie ändere ich das, oder wie gehe ich das schlauer an?
Vielen Dank schon mal
2 Antworten
Ihr aktueller Ansatz ist tatsächlich schon fast korrekt, aber die Tatsache, dass die Farbe auch zwischen den `li`-Elementen angezeigt wird, liegt daran, dass Sie den Hintergrund für das gesamte `ul`-Element gesetzt haben. Das `ul`-Element enthält nicht nur die `li`-Elemente, sondern auch den Platz dazwischen.
Anstatt den Hintergrund auf das gesamte `ul`-Element anzuwenden, können Sie den Hintergrund auf die `li`-Elemente anwenden und dann beim Hovern die Hintergrundfarbe der Links transparent machen.
Hier ist ein überarbeiteter Codeausschnitt:
HTML bleibt unverändert.
CSS:
body {
background-color: black;
}
ul {
border-radius: 12px;
overflow: hidden;
display: flex;
justify-content: center;
padding: 0;
gap: 1rem; /* Fügt Abstand zwischen den li Elementen hinzu */
background-color: black; /* Setzt die Hintergrundfarbe des gesamten ul-Elements auf schwarz */
}
li {
background: linear-gradient(90deg, rgba(0, 3, 36, 1) 0%, rgba(121, 9, 118, 1) 47%, rgba(56, 134, 188, 1) 100%);
display: inline-flex;
border-radius: 12px;
}
li a {
display: block;
color: rgb(255, 255, 255);
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
text-align: center;
padding: 14px 16px;
text-decoration: none;
background: black;
}
li a:hover {
background: transparent;
}
Mit diesem Code wird der Hintergrund auf jedes `li`-Element angewendet und die Hintergrundfarbe wird transparent, wenn Sie mit der Maus über einen Link fahren. Der Abstand zwischen den `li`-Elementen bleibt schwarz, da die Hintergrundfarbe des `ul`-Elements auf schwarz gesetzt ist. Sie können den Abstand zwischen den `li`-Elementen mit der `gap`-Eigenschaft anpassen.
Versuch statt li a:hover sagst du ul:has(a:hover) li {background: transparent;}
Klar sind die Abstände zwischen den LI auch gefärbt, du hast ja einen Hintergrund über die ganze Liste UL und nicht nur im LI
Ist also alles korrekt
An diesem Punkt war ich auch bereits, nur möchte ich nicht hinter jedem ‘li’ einen eigenen gradient haben, sondern einen großen hinter allen, so dass sich dieser beim hovern durch alle ‘li’s zieht…