CSS-Tricks: 5 verschiedene Hover-Effekte nur mit CSS3

Wie Sie nur mit CSS3 wunderschöne Animationen und Übergänge erstellen

5-interessante-css3-effekte

Mein heutiges kurzes Tutorial zeigt Ihnen, wie einfach und elegant Sie mit CSS3 interessante und schöne Hover-Effekte erstellen können. Wenn Sie mit der Maus über die 6 verschiedenen Grafiken fahren, erhalten Sie die weiter unten stehenden 5 Mouseover-Animationen, die Sie bei Bedarf auch völlig frei für Ihre Projekte verwenden können.

Der Originalartikel zum meinen Ausführungen stammt vom März 2014 und erschien auf der Webseite von Queness.com unter dem Titel Create Different Styles of Hover Effects with CSS3 Only. Dort finden Sie auch einen DEMO- und DOWNLOAD-Button, um die Effekte einzeln anzusehen bzw. das gesamte Beispiel herunterzuladen.

Link zur Demoseite: hier anklicken!!!
Link zum Download: hier anklicken!!!

Eine tolle Webseite zum Thema CSS3 Effekte (Transformationen, Animationen, Übergänge) finden Sie hier: James Star – Webmasterhilfe

5 verschiedene CSS3-Animationen

Einzellinie, Doppellinien, Oben & Unten, Zoom und Drehung: das sind die 5 CSS3-Effekte, die ich Ihnen nun kurz vorstellen möchte.

HTML-Basisstruktur (hier für Beispiel #01!

<div class="item item-type-line">
<a class="item-hover" href="http://dribbble.com/shots/1313878-Hand-Lettering-Process" target="_blank">
<div class="item-info">
<div class="headline">Hand Lettering Process</div>
<div class="line"></div>
<div class="date">February 29, 2014</div>
</div>
<div class="mask"></div>
</a>
<div class="item-img"><img src="images/1.jpg" alt="" /></div>
</div>

Grundsätzlich haben die 5 verschiedenen Animationen einen sehr ähnlichen HTML-Aufbau und die gleiche Basic CSS. Die Hauptunterschiede finden Sie für jeden Effekt in der speziellen CSS, welche mit dem HTML-Element <style> direkt innerhalb der HTML-Datei eingebunden ist.

CSS-Basisanweisungen für alle 5 Animationen

/* Page Styling */
body {
        font-family: 'Roboto Slab', serif;
        font-size:14px;
        background: url(images/bg.gif) repeat;
}

.container {
        width: 940px;
        margin:0 auto;
        padding:10px;
}


#nav {
        overflow:hidden;
        margin:15px auto;
        padding:0;
        list-style:none;
        width: 480px;
}
        #nav li {
                float:left;
                padding:5px;
                list-style:none;
                text-align:center;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                -o-box-sizing: border-box;
        }

        #nav li a {
                text-decoration:none;
                color:#fff;
                display:block;
                width: 100%;
                padding:5px 10px;
                background: #666;
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                -ms-border-radius: 5px;
                -o-border-radius: 5px;
                border-radius: 5px;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                -o-box-sizing: border-box;
                -webkit-transition: all 500ms ease-out;
                -moz-transition: all 500ms ease-out;
                -o-transition: all 500ms ease-out;
                transition: all 500ms ease-out;
        }

                #nav li a:hover,
                #nav li.current a {
                        background: #ccc;
                        color:#666;
                }


#info {
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
background:#fcf8e3;
border:1px solid  #fbeed5;
width:70%;
max-width:900px;
margin:0 auto 20px auto;
font-family:arial;
font-size:12px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
}

#info .info-wrapper {
        padding:10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;

}

#info a {
        color:#c09853;
        text-decoration:none;
}

#info p {
        margin:5px 0 0 0;
}

Die speziellen CSS-Befehle für jede einzelne Animation (jeden Übergang) finden Sie, wie bereit weiter oben angeführt, direkt in den jeweiligen HTML-Dateien im Header-Bereich.

#01. CSS3-Effekt Einzellinie: Demovideo ansehen

#02. CSS3-Effekt Doppellinie: Demovideo ansehen

#03. CSS3-Effekt Oben & Unten: Demovideo ansehen

#04. CSS3-Effekt Zoom: Demovideo ansehen

#05. CSS3-Effekt Drehung: Demovideo ansehen

Wichtig!
Ich möchte Sie darauf aufmerksam machen, dass diese 5 Beispiele nur in den neuesten und aktuellsten Browsern funktionieren. In den Mobilversionen (Smartphone, Tablet) werden die Übergänge und Animationen möglicherweise fehlerhaft bis gar nicht dargestellt!
Tweet about this on TwitterShare on Google+1Share on Facebook0Email this to someone

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *