[Tutorial] HTML/CSS Mouseover-Effekt [Anfänger]

Rechiki · 04/04/2013, 19:44

Hallo,
in diesem Tutorial möchte ich euch zeigen wir ihr einfach einen Mousovereffekt erstellen könnt!
So sieht es am Ende aus!(ihr könnt die Farben ändern)

Befolge einfach folgenden Schritte:

1. Erstelle dir einen neuen Ordner auf deinem Desktop (oder wo du willst) und nenne ihn so, wie das Projekt heißen soll. Bei mir ist das der Fall Tutorial".

2.(überspringen, wenn Buttons schon vorhanden sind und bei 3. weitermachen) Nun ist es an der Zeit, dass ihr eure eigenen Buttons erstellt. Ich habe dazu ein paar Bilder gemacht:
2.1 Öffne Photoshop oder ein Bildbearbeitungsprogramm deiner Wahl. Erstelle ein neues Projekt mir ->Datei->Neu. Gebt z.B. die Maße 960px x 52 px ein. Nun hast einen langen Balken, den du beliebig designen kannst. Meiner sieht so aus: (Ich habes es kleiner gemacht und werde es via css-Befehl über die Komplette Seite strecken. Ihr könnt sie nutzen, wenn ihr wollt.

2.2 Erstelle nun ein neues Projekt mit den Maßen (ihr könnt sie beliebig änder) 160px x 52 px. Nun erstellt einen Button, wie er aussehen soll, wenn die Maus nicht über dem Button ist und einen Button, wenn die Maus über dem Button ist. Meine sehen so aus:

Normaler Button:

Mouseover Button:

Wenn ihr wollt, könnt ihr sie nutzen. Anschließen erstellt wieder ein neues Projekt und zwar nun mit den Maßen 160px x 104. Nun fügt die beiden Buttons einfach untereinander ein. Der Nicht-Mousover Button oben und der andere unten.
So sieht es bei mir aus:

Speichert diese in eurem erstelltem Ordner als buttons.png
_________________________________________________

3. Nun zum HTML Code
Erstellt euch ein neues Textdokument in dem Ordner öffnet es und speichert es unter index.html !WICHTIG! Beim Speichern auf "Alle Dateien" stellen !WICHTIG! Dann erstellt ein weiteres Dokument auf die gleich Weis und nennt es "style.css". Nun öffnet eure index.html Datei und schreibt folgendes:

HTML Code:

<!DOCTYPE html>
<html>
	<head>
		<title>Website</title>
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
	<div id="navigation_bg">
            <div id="navigation">
                <a href="index.html"><div class="navigation_button"><p>SEITE 1</p></div></a>
                <a href="index.html"><div class="navigation_button"><p>SEITE 2</p></div></a>
                <a href="index.html"><div class="navigation_button"><p>SEITE 3</p></div></a>
                <a href="index.html"><div class="navigation_button"><p>SEITE 4</p></div></a>
                <a href="index.html"><div class="navigation_button"><p>SEITE 5</p></div></a>
                <a href="index.html"><div class="navigation_button"><p>SEITE 6</p></div></a>
            </div>
        </div>
	</body>
</html>

Bearbeitet nun die style.css

HTML Code:

body
{
background-color: #0090ff;
margin: 0px auto;
min-width:960px;
}
#navigation_bg
{
width: 100%;
height: 52px;
background-image: url(navigation_bg.png);
background-repeat: repeat-x;
}
#navigation
{
width: 960px;
margin: 0px auto;
text-align: center;
}
#navigation a
{
text-decoration:none:
}
.navigation_button
{
float: left;
width: 160px;
height: 52px;
background-image: url(buttons.gif);
background-position: 0px 0px;
cursor: pointer;
}
.navigation_button p
{
font-size: 16px;
font-family: Arial;
color: white;
margin: 0px;
margin-top: 14px;
}
.navigation_button:hover
{
background-position: 0px -52px;
}

Ich hoffe, dass euch mein erstes Tutorial ein wenig weitergeholfen hat. Falls es das getan hat, wäre ein Thx nett

Hier nochmal der komplette Ordner:

ThoughtfulDev · 04/05/2013, 12:05

Wenn du schon Html 5 also ( wegen dem doctype) verwendest hättest du ja auch die neuen Tags also nav,aside,footer erklären können. Aber sonst gut habe mir den Code jz nicht durchgelesen nur überflogen.

Mansuro · 04/05/2013, 12:08

Danke, gutes Tutorial

CaptainSmile · 04/05/2013, 12:11

Boah ich muss mich auch wieder mal mit HTML und CSS beschäftigen, schonwieder alles vergessen

Danke für das Tutorial

Rechiki · 04/05/2013, 13:14

Quote:

Originally Posted by Shonenx33

Wenn du schon Html 5 also ( wegen dem doctype) verwendest hättest du ja auch die neuen Tags also nav,aside,footer erklären können. Aber sonst gut habe mir den Code jz nicht durchgelesen nur überflogen.

Ich habe es mir so angewöhnt zu arbeiten.^^