Hoffy
Threadersteller
Dabei seit: 29.04.2012
Ort: Niederwerrn
Alter: 36
Geschlecht: 
|
Verfasst Sa 26.05.2012 22:49
Titel hover befehl: mit transition und verlauf möglich? |
  |
|
hi ihr
ich bin grad ein bissel am basteln
und ich habe mir eine brushed-metal-navi leiste erstellt
beim hover befehl erscheint dann ein blau-schwarzer radialer verlauf.
jedoch möchte ich nicht dass der verlauf so knallhart sofort da ist
sondern mit einer transition eine einblendungsdauer von 1sek hat...
ich hab schon einiges ausprobiert aber den übergang nicht hinbekommen 
hier mal die relevanten codeschnippsel:
| Code: |
<header>
<nav>
<ul>
<li><a href="#.html">Link1</a></li>
<li><a href="#.html">Link2</a></li>
<li><a href="#.html">Link3</a></li>
<li><a href="#.html">Link4</a></li>
<li><a href="#.html">Link5</a></li>
<li><a href="#.html">Link6</a></li>
</ul>
</nav>
</header>
|
| Code: |
header {
margin-top:15px;
width:100%;
height:60px;
margin-bottom:40px;
}
nav {
height:60px;
width:100%;
border-top:rgba(150,150,150,1) solid 2px;
/* background : #464646;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));*/
background:url(../bilder/hintergrund/nav2.png) repeat-x;
margin-bottom:30px;
box-shadow:rgba(255,255,255,.2) 0px 10px 5px;
}
nav ul{
width:950px;
margin:0 auto;
}
nav ul li{
float:left;
border-left:rgba(153,153,153,1) solid 1px;
border-right:rgba(255,255,255,.1) solid 1px;
}
nav ul li a{
text-decoration:none;
display:block;
padding:0 20px;
line-height:59px;
color:rgba(100,100,100,1);
text-transform:uppercase;
-webkit-text-shadow:rgba(0,255,255,1) 0px 0px 5px;
-moz-text-shadow:rgba(0,255,255,1) 0px 0px 5px;
-ms-text-shadow:rgba(0,255,255,1) 0px 0px 5px;
-o-text-shadow:rgba(0,255,255,1) 0px 0px 5px;
text-shadow:rgba(0,255,255,1) 0px 0px 5px;
-webkit-transition: background 1s linear;
-moz-transition: background 1s linear;
-ms-transition: background 1s linear;
-o-transition: background 1s linear;
transition: background 1s linear;
}
nav ul li a:hover{
background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,.9)), to(rgba(0,28,78,.9)) );
background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,.9) 0%, rgba(0,28,78, .9) 100%);
color:rgba(255,255,255,1);
}
|
so ich hatte den transition auch schon bei nav ul li a:hover drinn stehen => kein übergang
dann hatte ich noch dem anchor so eine weiße normale grund farbe rgba(255,255,255,.1) gegeben un transition bei anchor un dann auch mal bei a:hover reingeschrieben
kein transition...
wo liegt mein denkfehler??
und wie korrigiere ich das??
oder ist das überhaupt möglich so wie ich mir das vorstelle??
Zuletzt bearbeitet von Hoffy am Sa 26.05.2012 22:51, insgesamt 3-mal bearbeitet
|
|
Willkommen auf dem Portal für Mediengestalter
