Transitions gradient verince çalışmıyor :)

08-07-2013, 00:02:21

Üyeliği durduruldu

Şimdi şöyle izah edeyim;
Hani menünün üstüne gelince havalı bi şekilde arkaplan değişiyor ya transitions özelliği ile, işte gradient'li backgrounda verince olmuyor, ya da ben yapamadım.

Not : Bu arada gradient'i CSS3 ile verdim imaj yok
kodlar aşağıdaki gibidir.

<!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>
	<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			
		});
	</script>
	<style type="text/css">
	nav ul#menu{
		width:900px;
		height:40px;
		margin:0 auto;
		list-style:none;
		background:#c03;
		background:linear-gradient(top,#c03,#900);
		background:-webkit-linear-gradient(top,#c03,#900);
		background:-moz-linear-gradient(top,#c03,#900);
		background:-ms-linear-gradient(top,#c03,#900);
		font:12px tahoma;
		padding:0;
	}
	nav ul#menu li {float:left;}
	nav ul#menu li a {
		text-decoration:none;
		color:#fff;
		display:block;
		line-height:40px;
		padding:0 20px;
		transition:background .5s;
		-webkit-transition:background .5s;
		}
	nav ul#menu li a:hover{
		background:linear-gradient(top,#009CCC,#006F91);
		background:-webkit-linear-gradient(top,#009CCC,#006F91);
	}
	</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>

10-07-2013, 21:55:24

#2

oguzzarslan

edit, olmuyormuş :S

11-07-2013, 00:00:16

azizarslan

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

11-07-2013, 23:51:32

~~KorkakHerif~~

Üyeliği durduruldu

azizarslan adlı üyeden alıntı: mesajı görüntüle

<!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