Sidr
PSD-Tutorials.de

Lieber Gast …

… die Inhalte von PSD-Tutorials.de stehen nur registrierten Mitgliedern zur Verfügung. Damit wollen wir den Communitygedanken weiterführen. Als Mitglied trägst du - wenn auch nur im Kleinen - zum Puls der Community bei. Und nur so ist es möglich, weiterhin hochwertige Inhalte für alle bereitzustellen.

Jetzt kostenlos registrieren!

Vorteile der kostenlosen Mitgliedschaft

Mit der kostenlosen und schnell erledigten Registrierung erhältst du viele nachhaltige Vorteile, die wir dir hier in aller Kürze aufzeigen möchten:

  • PSD steht für professionelles Know-how in den Bereichen Bildbearbeitung mit Photoshop, Fotografie, Webentwicklung, Layout- und Vektorbearbeitung, 3D-Bearbeitung mit Cinema 4D und Co.
  • Über 3.000 Tutorials mit druckbarer PDF-Datei und teilweise den zugehörigen Arbeitsmaterialien
  • Mehr als 1.900 Video-Trainings als Stream zur Direktanzeige und zum Download
  • Abruf von über 2.200 Downloads zu Photoshop-Presets, 3D-Modellen, Grußkarten, Texturen & Co
  • Zugriff auf ein sehr aktives Forum mit Antworten im Minutentakt
  • Deine Daten sind sicher. Sie werden nicht weitergegeben! Die Mitgliedschaft kann jederzeit und ohne Aufwand wieder gelöscht werden.
  • Registriere dich bei uns und du erhältst die Selection-DVD mit über 24 Stunden Video-Trainings zu Photoshop, InDesign uvm. als Download gratis (sofern Newsletter aktiviert). 




Reinschnuppern als Gast

Niemand kauft gerne die Katze im Sack, auch wenn sie kostenlos ist. Wir haben eine Handvoll Tutorials und Video-Trainings ausgesucht, die du auch als Gast ohne Registrierung ansehen kannst. Gefallen sie dir, stehen dir nach der Registrierung alle oben genannten Inhalte zur Verfügung.

Jetzt kostenlos registrieren!

Passend zum Inhalt empfehlen wir:

Photoshop-Workshop-DVD - Webdesign

Verwandle deine Stylevorlage! Dieses Webdesign-Training für Photoshop stellt mit seinen 32 Stunden Video-Training und diversen Text-Workshops eine breite Basis dar, um deine Inhalte meisterhaft ins Web zu transportieren!

  • Webdesign mit Photoshop: alle erstellten Layouts mit PSD-Arbeitsdateien
  • Umsetzung erstellter Weblayouts in HTML/CSS und jQuery
  • SEO-Tipps vom Feinsten zur Suchmaschinenoptimierung

Bring Pep ins Web! Mit diesem Training erhältst du für bestes Webdesign das richtige Know-how!

Jetzt informieren Trailer ansehen

Kommentare

  • Portrait von Jim_Bimbel

    Jim_Bimbel

    21.11.2013 - 22:13

    Danke für das Tutorial. Würde mich über weitere HTML/CSS-Tutorials freuen...

    • Portrait von DaKKK

      DaKKK

      19.01.2014 - 17:05

      Es freut mich, dass es dir gefällt. Wenn ich Zeit habe, kommt ein weiteres Tutorial :-) Einen bestimmten Wunsch?

  • Portrait von niclas123456789

    niclas123456789

    18.03.2013 - 23:57

    Wirklich gut anschauliches Tutorial !

    Jetzt habe sogar ivh es veratanden vielen dank :)

  • Portrait von MvG

    MvG

    27.02.2013 - 15:44

    Sehr kurzes & verständliches Tutorial! Danke, jetzt mss ich nie wieder auf die Funktion von AdobeDW zurückgreifen. der mir einen der umständlichsten JAVA Code erzeugt..

    Was mich noch interessieren würde wäre, wie ich es hinbekomme, einen Status hinzubekommen?
    Also wenn ich, sagen wir diese Bilder in der Navigation benutze, der Hoverstatus BLEIBT (sobald die Seite angezeigt wird)?

    Wäre über eure Hilfe sehr dankbar!

    Gruss
    Superlover

  • Portrait von valentina82

    valentina82

    03.01.2013 - 15:19

    Klasse Tut :)

    Vielen Dank!

  • Portrait von suessi

    suessi

    07.11.2012 - 15:23

    Super erklärt! Danke für dieses verständliche Tutorial! :)

  • Portrait von bennemann8

    bennemann8

    08.08.2012 - 19:06

    gut,schlicht,einfach erklärt.. ;)
    Danke

  • Portrait von Suzanne_Valadon

    Suzanne_Valadon

    06.08.2012 - 22:45

    Vielen Dank. Es funktioniert. Ein Flackern kann ich nicht feststellen.

  • Portrait von cocodina

    cocodina

    12.07.2012 - 20:48

    Prima, klappt gut... direkt ausprobiert... ich finds praktisch

  • Portrait von Yetikisdorf

    Yetikisdorf

    05.04.2012 - 10:10

    @ skiron: aber auch so wie du es macht, muß man ein gemeinsames Hintergrundbild für beide Zustände haben und es, wie im Tut richtig beschrieben um die halbe Höhe verschieben, damit es beim ersten Überfahren mit der Maus nicht flackert. Wenn man zwei einzelne Bilder nimmt, wird das Hoverbild erst beim Überfahren mit der Maus geladen. Deshalb flackerts...
    Und ob man ein externes Stylsheet nimmt, oder dass CSS in mit ind HTML Datei schreibt ist für die Funktion des Effekts sowieso unbedeutend. Das man bei Webprojekten normal externes CSS benutzt ist hier wohl allen klar.

    Wenn du dann noch zusätzliche Links auf der Seite hast, die das Hintergrundbild nicht gebrauchen können, musst du die noch extra stylen. Man spart in deiner Version spätestens dann weder Arbeit noch Code.



    geändert von Yetikisdorf am 05.04.2012 - 10:17
  • Portrait von skiron

    skiron

    05.04.2012 - 08:33

    Nettes Tutorial aber warum so umständlich?
    Dieser Effekt lässt sich auch ganz normal in der externen CSS erreichen in dem man dem a-Tag die Eigenschaft display:block zuweist. Bei a:hover wird dann das Bild gewechselt. Wenn man seine Links dazu noch als Liste sortiert kann man bequem auf Position, Grösse etc zugreifen. Für die Navigation sollte zusätzlich ein div-Layer angelegt werden.



    geändert von skiron am 05.04.2012 - 08:35
  • Portrait von Yetikisdorf

    Yetikisdorf

    05.04.2012 - 00:39

    @Ploper: Beim erstem Mouseover flackert es in deiner Version kurz, danach funktioniert auch deine Gedankenexperiment. Da aber der im Tut erklärte Effekt gerne für Navigationen benutzt wird, würde ein flackern stören. Daher ist es, so wie im Tut erklärt, vieeel besser.

  • Portrait von Graf_x

    Graf_x

    04.04.2012 - 15:31

    Interessante Möglichkeit. Muss ich direkt einmal ausprobieren. Danke

  • Portrait von Quietisolation

    Quietisolation

    04.04.2012 - 12:01

    Das Prinzip und die Erklärung ist prima!
    Aber wird dadurch nicht die Trennung zwischen Inhalt (HTML-Struktur) und Design (CSS) aufgeweicht?

    • Portrait von DaKKK

      DaKKK

      04.04.2012 - 13:01

      Ja schon, aber nur ein bisschen. Ich denke, dass das ein guter Kompromiss ist, den ich gerne eingehe, um einen Effekt zu erzielen.

  • Portrait von DaKKK

    DaKKK

    04.04.2012 - 09:46

    Hi,
    so wie ich dich jetzt verstehe, würde das auch funktionieren. Nur bräuchtest du dann für jedes weitere Bild eine neue Klasse .bild, in die du ein Bild lädst.
    Durch die gezeigte Methode hast du lediglich eine Standardklasse, in die du einfach das entsprechende Bild lädst. Positiver Nebenaspekt: Dadurch, dass du aus zwei Bildern eines machst, werden auch die HTTP-Requests reduziert. Auch bleibt das Bild beim Wechsel nicht kurz stehen, da der Effekt ja aus einem einzigen Bild besteht und dieses komplett geladen wird.
    Gruß DaKKK



    geändert von DaKKK am 04.04.2012 - 09:56
  • Portrait von Ploper

    Ploper

    04.04.2012 - 09:29

    Interessanter Ansatz, habe das noch nie so versucht.
    Ein Gedankenexperiment: Nur die Klassen .bild und .bild:hover würden reichen, indem bei .bild nur das erste Bild als Hintergrund angegeben wird und bei .bild:hover nur das zweite Bild. Sollte gehen, oder?
    Allerdings: bleibt vielleicht die Anzeige beim laden des zweiten Bilds kurz stehen?
    Gruss Ploper

Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.

Anleitung (Bilder + Extras werden nur für Mitglieder eingeblendet)


Es gibt mehrere Wege, einen Rollover-Effekt zu erstellen. Hier zeige ich euch, wie ihr diesen Effekt ganz einfach mit CSS erstellen könnt. Als Beispiel erstelle ich eine Grafik, die beim Hovern die Hintergrundfarbe wechselt.


Schritt 1

Als Erstes muss die entsprechende Grafik erstellt werden. In diesem Beispiel gehe ich von den Maßen 150px x 150px aus. Öffnet dazu euer Bildbearbeitungsprogramm und erstellt ein neues Dokument mit der gleichen Breite (150px), jedoch der doppelten Höhe (300px). Warum die doppelte Höhe? Nun, die Grafik besteht aus zwei aneinandergehängten Bildern. Durch CSS wird die Grafik um die Höhe des eigentlichen Bildes (150px) verschoben.


Schritt 2

Nachdem wir das Dokument mit den Maßen 150px x 300px erstellt haben, fügen wir das Originalbild mit den Maßen 150px x 150px ein und setzen es nach unten an den Rand.

Bilder


 

Schritt 3

Anschließend fügen wir oben ein weiteres Bild mit den Maßen 150px x 150px ein und setzen es an den oberen Rand.

Zur Erklärung:
Das obere Bild wird im Normalzustand angezeigt. Sobald man mit der Maus über das Bild fährt, wechselt es zum unteren. In diesem Fall tausche ich lediglich die Hintergrundfarbe aus. Ihr könnt aber natürlich jedes beliebige Bild nehmen.

Nachdem ihr das zweite Bild oben eingefügt habt, sollte es etwa so aussehen:

Bilder


Jetzt speichern wir die Grafik unter einem eindeutigen Namen ab (meins heißt "test.jpg") und widmen uns dem Code.


 

Schritt 4

Wir erstellen eine HTML-Datei. Ich verzichte für dieses Beispiel auf eine externe CSS-Datei und füge den Code in den Head.

Dazu definieren wir im Head einen Bereich für CSS, indem wir <style type="text/css"></style> einfügen.

Das Ganze sollte dann wie folgt aussehen:

<html>
<head>
<title>CSS-Tutorial</title>
<style type="text/css">

</style>

</head>

<body>
</body>
</html>


Schritt 5

Nun kommen wir zum eigentlichen Code. Er besteht aus drei Styleangaben (die Klassen könnt ihr natürlich nennen, wir ihr wollt).


1

Zuerst die Klasse "bild". Diese ist wie folgt aufgebaut:
.bild {
    width:150px;
    height:150px;
    display:block;
    margin: 0 auto;
    text-indent:-99999px;
}

Diese Klasse ist quasi der Kasten, in dem eure Grafik angezeigt wird. Daher müsst ihr hier die Maße angeben, die das eigentliche Bild hat. Also in diesem Fall 150px x 150px.

Die Angabe "display:block" ist sehr wichtig und darf nicht vergessen werden, da es ansonsten zu Anzeigefehlern kommt. Die Margin-Angabe ist nicht Pflicht, sollte aber wie oben eingefügt werden.

Da wir die Grafik als Hintergrundbild in CSS laden und nicht in der HTML-Datei über <img.../>, haben wir das Problem, dass wir keinen Alternativtext haben.

Um dieses Problem zu lösen, geben wir dieser Klasse einen negativen text-indent mit einem sehr hohen Wert. Dann ist der Text nachher zwar da, aber für den Benutzer nicht sichtbar.


2

Die zweite Styleangabe ist die Klasse ".bild:hover".

 

.bild:hover {
    background-position: 0 -150px;
}

Hier wird angegeben, um wie viele Pixel die Grafik beim Hovern verschoben wird.

Zur Erinnerung:
Unsere Bilder sind einzeln 150px hoch, die erstellte Grafik 300px. Da wir in der Klasse .bild eine Höhe von 150px definiert haben, wird lediglich die obere Hälfte und somit nur das obere Bild angezeigt. Das untere ist nicht zu sehen.

Durch diese Styleangabe wird die Grafik um 150px verschoben, sodass das obere Bild verschwindet und das untere erscheint.


3

Die dritte und letzte Styleangabe, in meinem Fall nenne ich die Klasse .rolloverbild, lädt die Grafik.

.rolloverbild {
    background: url(test.jpg) no-repeat;
}

 
Hier gebt ihr einfach die url zu eurer Grafik an. Wenn ihr mehrere Grafiken mit den Maßen 150px x 150px mit diesem Effekt auf eurer Seite einbinden wollt, müsst ihr lediglich Schritt 3 wiederholen. Also z.B. eine weitere Klasse namens .rolloverbild2 anlegen.

Euer Quelltext sollte nun folgendermaßen aussehen:

<html>
<head>
<title>CSS-Tutorial</title>
<style type="text/css">
.bild {
    width:150px;
    height:150px;
    display:block;
    margin: 0 auto;
    text-indent:-99999px;
}
.bild:hover {
    background-position: 0 -150px;
}
.rolloverbild {
    background: url(test.jpg) no-repeat;
}
</style>
</head>

<body>
</body>
</html>


Schritt 6

Mit CSS sind wir nun soweit fertig. Kümmern wir uns also um HTML.

Im Body fügen wir einen Link ein. Dieser ist wie folgt aufgebaut: <a href="#"></a>

Diesem Link fügen wir die zwei Klassen .bild und .rolloverbild hinzu. In unserem Fall sieht der Link wie folgt aus:

<a href="#" class="bild rolloverbild">Bildtitel</a>

Die Klasse .bild definiert die Breite und Höhe des angezeigten Bildes. Die Klasse .rolloverbild lädt das Bild. Wenn das Bild als Link dienen soll, fügt ihr anstelle der # einfach den entsprechenden Link ein.

Zum Schluss noch einen Alternativtext einfügen (hier Bildtitel) und wir sind fertig!

Euer Quelltext sollte jetzt so aussehen:
<html>
<head>
<title>CSS-Tutorial</title>
<style type="text/css">
.bild {
    width:150px;
    height:150px;
    display:block;
    margin: 0 auto;
    text-indent:-9999px;
}
    
.bild:hover {
    background-position: 0 -150px;
}

.rolloverbild {
    background: url(test.jpg) no-repeat;
}

</style>
</head>

<body>
<a href="#" class="bild rolloverbild">Bildtitel</a>
</body>
</html>


Öffnet jetzt die HTML-Datei mit einem Browser. Das Bild sollte sich beim Überfahren mit der Maus ändern.

 
Wollt ihr weitere Bilder einfügen, müsst ihr lediglich die Klasse, die das Bild lädt, im CSS definieren, den Link duplizieren und die Klasse .rolloverbild austauschen.

Bsp:
<a href="#" class="bild rolloverbild"></a>
<a href="#" class="bild rolloverbild2"></a>
<a href="#" class="bild rolloverbild3"></a>
...

Bilder


Ich hoffe, dass euch dieses Tutorial gefallen hat und ihr das Gezeigte für euch nutzen könnt.

vBulletin 0.021 ZF-App 0.586 Total 0.607