My Operagradient centered ul horizontal menu with css
Tuesday, May 17, 2011 1:25:40 PM
css:
body {
background-color: #fff;
}
* {
margin: 0;
padding: 0;
}
ul {
text-align: center;
list-style-type: none;
background: #cfe4f7; /* Old browsers */
background: -moz-linear-gradient(top, #cfe4f7 0%, #73b1e7 25%, #0a77d6 50%, #539fe1 75%, #88bcea 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cfe4f7), color-stop(25%,#73b1e7), color-stop(50%,#0a77d6), olor-stop(75%,#539fe1),
color-stop(100%,#88bcea)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #cfe4f7 0%,#73b1e7
25%,#0a77d6 50%,#539fe1 75%,#88bcea 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #cfe4f7 0%,#73b1e7 25%,#0a77d6 50%,#539fe1 75%,#88bcea 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #cfe4f7 0%,#73b1e7 25%,#0a77d6 50%,#539fe1 75%,#88bcea 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cfe4f7', endColorstr='#88bcea',GradientType=0 ); /*IE6-9 */
background: linear-gradient(top, #cfe4f7 0%,#73b1e7 25%,#0a77d6 50%,#539fe1 75%,#88bcea 100%); /* W3C */
height: 60px;
width: 100%;
position: relative;
padding-right: 100px;
padding-left: 100px;
}
li {
display: inline;
}
ul a {
padding-right: 32px;
padding-left: 32px;
padding-top: 16px;
padding-bottom: 16px;
line-height: 60px;
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 21px;
color: #371C1C;
}
ul a:hover {
color: #FFF;
background: #dce8f4; /* Old browsers */
background: -moz-linear-gradient(top, #dce8f4 0%, #accbe5 24%, #69a4d3 50%, #a8c7e0 79%, #d0dde8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dce8f4), color-stop(24%,#accbe5), color-stop(50%,#69a4d3),
color-stop(79%,#a8c7e0), color-stop(100%,#d0dde8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #dce8f4 0%,#accbe5 24%,#69a4d3 50%,#a8c7e0 79%,#d0dde8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #dce8f4 0%,#accbe5 24%,#69a4d3 50%,#a8c7e0 79%,#d0dde8 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #dce8f4 0%,#accbe5 24%,#69a4d3 50%,#a8c7e0 79%,#d0dde8 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#DCE8F4', endColorstr='#D0DDE8',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #dce8f4 0%,#accbe5 24%,#69a4d3 50%,#a8c7e0 79%,#d0dde8 100%); /* W3C */
}
html:
<html> <link rel="stylesheet" type="text/css" href="./menu.css" /> <head> <title> demo li menu </title> </head> <body> <ul> <div align="center"> <li> <a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">Services</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </div> </ul> </body> </html>source of gradient css - http://www.colorzilla.com/gradient-editor/ preview:
