Der Transitioneffekt funktioniert nicht :-/
Oder kommt der mit background:image nicht klar?
Code
<nav id="primary"> <!-- Navigation zwischen meinen Projekten --> <ul> <li>Blog</li> <li>Programmierung <!--<ul> <li>Webentwicklung</li> <li>Java</li> </ul>--> </li> <li>Sonstige Projekte <!--<ul> <li>Schere-Stein-Papier-Echse-Spock</li> </ul>--> </li> <li>Kontakt</li> </ul> </nav>
reset.css
CSS
header, nav, article, section, aside, footer{ display: block; margin: 0; padding: 0; border: none; outline: none;}body, html, form, input, label, p, a, span, pre, ul, ol, li, div{ margin: 0; padding: 0; border: none; outline: none;}h1, h2, h3, h4, h5, h6{ font-size: 1em;/* "killen" der Standartwerte. Zum Beispiel ist h1 2em */ margin: 0; padding: 0;}
main.css
CSS
html, body{ font-family: Calibi, Arial, sans-serif; font-size: 13px; line-height: 1.42em; color: #333; min-width: 800px;}nav#primary{ height: 20px; /* IE10 Consumer Preview */ background-image: -ms-linear-gradient(top, #F5F5F5 0%, #FFFFFF 100%); /* Mozilla Firefox */ background-image: -moz-linear-gradient(top, #F5F5F5 0%, #FFFFFF 100%); /* Opera */ background-image: -o-linear-gradient(top, #F5F5F5 0%, #FFFFFF 100%); /* Webkit (Safari/Chrome 10) */ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F5F5F5), color-stop(1, #FFFFFF)); /* Webkit (Chrome 11+) */ background-image: -webkit-linear-gradient(top, #F5F5F5 0%, #FFFFFF 100%); /* W3C Markup, IE10 Release Preview */ background-image: linear-gradient(to bottom, #F5F5F5 0%, #FFFFFF 100%); box-shadow: 1px 0px 3px #333;} nav#primary ul { font-weight: 900; line-height: 20px; height: 20px; } nav#primary li { display: block; float: left; text-align: center; width: 25%; margin: 0 auto; -moz-transition: all 1s ease; -webkit-transition: all 2s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; /* * Die :hover Effekte werden zu einer sanften Animation */ } nav#primary li:hover { /* IE10 Consumer Preview */ background-image: -ms-linear-gradient(top, #ECECEC 0%, #FFFFFF 100%); /* Mozilla Firefox */ background-image: -moz-linear-gradient(top, #ECECEC 0%, #FFFFFF 100%); /* Opera */ background-image: -o-linear-gradient(top, #ECECEC 0%, #FFFFFF 100%); /* Webkit (Safari/Chrome 10) */ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ECECEC), color-stop(1, #FFFFFF)); /* Webkit (Chrome 11+) */ background-image: -webkit-linear-gradient(top, #ECECEC 0%, #FFFFFF 100%); /* W3C Markup, IE10 Release Preview */ background-image: linear-gradient(to bottom, #ECECEC 0%, #FFFFFF 100%); }.clearLeft{ clear: left;}