8 einfache CSS3 Transitions (Übergänge/Überblendungen) erstellen

8 tolle CSS3 Übergänge, welche den Leser so richtig beeindrucken

Image may be NSFW.
Clik here to view.

CSS3 bietet dem Nutzer eine Vielzahl von Möglichkeiten, um verblüffende und wunderschöne »Transitions« (Übergänge und Überblendungen) zu erstellen und in HTML-Webseiten einzubauen.

Dass mit CSS3 interessante Animationen und Effekte ohne Javascript erstellt werden können, ist schon lange bekannt. Dabei werden HTML-Elemente mit :hover und :focus zuverlässig in allen Browsern animiert. Die dabei erreichten Animationen wirken mit :hover oder :focus fast wie ein Schalter: an, aus, an, aus.

8 interessante und coole CSS3 Transitions

Auf der Webseite Webdesigner Depot habe ich ein interessantes Tutorial zur Erstellung von CSS3-Animationen gefunden. Eindrucksvoll wird dabei gezeigt, wie Sie die CSS3 Transitions für beeindruckende und schicke Hover-Effekte nutzen können.

Der Einsatz ist in den folgenden 8 Demobeispielen sehr einfach, die einzelnen Eigenschaften intuitiv und sicher der leichteste Einstieg in den Bereich der animierten Inhalte.

HTML-Seite

CSS-Box Grundgerüst

8 Demobeispiele mit den entsprechden CSS-Anweisungen

#1 3D Shadow/3D Schatten – Demobeispiel

.threed:hover
{
        box-shadow:
                1px 1px #53a7ea,
                2px 2px #53a7ea,
                3px 3px #53a7ea;
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
}

#2 Change Color/Farbwechsel – Demobeispiel

.color:hover
{
        background:#53a7ea;
}

#3 Fade In/Einblendung – Demobeispiel

.fade
{
        opacity:0.5;
}
.fade:hover
{
        opacity:1;
}

#4 Grow/Wachsen-Größer werden – Demobeispiel

.grow:hover
{
        -webkit-transform: scale(1.3);
        -ms-transform: scale(1.3);
        transform: scale(1.3);
}

#5 Inset Border/Rahmen-Einblendung – Demobeispiel

.border:hover
{
        box-shadow: inset 0 0 0 25px #53a7ea;
}

#6 Rotate/Drehen – Demobeispiel

.rotate:hover
{
        -webkit-transform: rotateZ(-30deg);
        -ms-transform: rotateZ(-30deg);
        transform: rotateZ(-30deg);
}

#7 Shrink/Schrumpfen-Verkleinern – Demobeispiel

.shrink:hover
{
        -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
        transform: scale(0.8);
}

#8 Square To Circle/Verwandlung in Kreis – Demobeispiel

.circle:hover
{
        border-radius:50%;
}