Tutorial Hover CSS3 Transitions - gefunden auf tympanus.net

Dieses Tutorial ist nur für fortgeschrittene Benutzer geeignet, die sich bereits etwas mit CSS3 auskennen.

Bitte ladet Euch die Demo-Dateien oben am Link herunter. Ihr werdet 10 verschiedene Beispiele mit den entsprechenden CSS-Dateien finden. Ich habe hier das erste Beispiel in NOF eingebaut und die CSS auch noch geändert. Ich zeige hier also lediglich meine CSS-Dateien sowie den Einbau in NOF.

Zunächst setzt Ihr die Links auf Eure CSS-Dateien “Zwischen Head Tags” in die HTML Eurer Seite. Achtet dabei wie immer auf die relative Pfadangabe zu den CSS-Dateien (hier im gleichen Verzeichnis). Wie Ihr erkennen könnt, habe ich für diese CSS-Dateien ein Verzeichnis ‘css’ erstellt, indem sich diese beiden Dateien befinden, die Ihr auch hier angucken oder downloaden könnt (ich habe einige /* Kommentare */ eingetragen):

Speichern der CSS-Datei: > Menü oben > Datei > Seite speichern unter

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Zwischen Head Tags

<link rel="stylesheet" type="text/css" href="css/style_common.css" />
<link rel="stylesheet" type="text/css" href="css/style1.css" />

Dann habe ich mir zur Anzeige der Bilder ein Textfeld auf die volle Breite meines Layouts aufgezogen und die entsprechenden CSS-Klassen aus meinen beiden CSS-Dateien oben in DIVs eingetragen. Der Code unten gehört in den HTML-Code Editor des Textfeldes.

> Textfeld doppelklicken (Cursor blinkt) > Fenster “Text-Eigenschaften” > mittlere Button oben “Textfeld” > Button ”HTML” > Code einfügen

Natürlich müsst Ihr Eure Bilder angeben. Ich habe für meine Bilder hier ein Verzeichnis ‘images’ angelegt und dann müsst Ihr dieses Verzeichnis ‘images’ mit den Bildern und natürlich auch das Verzeichnis ‘css’ mit den beiden CSS-Dateien mit Eurem FTP-Programm auf Euren Server kopieren.

Weiterhin könnt Ihr dann Eure Überschrift zwischen dem <h2> Tag, den Text zwischen dem <p> Tag und auch einen Link zwischen dem <a> Tag eintragen und natürlich beliebig viele Bilder (DIV-Container) hinzufügen. Achtet auch hier wieder auf die korrekte relative Pfadangabe zu den Bildern.

                <div class="view view-first">
                    <img src="images/elefant.jpg" />
                    <div class="mask">
                        <h2>Elefant</h2>
                        <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
                        <a href="./Tutorial/tutorial.html" class="info">Tutorial</a>
                    </div>
                </div> 
                <div class="view view-first">
                    <img src="images/loewe.jpg" />
                    <div class="mask">
                        <h2>Löwe</h2>
                        <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
                        <a href="./Demo-2/demo-2.html" class="info">Demo 2</a>
                    </div>
                </div> 
                <div class="view view-first">
                    <img src="images/vogel.jpg" />
                    <div class="mask">
                        <h2>Vogel</h2>
                        <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
                        <a href="./Tutorial/tutorial.html" class="info">Tutorial</a>
                    </div>
                </div>

Viel Spaß!

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik