Ok heute zeige ich euch wie ihr mit CSS3 eine Navigation mit Animation und Verläufen hinbekommt.
Als erstes brauchen wir ein Paar Links die als Navigation dienen, diese werden in einer div mit der id "navi" stehen:
index.html
Wir geben den Links eine klasse um sie alle gleichzeitig in CSS selektieren können und keine andere Link Elemente auf der Seite verändert werden.
Jetzt kommen wir zum CSS :
Als erstes müssen wir die Links selektieren:
Danach geben setzen wir sie auf Inline-Block Level, geben ihn ein padding und legen ihre Höhe und Breite fest und setzen die Schrift in die mitte:
Jetzt bekommen sie einen Verlauf als Hinteregrund:
Jetzt kommt die Animation ins Spiel:
.2s ist die Zeit und bedeutet 0.2sekunden mann kann genauso 7 eintragen dann würde die Animation eben 7 sekunden dauern.
Jetzt geht es weiter mit dem Hover:
Hier wird einfach der Gradient umgedreht was zu einem schönen Effekt führt, dies geht natürlich mit allen beliebigen Farben.
Hier die Kompletten Codes:
index.html:
style.css
Das war mien erstes Tutorial also bitte nciht böse sein wenn ich etwas falsch gemacht habe ;)
Wer weitere Tutorials möchte bitte PN mit Vorschlägen, was ich alle beherrsche: HTML/CSS/PHP/jQuery
Nicht alles Perfekt aber das ist ja kein Problem ;)
*MfG (GFX)
Als erstes brauchen wir ein Paar Links die als Navigation dienen, diese werden in einer div mit der id "navi" stehen:
index.html
HTML Code:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Naviagtion mit CSS3</title> <link rel="stylesheet" type="text/css" href="style.css"> <!-- Stylesheet hinzugefügt --> </head> <body> <div id="navi"> <a href="#" class="link">Klick</a> <a href="#" class="link">Klick</a> <a href="#" class="link">Klick</a> <a href="#" class="link">Klick</a> <a href="#" class="link">Klick</a> </div> </body> </html>
Jetzt kommen wir zum CSS :
Als erstes müssen wir die Links selektieren:
Code:
.links{
attribute
}
Code:
.links{
padding-top:5px;
display:inline-block;
width:200px;
height:30px;
text-align:center;
color:#FFF;
text-decoration:none;
}
Code:
.links{
background: -moz-linear-gradient(bottom, rgba(51,51,51,0.25),rgba(204,204,204,0.25));
background: -webkit-linear-gradient(bottom, rgba(51,51,51,0.25),rgba(204,204,204,0.25));
background: -o-linear-gradient(bottom, rgba(51,51,51,0.25),rgba(204,204,204,0.25));
background: linear-gradient(bottom, rgba(51,51,51,0.25),rgba(204,204,204,0.25));
}
Code:
-webkit-transition:color .2s ease-in-out; -moz-transition:color .2s ease-in-out; -o-transition:color .2s ease-in-out; transition:color .2s ease-in-out;
Jetzt geht es weiter mit dem Hover:
Code:
link:hover{
color:#0066CC;
background: -moz-linear-gradient(top, rgba(51,51,51,0.25),rgba(204,204,204,0.25));
background: -webkit-linear-gradient(top, rgba(51,51,51,0.25),rgba(204,204,204,0.25));
background: -o-linear-gradient(top, rgba(51,51,51,0.25),rgba(204,204,204,0.25));
background: linear-gradient(top, rgba(51,51,51,0.25),rgba(204,204,204,0.25));
}
Hier die Kompletten Codes:
index.html:
style.css
Das war mien erstes Tutorial also bitte nciht böse sein wenn ich etwas falsch gemacht habe ;)
Wer weitere Tutorials möchte bitte PN mit Vorschlägen, was ich alle beherrsche: HTML/CSS/PHP/jQuery
Nicht alles Perfekt aber das ist ja kein Problem ;)
*MfG (GFX)