CSS Transform und Transition am Beispiel eines Call-to-Action-Elementes - Tag 4 im CSS3 Adventskalender 2011

CSS Transform und TransitionDer Sinn und Zweck der hinter der Gestaltung von Webseitenelementen im Detail steckt, ist der die Attraktivität der Elemente derart zu erhöhen, dass diese bei Call-to-Action-Elementen wie einem Link oder Button, den Webseitenbesucher zu einer Aktion, sprich einer Konversion, zu "führen". Dies geschieht bei den beiden genannten Elementen mit einer aussagekräftigen "Betextung", die den Anreiz schafft auf dieses Element klicken zu wollen oder aber eben durch eine entsprechend visuelle Gestaltung, die dieses Ziel im Idealfall zusätzlich verstärkt. Das heutige Türchen des CSS3-Advenstkalenders, soll diesen beiden Aspekten einen weiteren hinuzfügen - einen Überblendeffekt bei MouseOver (Produktabbildung "verwandelt" sich in Produktpreis), auf Basis der Kombination der CSS3 Module Transition & Transform, ohne JavaScript und mit lediglich ein paar Zeilen HTML und CSS.

CSS Transform und Transition mit einem Link-ElementAbb. 1 Link-Elemente im Button-Style deren MouseOver-Effekt im weiteren Verlauf dieses Artikels beschrieben wird

Die hier abgebildeten Webseitenelemente, stellen die Umsetzung eines Link-Elemente in verschiedenfarbigen Button-Styles vor. Grundlage dieses CSS3 Tutorials ist Link-Element. Die auf dieses Element angewandten Eigenschaften bezüglich der Innenabstände, der Höhe, der Breite, dem Border-Radius, u.v.a.m. beziehen sich auf die Klasse .btn. Während die für die individuelle Gestaltung notwendige Klasse professional bspw. den Farbverlauf im Hintergrund definiert.

Modernes Webdesign mit CSS - Das neue Buch!

Die Bezeichnungen der hier verwendeten Klassen richten sich nach der "Funktion basierend auf den Inhalten" und nicht auf die Position (.top, .left oder .contentLink) oder Darstellung (.orange, .green oder .blue). Denn die Position oder die Darstellung kann sich ändern, die Bedeutung des Elementes nicht (Link bleibt Link, Überschrift bleibt Überschrift, ...).

CSS Transform und Transition - HTML-Code des Links
<a href="#" class="btn professional"></a>

Bis auf wenige Eigenschaften dieses ersten CSS-Blocks möchte ich an dieser Stelle nicht näher auf alle Eigenschaften eingehen, da diese erstens bereits bekannt sein sollten und zweitens sich nicht mit den Eigenschaften beschäftigen, die Hauptbestandteil dieses Artikel sein sollen. Nur soviel - die linksbündige Einrückung der Beschreibung ("Professional - Jetzt 30% Rabatt!") von 100px, sind dafür da um den beim MouseOver-Effekt einzublendenen Preis Platz zu verschaffen. Overflow:hidden sorgt dafür, dass bei der Vergrößerung (Transform) des Icons dieses beim Erreichen der Ausmaße des Links im Button-Style, dieses abschneidet (siehe Abbildung 6). Im zweiten CSS-Block werden die Farbverlaufs-Eigenschaften des Links defineirt, der den "Professional-Button" darstellen soll.

Linkausmaaße anlegen
.btn {
    padding:0 0 0 100px;
    width:170px;
    height:85px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    display:block;
    position:relative;
    overflow:hidden;
}
...
.professional {
    border:1px solid #ee6324;
    background:#ee6324;
    background:-webkit-gradient(linear,left top,left bottom,
    color-stop(#f56300,0),color-stop(#ee6324,1));
    background:-webkit-linear-gradient(top, #f56300 0%, #ee6324 100%);
    background:-moz-linear-gradient(top, #f56300 0%, #ee6324 100%);
    background:-o-linear-gradient(top, #f56300 0%, #ee6324 100%);
    background:linear-gradient(top, #f56300 0%, #ee6324 100%);
    filter:progid:DXImageTransform.Microsoft.gradient
    ( startColorstr='#f56300', endColorstr='#ee6324',GradientType=0 );
}
...

So weit so gut. Link im Button-Style ist erstellt. Ohne Betextung und weitere Gestaltung, ist dieser Link noch nicht sonderlich aussagekräftig und auch seine mögliche Konversionrate, dürfte zu wünschen übrig lassen. Daher weiter mit dem nächsten Schritt, dem Anlegen und Gestaltung des "Button-Imitates".

CSS Transform und Transition - Link ohne InhalteAbb. 2 Darstellung des Link-Elementes im Button-Style

Im nun folgenden nächsten Schritt, wird dem Link zum Produktangebot der Professional-Version einer fiktiven Software, daher folgende Linktextbeschreibung hinzugefügt: "Professional - Jetzt 30% Rabatt!" Dieser Text wird in ein span-Element mit der Klasse description gefasst.

CSS Transform und Transition - HTML-Code des Links
...
<a href="#" class="btn professional">
    <span class="description">
        <strong>Professional</strong> Jetzt 30% Rabatt!
    </span>
</a>
...

Dieses span-Element wird mit der Block-Eigenschaft versehen und entsprechend der Vorgaben innerhalb des "Button-Imitates" ausgerichtet.

Linktext-Beschreibung
.description {
    padding-top:13px;
    display:block;
    font-size:16px;
}
.description strong {
    display:block;
    font-size:25px;
}
...

Dank des nun vorhandenen Beschreibungstextes dieses Links, kann man nun zumindest schonmal erkennen was dieser bezwecken soll - zur Interkation aufrufen. Der nun noch vorhanden Platz im linken Bereich des Links wird im nächsten Arbeitsschritt dazu verwendet um dort eine Produktabbildung und den dazugehörigen Preis unterzubringen.

CSS Transform und Transition - LinkbeschreibungAbb. 3 Darstellung des Link-Elementes mit "Betextung"

Aufgrund des doch recht geringen Platzes für Preis & Produktabbildung und um die Attraktivität für eine mögliche Interaktion zu erhöhen, wird die Produktabbildung beim MouseOver vom der textlichen Darstellung des Preises für dieses Produkt abgelöst. Wie einfach dies geht, erfahren Sie im folgenden Arbeitsschritt. Hierzu wird zuerst ein weiteres span-Element angelegt, welches die aussagekräftige Klasse .price zugewiesen bekommt. Danach wird die Produktabbildung, in diesem Fall mit der Dateibezeichnung ic-Professional.png, dem HTMl-Code hinzugefügt.

Produktabbildung & -preis hinzufügen
...
<a href="#" class="btn professional">
    <span class="price">99€</span>
    <img src="ic-Professional.png" alt="Professional Version" />
    <span class="description">
        <strong>Professional</strong> Jetzt 30% Rabatt!
    </span>
</a>
...

Diese beiden Elemente werden nun, wie im folgenden CSS-Abschitt hoffentlich gut zu erkennen ist, innerhalb des Links an in etwa der selben Stelle absolut ausgerichtet. Ausschlaggebend für die Ausrichtung, sind natürlich die Ausmaße (Bildmaße vs. Schriftgröße für die Darstellung des Preises), daher sind die Positionen nicht identisch miteinander. Wirklich interessant sind für uns sind eigentlich nur die letzten vier Zeilen mit der Eigenschaft Transition und den dazugehörigen Werten die sich verändern sollen all .5s ease-in-out. Diese besagen, dass die Produktabbildung auf die diese Eigenschaften angewendet werden, bei einer späteren Aktion (den bereits mehrfach engesprochenen MouseOver-Effekt) innerhalb von 0.5 Sekunden einen Übergang von einem in den anderen zustand erzeugen wird. Es eben nur noch geklärt welcher, denn die Eigenschaften für :hover sind noch nicht angelegt. Die verschiedenen Präfixe (-moz-, -webkit-, -o-) für diese Eigenschaft sind notwendig, damit die entsprechenden Browser diese Eigenschaft korrekt umsetzten können. Denn noch nicht jede aktuelle Browserversion kommt ohne Browser-Präfix aus.

Transition Eigenschaften - Produktabbildung
.btn img {
    position:absolute;
    left:15px;
    top:10px;
    border:none;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

Im zweiten CSS Block wird dem Preis die gleiche Eigenschaft zugewiesen, mit dem Unterschied die Aktion nach 0.4 Sekunden zu beginnen. Warum früher? Damit der Preis bei der späteren Überblendung dieser beiden Elemente miteinander (siehe Abbildung 6) bereits zu erkennen ist, wenn die Transparenz der Produktabbildung bereits sichtbar zunimmmt. Damit wären wir auch bei einer weiteren wichtigen Eigenschaft mit dazugehörigen Wert angelangt, die für dieses CSS3 Tutorial durchaus von immenser Bedeutung ist. Die Sichtbarkeit Opacity des Produktpreises. Dieses mit der klasse .price versehene Element wird erst einmal auf Null gesetzt, denn schliesslich soll initial die Produktabbildung sichtbar werden.

Transition Eigenschaften - Produktpreis
.btn .price {
    position:absolute;
    font-size:40px;
    top:20px;
    left:15px;
    color:#fff;
    opacity:0;
    text-shadow:0px 1px 1px rgba(255,255,255,0.5);
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

Der initiale Aufruf des Link im Button-Style erfolgt nun also mit Produktabbildung und sieht nun wie in der folgenden Abbildung 4 aus.

CSS Transform und Transition - BilddarstellungAbb. 4 Darstellung des Link-Elementes mit Produktabbildung

Da nun aber nicht wie bei den meisten Links im Button-Style einfach nur die Farbe bei MouseOver geändert wird oder ein Linkunterstreichung mittels text-decoration stattfindet, wird diese Abbildung bei MouseOver in einem fliessenden Übergang durch den Produtkpreis, wie in der folgenden Abbildung 5, ersetzt.

CSS Transform und Transition - Abbildung des PreisesAbb. 5 Darstellung des Link-Elementes mit Produktpreis

Wie dies mit einer ansprechenden "Transformation" erfolgen kann, beschreibt der letzte abschliessende CSS-Block. In diesem wird festgelegt, welche "Bewegung" bei MouseOver innerhalb der oben definierten Zeitintervalle durchgeführt werden sollen. Die Eigenschaft Transform mit dem dazugehörigen Eigenschaften der Skalierung der Produktabbildung um den Wert 10, bdeutet nichts anderes als das die Produktabbildung bei MouseOver in der Zeit von 0.5 Sekunden von seiner Ausgangsgröße um den Wert 10 vergrößert wird, während die Abbildung im selben Zeitraum an Transparenz zunimmt und somit am Ende des Intervalls vollkommen durchsichtig ist. Damit der in diesem CSS3 Beispiel angepriesene neue Produktpreis mit einem Rabatt von 30% Rabatt überhaupt sichtbar wird, muss die im vorangegangen Arbeitsschritt definierte vollkomme Transparenz nun wieder aufgehoben werden.

Transform Eigenschaften
.btn:hover img {
    -webkit-transform: scale(10);
    -moz-transform: scale(10);
    -ms-transform: scale(10);
    -o-transform: scale(10);
    transform: scale(10);
    opacity:0;
{
.btn:hover .price {
    opacity:1;
}

Das wiederum führt dazu, dass der Preis wie in der folgenden Abbildung 6 bei MouseOver nach 0.4 Sekunden wieder vollkommen sichtbar werden kann und somit in einem "Überblendeffekt" von der Produktabbildung in den Produktpreis übergehen kann.

CSS Transform und Transition - Transfromation des LinksAbb. 6 Darstellung des Link-Elementes - Überblendeffekt auf Basis von CSS Transform und Transition

Wer das hier beschriebene Verhalten dieses Links im Button-Style nicht nur anhand der Abbildung und der Code-Sbnippets verstehen möchte, dem sei die Demo-Version dieses CSS3 Tutorials empfohlen.

View CSS Transform Demo

CSS3 Transform & Transition - Browser-Support

Unabhängig von den Möglichkeiten die sich mit den CSS3 Modulen rund um CSS Transition und Transform ergeben, ist wie die folgende Abbildung zeigt, auch die Browser-Unterstützung dieser Eigenschaften mittlerweile durchaus beachtlich. Wer von euch also in dem Besitz einer aktuellen Version von Google Chrome, Safari, Firefox und Opera ist, kann die Demo-Version dieses CSS3 Tutorials auch im Browser nachvollziehen. Aber auch aus dem Microsoft-Lager gibt es positives zu berichten, denn die Preview-Platform des Internet Explorers 10 kann diese Eigenschaft verstehen und korrekt umsetzen.

CSS Transform & Transition - Browser-SupportCSS3 Module Transform & Transition werden von vier der fünf relevantesten Browsern unterstützt

Für alle anderen Browser die diese CSS3 Eigenschaft nicht umsetzen können, ist die Abbildung 4 der initiale und zugleich finale Zustand. Wer hier eine Optimierung erzielen möchte, kann bspw. mittels enstprechender Eigenschaften für diese IE-Versionen bspw. einen Farbwechsel bei MouseOver erzeugen.

  1. Marion 04 Dez 2011, 12:12

    Das ist ja mal eine klasse Idee! Werde ich gleich mal bei einem aktuellen Projekt mit einbauen. Bei dem Browser-Support sollte das doch machbar sein!

    Freu mich schon auf das nächsten Türchen!


  2. Sebastian 05 Dez 2011, 08:43

    Du hast wirklich nicht zu viel versprochen! Die beiden bisherigen Beiträge sind wirklich interessant, vermitteln neues Wissen und inspirieren für eigene Ideen. DANKE!

    Wann werden eigentlich die Gastbeiträge von Jonas und David veröffentlicht?


  3. Sebastian K. 05 Dez 2011, 09:42

    Wenn ich zurückschaue, wie kompliziert oder eher aufwändig die Animationen damals per gif waren und man nun solch schöne Möglichkeiten hat, dann kommen mir ganz leicht die Tränen... *g.

    Sehr schöne und leicht nachzuvollziehendes Tutorial. Danke.


  4. Robine
    05 Dez 2011, 10:55

    Schöne Sache und die Umsetzung ist gut nachzuvollziehen!
    Die Adventseinträge finde ich übrigens sehr gut, eine tolle Idee.

    Schöne Grüße!


  5. Kai
    06 Dez 2011, 08:14

    Ein tolles und nützliches Tutorial für einen schönen Effekt.

    Besten Dank!


  6. Jürgen Liechtenecker
    06 Dez 2011, 15:53

    very nice, haben wir gleich einen anwendungsfall dafür. danke


  7. Malte 02 Jan 2012, 19:16

    Sehr schicker Effekt und gut verständliches Tutorial. Good Job


  8. Martin Tauber
    25 Jun 2012, 11:07

    Sehr coole Buttons! Vielen Dank für die Anleitung. Werde ich demnächst einmal anwenden!


  9. Gunnar Bittersmann
    16 Jul 2012, 13:01

    Der präfixfreie Wert für den Gradienten ist falsch. Es muss heißen
    background:linear-gradient(to bottom, #f56300 0%, #ee6324 100%);
    oder einfach
    background:linear-gradient(#f56300 0%, #ee6324 100%);
    denn 'to bottom' ist Default.
    Siehe auch IEBlog.
    BTW, die Angaben '0%' und '100%' sind auch überflüssig.


  10. Webstandard-Team 16 Jul 2012, 13:59

    @Gunnar: Vielen Dank und die Verlinkung. Diese machen deutlich, dass die von dir erwähnte und aktuelle Syntax noch nicht sonderlich lange existiert. Daher wird es wohl mal Zeit für einen Artikel mit der aktuellen Syntax, wobei auch diese irgendwann mal nicht mehr "die aktuelle Syntax"sein wird.


  11. Gunnar Bittersmann
    16 Jul 2012, 20:15

    Nun ja, zum Zeitpunkt dieses Artikels existierte die jetzige Syntax (mit to) schon.
    Ich würde auch nicht erwarten, dass sich die Syntax nochmal ändert; CSS Image Values and Replaced Content Module Level 3 ist inzwischen Candidate Recommendation.


  12. Max 22 Jan 2013, 11:28

    In diesen Tutorials sieht immer alles so einfach aus :) Hoffe wenn ich mich da mal ransetze gelingt mir das auch so.


Artikel kommentieren





HTML ist erlaubt und ausdrücklich erwünscht, wobei folgende Tags eingesetzt werden können: <a href="" title=""></a> <b></b> <cite></cite> <code></code> <em></em> <strong></strong>


authimage