CSS3 Navigation | Mit Verläufen und Animation

(GFX) · 03/03/2012, 09:42

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

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>

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:

Code:

.links{
attribute
}

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:

Code:

.links{
        padding-top:5px;
	display:inline-block;
	width:200px;
	height:30px;
        text-align:center;
        color:#FFF;
	text-decoration:none;
}

Jetzt bekommen sie einen Verlauf als Hinteregrund:

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));
}

Jetzt kommt die Animation ins Spiel:

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;

.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:

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

Spoiler

style.css

Spoiler

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)

MKD_BoY · 12/16/2012, 17:08

I like the Hover Color changes.
I might use in my other CSS3 menu
Thanks!
[P.S; Req. an explaination]Got a question. Why did you've used RGB colors, instead hex ones?