Hinweis
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, sich anzumelden oder das Verzeichnis zu wechseln.
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, das Verzeichnis zu wechseln.
CSS3-Effekte, -Übergänge und -Animationen
Als Webentwickler haben Sie drei Tools zur Verfügung, mit denen Sie Ihre Vision Wirklichkeit werden lassen können. HTML, CSS und JavaScript. Das war nicht immer so. In der Vergangenheit mussten Sie für scheinbar einfache Effekte wie Textschattierungen oder Farbverläufe verschiedene Bildbearbeitungen anwenden und konnten nicht auf CSS und HTML zurückgreifen. Zwar gab es JavaScript, aber im Allgemeinen waren umfangreiche Codierungen erforderlich, um die Webanwendung flexibel und lebendig zu gestalten. Mit diesen Techniken war es nicht nur kompliziert, die Anwendung neu zu erstellen, jede noch so kleine Änderung war arbeitsaufwendig.
Dank CSS3 und HTML5 gehören die Bildbearbeitungen und JavaScript-Verrenkungen zum Glück der Vergangenheit an. Mit einfachem deklarativem Markup können Sie reibungslose Interaktionen und großartige Erlebnisse ermöglichen.
Wenn Sie wie ich sind, mussten Sie jetzt vielleicht ein bisschen lachen. Denn natürlich bedeuten CSS und HTML nicht, dass alles ganz einfach ist. Sie werden aber sehen – wenn Sie ein paar neue CSS-Eigenschaften kennengelernt und in tollen Demos ausprobiert haben, werden Sie unzählige Stunden bei der Entwicklung einsparen, ganz zu schweigen von den vielen Stunden, die Sie bisher damit verbracht haben, mit Ihrem Kunden über die Notwendigkeit eines bestimmten Effekts zu verhandeln.
Schatten
Beginnen wir zunächst ganz einfach, und sehen wir uns einige grundlegende Schattierungseffekte an. Für mich geht es bei all diesen Effekten darum, die Wahrnehmung eines Objekts zu ändern. Schauen Sie sich beispielsweise den Textschatten und die Feldschatten in Abbildung 1 an.
.jpg)
Abbildung 1 - Schatteneffekte
Dieser Effekt vermittelt die Illusion einer gerichteten Lichtquelle, die auf ein Objekt trifft, wobei dieses Objekt wiederum einen Schatten auf die umgebenden Objekte wirft. Dadurch entsteht eine Wahrnehmung der Tiefe, man könnte sogar fast sagen, es sieht aus, als ob das Objekt schwimmen würde.
Ein Schatten lässt sich ganz leicht einfügen, fügen wir also einer Überschrift einen Textschatten hinzu:
h1 {
text-shadow: black 2px 2px 12px 2px;
}
Die verschiedenen Eigenschaften für Textschatten:
- Shadow color (Schattenfarbe – optional). Sie können den Namen einer Farbe angeben oder die HSL-oder RGBA-Farbangaben verwenden.
- Horizontal offset (Horizontaler Offset – erforderlich). Gibt die horizontale Position des Schattens an. Bei positiven Werten wird der Schatten auf die rechte Seite des Objekts gezogen, bei negativen Werten nach links.
- Vertical offset (Vertikaler Offset – erforderlich). Legt die vertikale Position des Schattens fest. Bei positiven Werten wird der Schatten nach unten verschoben, bei negativen Werten nach oben.
- Blur Radius (Weichzeichnerradius). Dieser Wert legt fest, wie klar der Schattentext angezeigt wird. 0px bezeichnet die Schriftart an sich; je höher die angegebenen Werte, desto weicher werden die Objektkanten gezeichnet. Negative Werte sind nicht zulässig.
- Spread Distance (Abstand). Dieser Wert legt den Abstand vom Schatten fest, gibt also an, wie weit sich die Schattenform ausdehnt (positiver Wert) oder zusammengezogen wird (negativer Wert).
Feldschatten funktionieren wie Textschatten, es gelten dieselben Parameter:
box-shadow: red 10px 10px 0px 0px;
Schatten werden relativ häufig eingesetzt. Sie werden für Elemente wie z. B. Schaltflächen verwendet, um einen Tiefeneindruck und eine Vorstellung vom Verwendungszweck des Elements zu vermitteln. Schatten machen dem Benutzer deutlich, dass ein bestimmtes Objekt irgendwie anders ist als die anderen sichtbaren Objekte in der Benutzeroberfläche. Früher haben Sie vermutlich auf Photoshop zurückgegriffen und PNGs zur Darstellung von Schaltflächen erstellt, heute können Sie dies im Markup erledigen. Natürlich kann ich in diesem Artikel nur einen allgemeinen Überblick geben. Durch Anpassung der Deckkraft, des Rahmenradius, der Farbverläufe, der Typographie usw. können Sie viele weitere erstaunliche Effekte erzielen.
Transformationen
Mit der CSS-Eigenschaft „transform“ kann ein Element hinsichtlich seiner Größe bzw. seines Raums transformiert werden. Zur Veranschaulichung richten wir ein Bild so ein, dass es doppelt so groß wird, wenn der Benutzer mit der Maus auf das Bild zeigt.
#myImg:hover {
transform: scale(2);
}
Wir haben es hier natürlich mit CSS zu tun, sie müssen also alle anwendbaren Anbieterpräfixe mit angeben. Im restlichen Artikel werde ich diese Präfixe weglassen, die vorherige Transformation hätte jedoch so aussehen müssen:
#myImg:hover {
-ms-transform: scale(2);
-webkit-transform: scale(2);
-moz-transform: scale(2);
-o- transform: scale(2);
transform: scale(2);
}
Sicherlich werden Sie auch die Vorzüge der Funktionserkennung nutzen wollen. Hierbei handelt es sich in der Tat um eine der wichtigsten Methoden für die Implementierung in Websites heutzutage. Das Site-Verhalten sollte nicht auf Benutzer-Agents basieren, vielmehr sollten Sie ein Tool wie Modernizr (modernizr.com), einsetzen, mit dem Sie die Funktionalität des Browsers abfragen können. Falls der Browser eines Benutzers ein bestimmtes erforderliches Feature nicht unterstützt, können Sie stattdessen ein Polyfill verwenden – ein Shim zur Implementierung der Funktion für den Browser. Dies ist sogar für CSS möglich. Weitere Informationen hierzu finden Sie im Artikel „Kein Browser bleibt unberücksichtigt: Eine Strategie für die Einführung von HTML5“ unter msdn.microsoft.com/magazine/hh394148. Doch nun zurück zu den Transformationen.
Neben Skalierungen können Sie auch Transformationen auf 2D- oder 3D-Ebene anwenden. Bei 2D verschieben Sie dabei ein Element entlang der X- und Y-Achse. Nehmen wir nun etwas Text und drehen ihn um 45 Grad:
.transform2d {
transform: translate(0px, 0px)
rotate(45deg)
scale(1.45)
skew(0deg, 0deg);
}
In Abbildung 2 ist ein um 45 Grad gedrehtes Feld dargestellt.
.png)
Abbildung 2 – Transformation eines Elements im 2D-Raum
Nun, 2D ist prima, aber das Highlight heute ist ganz klar 3D. Keine Sorge, wir möchten unsere Benutzer nicht auffordern, Spezialbrillen aufzusetzen, aber für die Leute soll es so aussehen, als kämen unsere Felder aus dem Bildschirm heraus. Das ist beispielsweise mit folgendem Code möglich:
.transform3d {
transform-origin-x: 50%;
transform-origin-y: 50%;
transform: perspective(110px) rotateY(45deg);
}
Die Ergebnisse sind in Abbildung 3 dargestellt.
.png)
Abbildung 3 – 3D-Transformation
Übergänge
Wir wollen uns nun mit den Übergängen befassen und darüber sprechen, wie Sie von einem Stil oder Zustand eines Elements zu einem anderen Stil bzw. Zustand wechseln können. Ich will mit der Hover-Pseudoklasse beginnen. Bisher haben wir die Zustände eines Elements – also den Anfangszustand und den Zustand nach Eintreten eines Ereignisses – mit CSS definiert. Für Schaltflächenelemente und Ankerlinks gibt es zwei Zustände, den Anfangszustand und den Hover-Zustand. Wenn ein Benutzer den Hover-Zustand aktiviert, werden die entsprechenden Eigenschaften festgelegt. Nachfolgend sehen Sie ein kurzes Beispiel für das Hovering über eine Schaltfläche:
#boxTrans:hover {
background-color: #808080;
color: white;
border-color: #4cff00;
border-width: 3px;
}
Nichts Neues, das haben Sie ganz sicher schon einmal gemacht. Die heutigen Browser sind so schnell, dass der Statusübergang nahezu unmittelbar erfolgt. Was die Leistung anbelangt, ist dies hervorragend, es bringt jedoch ein neues Problem auf. In manchen Fällen kann dieser Statuswechsel irritierend oder womöglich gar nicht sichtbar sein. Es ist durchaus möglich, dass die Benutzer diese schnelle und subtile Änderung überhaupt nicht wahrnehmen.
Bei CSS3-Übergängen können Sie festlegen, wie lange ein Übergang dauern soll, und noch weitere Aspekte des Übergangs steuern. Wenn sich beispielsweise die Hintergrundfarbe einer Schaltfläche ändert, erfolgt dieser Vorgang nicht mehr einfach nur automatisch, sondern Sie können angeben, was während dieser Änderung passieren soll.
CSS-Übergänge können ganz einfach hinzugefügt werden. Die Befehle für den Übergang werden dem Basiselement hinzugefügt. Als Beispiel wollen wir ein einfaches Feld mit etwas Text erstellen. Wenn ein Benutzer mit der Maus auf dieses Feld zeigt, sollen sich Hintergrundfarbe, Text und Rahmen ändern:
#boxTrans {
...
transition: all .5s linear;
...
}
#boxTrans:hover {
background-color: #808080;
color: red;
border-color: green;
}
Wie Sie sehen, habe ich den Übergang im Element „#boxTrans” definiert. Ich wähle einen Übergang aller Eigenschaften dieses Elements. Der Übergang soll linear (mit konstanter Geschwindigkeit) über einen Zeitraum von 0,5 Sek. erfolgen. Ich kann auch nur bestimmte Eigenschaften für den Übergang auswählen, die ich dann einzeln angebe, wie im Folgenden dargestellt:
transition: background-color .5s linear;
Animationen
Anders als bei den Übergängen, bei denen Sie dem Browser den Start- und Endzustand mitteilen, geben Sie bei Animationen eine Reihe von CSS-Eigenschaften über einen bestimmten Zeitraum an. Animationen sind eigentlich nur Erweiterungen der Übergänge. Zum Erstellen einer Animation verwenden Sie einen Keyframe. Einen Keyframe können Sie sich als Zustand eines Elements an einem bestimmten Zeitpunkt innerhalb der für die Gesamtanimation definierten Zeitraums vorstellen. Wir wollen nun eine einfache Animation erstellen, ein kleines Fenster, das vor- und zurückläuft. Zunächst definiere ich das Element:
<html>
...
<div class="box" id="boxAnimation"></div>
...
</html>
Das div „boxAnimation” soll jetzt ein bisschen Form bekommen, damit es wie ein Feld aussieht:
<style>
...
.box {
border: 1px solid black;
background-color: red;
width: 25px;
height: 25px;
position: relative;
}
...
</style>
Jetzt werde ich die Basisanimation definieren. Ich muss sowohl den Keyframe als auch die Dauer der Animation festlegen. Wenn Sie die Eigenschaft für die Dauer (duration) nicht festlegen, wird die Animation nie ausgeführt, da der Standardwert 0 ist. Ich werde auch festlegen, wie oft die Animation voraussichtlich wiederholt werden soll. In diesem Fall soll die Animation 10 mal für jeweils 5 Sekunden ausgeführt werden. (Sie können für „animation-iteration-count” auch „infinite” angeben, die Animation läuft dann, solange die Seite geöffnet ist.):
#boxAnimation {
animation: 'not-knight-rider';
animation-duration: 5s;
animation-iteration-count: 10;
}
Zum Schluss muss ich den Keyframe an sich definieren. Ich beginne mit einem einfachen Keyframe, der das Feld über den Bildschirm bewegen wird. Hierfür lege ich die Eigenschaften „from„” und „to” fest und überlasse dem Browser den Rest:
@keyframes not-knight-rider {
from {
left: -100px;
}
to {
left: 100px;
}
}
Wenn Sie diese Animation ausführen, sehen Sie ein rotes Feld, das immer wieder über den Bildschirm schwebt. Wie bereits erwähnt, haben Sie die vollständige Kontrolle über die Animation. Wir wollen nun diesen Keyframe aktualisieren, um zu steuern, wo sich das Feld zu welchem Zeitpunkt befindet und was es genau macht (siehe Abbildung 4).
Abbildung 4: Steuerung der Animation
@keyframes not-knight-rider {
from {
left: -100px;
opacity: 0;
}
25% {
left: 100px;
opacity: 0.5;
}
50% {
left: -100px;
opacity: 0;
}
75% {
left: 100px;
opacity: 0.5;
}
to {
left: -100px; opacity: 0;
}
}
In Abbildung 4 lege ich fest, was der Keyframe bei einer einfachen Iteration an einem bestimmten Punkt machen soll. Ich lege den Startpunkt (to) und den Endpunkt (from) sowie Punkte dazwischen fest, diese werden als Prozentsätze der definierten Dauer angegeben. Wirklich nicht sehr schwer. Eine ganz andere Geschichte ist es, die Fantasie spielen zu lassen und richtig coole Animationen zu schaffen!
Um es noch einmal zu sagen, um alle verschiedenen Browser zu unterstützen, die es derzeit auf dem Markt gibt, müssen Sie die entsprechenden Anbieterpräfixe verwenden. Bei den Keyframes müsste es also etwa „@-webkit-keyframes” heißen, usw.
Anwendungsbeispiele zu allen in diesem Artikel aufgeführten Codemustern finden Sie online unter bit.ly/I0Pa4d. Beachten Sie auch die einmalige Reihe mit praktischen interaktiven CSS3-Demos unter bit.ly/pF4sle. Dort können Sie verschiedene CSS-Spezifikationen erkunden, ohne jemals auch nur eine Zeile in CSS zu schreiben.
Sie werden feststellen, dass es in diesen Demos um Windows 8 geht. Dies liegt daran, dass das Windows-Team mit Windows 8 ein neues Programmiermodell eingeführt hat. Webentwickler können nun mit ihrem Know-how unter Verwendung von HTML5, CSS3 und JavaScript eine systemeigene Anwendung für Windows 8 erstellen. Microsoft hat Ihnen gerade einen völlig neuen Bereich für den weltweiten Verkauf Ihrer Anwendungen bereitgestellt. Besuchen Sie das Windows-Entwicklungscenter unter dev.windows.com.
Aufregende Zeiten für Softwareentwickler, ob sie nun Webanwendungen oder andere Anwendungen entwickeln. Die Technologien entwickeln sich so schnell weiter, dass man leicht von all den neuen Tools in der Toolbox überwältigt werden kann. Trotzdem ist es wichtig, nach vorne zu schauen und die verfügbaren Tools und Techniken zu kennen. Sie werden sicherlich nicht damit anfangen wollen, einen Haufen schöner Bilder zu erstellen, wenn Sie denselben Schatteneffekt mit einigen wenigen Zeilen in CSS erzielen können.
Clark Sell arbeitet von Chicago aus als Senior Web und Windows 8 Evangelist für Microsoft. Seine Blogbeiträge finden Sie unter csell.net und seine Podcasts unter developersmackdown.com. Auf Twitter finden Sie seine Beiträge unter twitter.com/csell5.
Unser Dank gilt den folgenden technischen Experten für die Durchsicht dieses Artikels: John Hrvatin und Brandon Satrom