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
HTML,
Webseite,
CSS,
HTML5,
Programmiersprache,
Webdesign,
Webentwicklung
