Nav bar with gradient background color - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Nav Bar

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Nav Bar

Description

Nav bar with gradient background color

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
header {<!--from  ww w .  j a  v  a2 s.  c  om-->
   height:71px;
   width:100%;
   background-image:-o-linear-gradient(-90deg, Chartreuse 0%, yellow 100%);
   background-image:-moz-linear-gradient(-90deg, blue 0%, pink 100%);
   background-image:-ms-linear-gradient(-90deg, OrangeRed 0%, grey 100%);
   background-image:linear-gradient(-180deg, BlueViolet 0%, Chartreuse 100%);
}

header #logo {
   margin-left:51px;
   width:113px;
   height:100%;
   display:inline-block;
}

header nav {
   width:449px;
   display:inline-block;
   vertical-align:top;
}

header nav ul li {
   display:inline;
   list-style:none;
}

header nav ul li a {
   text-decoration:none;
   font-family:Helvetica;
   font-size:21px;
   color:yellow;
   line-height:25px;
}

#homepage #banner {
   border-radius:30px;
   background-image:-o-linear-gradient(-90deg, blue 0%, pink 100%);
   background-image:-moz-linear-gradient(-90deg, OrangeRed 0%, grey 100%);
   background-image:-ms-linear-gradient(-90deg, BlueViolet 0%, Chartreuse 100%);
   background-image:linear-gradient(-180deg, yellow 0%, blue 100%);
}

footer {
   border-radius:23px;
   background-image:-o-linear-gradient(-90deg, pink 0%, OrangeRed 100%);
   background-image:-moz-linear-gradient(-90deg, grey 0%, BlueViolet 100%);
   background-image:-ms-linear-gradient(-90deg, Chartreuse 0%, yellow 100%);
   background-image:linear-gradient(-180deg, blue 0%, pink 100%);
}
</style> 
 </head> 
 <body> 
  <header> 
   <img id="logo" src="https://www.java2s.com/style/demo/InternetExplorer.png" alt="Logo"> 
   <nav> 
    <ul> 
     <li> <a href="index.html">Lore</a> </li> 
     <li> <a href="about.html">Lorem ip</a> </li> 
     <li> <a href="portfolio.html">Lorem ips</a> </li> 
     <li> <a href="blog.html">Lore</a> </li> 
     <li> <a href="contact.html">Lorem i</a> </li> 
    </ul> 
   </nav> 
  </header> 
  <div id="homepage"> 
   <div id="banner"></div> 
  </div>  
 </body>
</html>

Related Tutorials