Dostum background ve transition tanımlamaların yanlış yerde ama doğru yerde olsa da çalışmazmış. Tarayıcılarımız henüz background gradient'i animate yapacak kadar zeki değilmiş. Ben şöyle bir trik yaptım, umarım işine yarar.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Responsive Web Design</title>
<style type="text/css">
nav ul#menu {
width: 900px;
height: 40px;
margin: 0 auto;
padding: 0;
list-style: none;
font: 12px Tahoma;
}
nav ul#menu li {
float: left;
}
nav ul#menu li a {
display: block;
position: relative;
z-index: 1;
padding: 0 20px;
line-height: 40px;
color: #fff;
text-decoration: none;
/* webkit gradient background */
background: -webkit-linear-gradient(top, rgb(204, 0, 51), rgb(153, 0, 0));
}
nav ul#menu li a:before {
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
z-index: -1;
opacity: 0;
/* webkit gradient background */
background: -webkit-linear-gradient(top, rgb(0, 156, 204), rgb(0, 111, 145));
/* webkit transition */
-webkit-transition: all 500ms linear;
/* before hack */
content: ".";
text-indent: -99999px;
}
nav ul#menu li a:hover:before {
opacity: 1;
}
</style>
</head>
<body>
<nav>
<ul id="menu">
<li>
<a href="#">
Anasayfa
</a>
</li>
<li>
<a href="#">
Hakkımızda
</a>
</li>
<li>
<a href="#">
Misyonumuz
</a>
</li>
<li>
<a href="#">
Vizyonumuz
</a>
</li>
<li>
<a href="#">
Foto Galeri
</a>
</li>
<li>
<a href="#">
Referanslar
</a>
</li>
<li>
<a href="#">
İletişim
</a>
</li>
</ul>
</nav>
</body>
</html>Link:
http://codepen.io/azizarslan/pen/xsoje
Üstad çok iyi bir yöntem yaa nasıl teşekkür edeceğimi bilemedim inan.Çok teşekkür ederim
