Webdesign mit CSS3. Max Bold

Чтение книги онлайн.

СКАЧАТЬ Anweisung animation definiert in diesem Beispiel den Namen der Keyframe-Animation und die Dauer einer Animations-Runde. Über die Eigenschaft @keyframes werden die einzelnen Keyframes definiert. Dabei wird der Name mit angegeben, der dann über animation angesprochen wird. Die Prozentangaben beziehen sich immer auf eine Animationsrunde. Animations kennt mehrere Eigenschaften mit denen die Animation beeinflusst werden kann:

      -moz-animation-name: myanim;

      -moz-animation-duration: 5s;

      -moz-animation-timing-function: linear;

      -moz-animation-delay: 2s;

      -moz-animation-iteration-count: infinite;

      -moz-animation-direction: alternate;

      -moz-animation-play-state: running;

      Die Eigenschaft animation-name definiert den Namen der Keyframe-Animation. Über animation-duration wird die Dauer einer animationsrunde gesetzt, während die animation-timing-function analog zu den Timingfunktionen der Transitions funktioniert. animations-delay verzögert den Start der Animations um die angegebene Zeit. Die Anzahl der Animationsrunden wird über animation-iteration-count bestimmt. Standardwert ist 1, das heißt, dass die Animation nur einmal durchlaufen wird. Der Wert infinite bewirkt, das die Animation durchlaufend wiederholt wird. Um eine Animation rückwärts laufen zu lassen, wird animation-direction mit reverse übergeben. Ob eine Animation überhaupt läuft oder pausiert ist, wird über die Anweisung animation-play-state definiert. Mit Keyframe-Animationen können komplexe Animationen erschaffen werden, da so gut wie jede CSS-Anweisung in die Animation eingebunden werden kann.

      Fazit

      Vieles, das früher mit komplexen JavaScript-Programmen oder Frameworks gelöst werden musste, last sich unter CSS3 mit wenigen Zeilen erledigen. Wenn CSS3 als Standard veröffentlicht ist und alle Browser den nativen Standard unterstützen, wird CSS3 dem Web-Entwickler viel Arbeit abnehmen. Bis dahin sollte man den Einsatz vorsichtig angehen und gegebenenfalls ein Javascript Fallback in Betracht ziehen.

      Links zum Thema

      Prefixfree bei GitHub

       http://leaverou.github.com/prefixfree/

      CSS Easing Tool Ceaser

       http://matthewlein.com/ceaser/

      CSS3 Demos und Tutorials

       http://slodive.com/web-development/best-css3-animation-demos-tutorials/

      Ribbons mit CSS3

      Dreidimensionale Bänder

      Mit HTML5 und CSS3 lassen sich auf einfache Weise in eine Webseite 3D-Elemente einbauen. In dem Artikel werden dreidimensionale Ribbons erläutert.

      Von Bettina Zimmermann

      Einer der vorherrschenden Trends im derzeitigen Webdesign ist die räumliche Darstellung in 3D. Tiefe zu erzeugen und damit einen dreidimensionalen Effekt zu erschaffen, verleiht einer Webseite mehr Lebendigkeit. Bisher wurden diese Elemente oft in Bildbearbeitungs-programmen wie Photoshop erstellt und als Grafik in eine Webseite eingefügt. Mit der Verwendung von CSS und insbesondere CSS3 ist es heute aber auch möglich, diese Effekte rein durch Programmierung und Rendering im Browser zu erreichen. Somit können Sie eine größere Unabhängigkeit von Zusatzprogrammen und eine höhere Flexibilität durch das einfache Verändern von CSS-Eigenschaften wie zum Beispiel Farbe und Größe erreichen. Dieser Workshop zeigt Ihnen, wie Sie mit Hilfe von CSS3-Stylesheets dreidimensionale Bänder erstellen können, die Ihrer Webseite eine attraktive 3D Wirkung verleihen (Bild 1).

      Verschiedene Typen von Ribbons erzeugt mit CSS3 (Bild 1)

      Für den Workshop brauchen Sie lediglich einen Texteditor und einen aktuellen Browser. Für die dargestellten Beispiele sind neuere Browser notwendig, die auch CSS3-Elemente darstellen können, da zum Beispiel die Schatten sonst nicht dargestellt werden. Die folgenden Browser sollten Ihnen die gewünschten Ergebnisse liefern: Internet Explorer 8 und 9 sowie die aktuellen Versionen von Firefox, Chrome, Safari und Opera. Die Graphik in Bild 2 zeigt Ihnen wie ein Ribbon aufgebaut ist.

      Aus diesen Bestandteilen setzt sich ein Band(Ribbon) zusammen (Bild 2)

      Im Beispiel wird ein großes Rechteck mit abgerundeten Ecken als Hintergrund verwendet. Der Ribbon legt sich dann, wie die Übersetzung ins Deutsche bereits zeigt, als Band um den Kasten. Dabei handelt es sich einfach um ein Rechteck, das auf beiden Seiten über den Hintergrundkasten übersteht. Für die dreidimensionalen Effekte sorgen Schatten um die Rechtecke und dunkle Dreiecke an den Knickstellen. Sie vermitteln den Eindruck von räumlicher Tiefe.

      Wie wird eine solche Seite nun konkret gebaut? Im Folgenden können Sie die einzelnen Schritte nachvollziehen.

      Starten Sie mit dem Entwurf einer HTML-Seite und einer CSS-Datei. Die folgende HTML-Seite stellt Ihnen den Hintergrundkasten für die Ribbons bereit. Sie bindet dazu das Stylesheet myStyle.css ein, in dem die CSS-Formatierungen für den Kasten und natürlich auch für die Ribbons ausgeführt werden. Der weitere Inhalt der HTML-Seite und der CSS-Datei werden anschließend Schritt für Schritt entwickelt:

      In der CSS-Datei wird das body-Tag aus der HTML-Datei näher spezifiziert und dadurch der Kasten mit all seinen Eigenschaften wie Breite, Hintergrundfarbe und Schriftart definiert. Die runden Ecken werden durch das Attribut border-radius erreicht. Der Schatten um den Kasten wird durch box-shadow definiert. Attribute mit einem Prefix wie -moz (Mozilla) beziehungsweise -webkit (auf Webkit basierende Browser) sind browserspezifisch. Durch die Verwendung der Standardattribute und zusätzlich der browserspezifischen Attribute wird erreicht, dass die Elemente in verschiedenen Browsern richtig angezeigt werden:

      /* CSS Document */

      html {

      background: #ddd;

      }

      Body {

      margin: 30px auto;

      padding: 20px;

      width: 40%;

      background: #fff;

      font-family: 'trebuchet MS', Arial, helvetica;

      -moz-border-radius: 10px;

      border-radius: 10px;

      -moz-box-shadow: 0 0 10px #555;

      -webkit-box-shadow: 0 0 10px #555;

      box-shadow: 0 0 10px #555;

      }

      Nachdem СКАЧАТЬ