Webdesign mit CSS3 - Max Bold - ebook

Webdesign mit CSS3 ebook

Max Bold

0,0

Opis

Das Buch beschäftigt sich mit HTML5 und CSS3. Es beschreibt anhand zahlreicher Code-Beispiele die neuen technischen Möglichkeiten und Verbesserungen, die die neuen Standards mit sich bringen. Es richtet sich an Webentwickler, die bereits Grundkenntnisse in HTML und CSS haben und in die praktische Arbeit mit den neuen Webstandards einsteigen möchten. Es stellt interessante neu CSS3-Features vor und liefert Beispiele für die konkrete Umsetzung von Responsive Webdesign.

Ebooka przeczytasz w aplikacjach Legimi na:

Androidzie
iOS
czytnikach certyfikowanych
przez Legimi
czytnikach Kindle™
(dla wybranych pakietów)
Windows
10
Windows
Phone

Liczba stron: 112

Odsłuch ebooka (TTS) dostepny w abonamencie „ebooki+audiobooki bez limitu” w aplikacjach Legimi na:

Androidzie
iOS



Vorwort

HTML und CSS kann man gewissermaßen als Grundbausteine des Webs bezeichnen. Das ist seit den Anfängen des Webs so und wird – wie es ausschaut – auch noch in absehbarer Zukunft so sein. Auch auf die neuesten Herausforderungen weiß das Duo aus HTML – zwischenzeitlich als HTML5 bezeichnet – und CSS – zwischenzeitlich in der Version Level 3 – ein Antwort.

Vor allem die zunehmende Verbreitung von mobilen Endgeräten in Form von Smartphones und Tablets stellt neue Anforderungen an Entwickler von Web-Applikationen. Die Antwort heißt hier Responsive Webdesign. Das bedeutet, das Layout einer Web-Anwendung so anzulegen, dass sich die Ausgabe optimal an das Display des jeweiligen Endgeräts anpasst.

CSS3 findet immer breitere Unterstützung bei den Webbrowsern. Zeit also, sich mit den erweiterten Fähigkeiten der Cascading Stylesheets auseinanderzusetzen. Schon jetzt sind viele Features der noch in der Entwicklung befindlichen CSS3-Technologie nutzbar und erleichtern Webentwicklern die Arbeit ungemein.

Das Buch beschäftigt sich mit HTML5 und CSS3 und beschreibt anhand zahlreicher Code-Beispiele die neuen technischen Möglichkeiten und Verbesserungen, die die neuen Standards mit sich bringen. Es richtet sich an Webentwickler, die bereits Grundkenntnisse in HTML und CSS haben und in die praktische Arbeit mit den neuen Webstandards einsteigen möchten. Es stellt interessante neu CSS3-Features vor und liefert Beispiele für die konkrete Umsetzung von Responsive Webdesign.

Das erste Kapitel gibt einen Überblick über den neuen CSS3-Standard und zeigt, mit welchen neuen Funktionen Entwickler arbeiten können und wie der Stand der Umsetzung auf Seiten der Browser ist. Weiter geht es mit dreidimensionalen Bändern. Mit HTML5 und CSS3 lassen sich auf einfache Weise in eine Webseite 3D-Elemente einbauen. In dem Kapitel werden dreidimensionale Ribbons erläutert. In einem weiteren Kapitel geht es um CSS3-Animationen. Mit diesem neuen Feature lassen sich Elemente bewegen und animieren. Sie sind sicher eine der interessantesten Neuerungen in CSS3 und sie funktionieren nicht nur in neueren Browsern, sondern auch auf Smartphones. CSS3 Multiple Columns sind ein weiteres Interessantes Feature des neuen Standards und ein weiteres Thema dieses Buches. CSS3 bietet damit die Möglichkeit, mehrere Spalten auf einer Internetseite darzustellen, einfach über eine Definition im Stylesheet. Das Kapitel »SASS und Compass« zeigt, wie man schneller mit CSS-Preprozessoren entwickeln kann.

Das Web ist mittlerweile im mobilen Zeitalter angekommen und moderne Web-Anwendungen müssen für verschiedene Ausgabegeräte erstellt und optimiert werden. Der zweite Teil des Buches befasst sich daher schwerpunktmäßig mit dem Thema »Responsive Webdesign«.

Max Bold Chefredakteur web & mobile developer

CSS3

Web im neuen Gewand

CSS3 bringt viele neue Möglichkeiten um HTML Elemente auszuzeichnen und verwöhnt den Web-Entwickler sogar mit Animationen.

Von Alexander Ebner

Wir wollen uns die Neuigkeiten von CSS3 in diesem Artikel genauer ansehen. Sie eröffnen viele Gestaltungsmöglichkeiten, für die früher Javascript oder Grafiken benötigt wurden. Dazu zählen beispielsweise abgerundete Ecken und animierte Elemente.

Der Standard

CSS3 ist noch nicht final verabschiedet. Daher verwenden die Browserhersteller eigene Implementierungen. Diese werden mit einem Browser-spezifischen Prefix belegt. Folgendes Beispiel erzeugt abgerundete Ecken. Zu der eigentlichen CSS3 Eigenschaft border-radius kommen die Eigenschaften für Mozilla und Webkit hinzu:

order-radius: 5px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

Die Unterschiede beziehen sich nicht nur auf die Prefixe allein, CSS-Anweisungen können sich auch grundsätzlich unterscheiden, wie im folgenden Listing ersichtlich wird. Hier wird der border-radiusa für die rechte obere Ecke einmal standardkonform und einmal für Mozilla-Browser dargestellt:

border-top-right-radius:50px;

-moz-border-radius-topright:50px;

Die Web-Entwicklerin Lea Verou hat einen Javascript-Code entwickelt, der automatisch die fehlenden Prefixe an den CSS3-Eigenschaften anhängt. Das Skript kann frei über GitHub geladen werden. Mit PrefixFree braucht sich der Entwickler keine Gedanken mehr über Browser-Prefixe machen, da sie zur Laufzeit clientseitig eingebunden werden. Bereits mit Prefixe versehene Anweisungen werden von dem Skript ignoriert.

Nicht alle Browser verstehen alle CSS3-Eigenschaften. Der Internet-Explorer wurde erst in Version 9 fit für den neuen Standard gemacht. Das muss berücksichtigt werden, wenn es beispielsweise um Unternehmensseiten handelt. Nicht alle Besucher verwenden die neuesten Browser-Versionen. Entweder weil sie Anwender sind, die sich nicht sonderlich um Sicherheit und Updates scheren, oder weil Unternehmen aus den verschiedensten Gründen veraltete Browser-Versionen verwenden. Mit der Verabschiedung von CSS3 fallen auch die Browser-Prefixe weg und es ist zu hoffen das alle Browserhersteller den neuen Standard konform in ihre Browser implementieren. Daher sollte immer auch die standardkonforme Anweisung einer CSS-Eigenschaft mit angegeben werden, auch wenn sie von den Browsern noch nicht interpretiert wird. Genauso sollten Prefixe verwendet werden, auch wenn die aktuellen Versionen der Browser den Standard schon interpretieren. Ältere Versionen verstehen nur die Anweisungen mit dem entsprechenden Prefix, aber auch solche Browser sind noch unterwegs.

Rounded Corners

Abgerundete Ecken werden immer wieder gerne als Stilmittel eingesetzt. Früher aufwändig mit Grafiken als Hintergrund in ganzen Pixel-Arrays eingebaut, genügt heute eine CSS-Anweisung auf ein Element um runde Ecken zu erzeugen. Für die drei Container im folgenden Beispiel wurden verschiedene Anweisungen verwendet, um runde Ecken zu erzeugen:

#c1{ border-radius: 20px; }

#c2{ border-radius: 20px 40px 50px 10px; }

#c3{ border-top-right-radius:50px;

border-bottom-left-radius:90px 40px;}

Der erste Container erhält auf allen vier Ecken Rundungen mit dem Radius von 20 Pixeln. Der zweite Container bekommt auf allen vier Ecken unterschiedliche Rundungen. Die vier Parameter werden in der Reihenfolge links-oben, rechts-oben, rechts-unten und links-unten angegeben. Der letzte Container bekommt rechts oben eine Rundung von 50 Pixeln. Links unten werden zwei Parameter übergeben, was eine Asymmetrie in die Rundung einbaut. Das Ergebnis ist in Bild 1 zu sehen. Rounded Corners werden von IE9, Firefox, Chrome, Safari und Opera unterstützt.

Das Ergebnis der abgerundeten Ecken (Bild 1)

Schatten

Bisher wurden Schatten mit Bildern oder halbtransparenten PNG-Bildern realisiert. Mit CSS3 haben die Auszeichnungen box-shadow und text-shadow Einzug gehalten. Ersteres verschönert Elemente wie Div-Container, Formularfelder etc. mit einem Schatten, text-shadow versieht dagegen Schriften mit einem Schatten. Beide Auszeichnungen erwarten vier Parameter: X-Offset, Y-Offset, Kantenschärfe und Farbe. Die beiden Offsets verschieben den Schatten in Relation zum Objekt auf das der Schatten angewendet wird. Die Kantenschärfe sorgt für einen weichen Übergang zwischen Schatten und Fläche. Das folgende Beispiel erzeugt verschiedene Schatten an drei Containern und einem Text:

c1 { box-shadow:10px 10px 5px #000000; }

#c2 { box-shadow:-10px 10px 20px #000000;}

#c3 { box-shadow:inset 10px 10px 5px #000000;}

p {text-shadow:10px 10px 5px #000000;}

Der Schatten der ersten Box befindet sich rechts unten mit einem etwas schärferen Schattenverlauf. Der Schatten der zweiten Box geht nach links unten mit einem sehr weichen Schattenverlauf. Der dritte Schatten befindet sich innerhalb des Containers. Dazu kommt ein Text in einem Blocktext mit Schatten. Das Ergebnis sehen Sie in dem Bild (Bild 2).

Der Schattenwurf (Bild 2)

Transparenzen mit RGBA

RGBA steht für Red, Green, Blue und Alpha und ist ein Format um Farbinformationen zu definieren. Üblicherweise werden Farbwerte in CSS mittels Hexadezimal als #RRGGBB angegeben. In RGBA werden die Werte für die drei Grundfarben als Dezimalzahl mit einem Wert zwischen 0 und 256 angegeben. Der Alpha-Wert steht für die Transparenz und liegt im Bereich zwischen 0 und 1. Ein halbe Transparenz wird demnach mit 0.5 angegeben, während 1 bedeutet, dass das Element komplett undurchsichtig ist und 0 für vollständige Transparenz steht. In folgenden Beispiele haben die drei Container einen Alpha-Wert von 0.9, 0.5 und 0.1:

#c1{background-color: rgba(255,0,0,0.9); }

#c2{background-color: rgba(255,0,0,0.5); }

#c3{background-color: rgba(255,0,0,0.1); }

Das Ergebnis zeigt sich am deutlichsten vor einem Schachbrettmuster, wie in Bild 3.

Transparenzen vor einem Schachbrettmuster (Bild 3)

Im Gegensatz zu der Anweisung opacity bezieht sich hier der Alpha-Wert nur auf den Hintergrund des Containers, während bei opacity der komplette Container samt Inhalt diese Transparenz zugewiesen bekommt.

Transforms

Mit Transforms können HTML-Elemente transformiert werden. Unter anderem kann die Größe geändert und das Element gedreht, verschoben und verzerrt werden. Am Anschaulichsten ist das in folgendem Beispiel zu sehen:

#c1 { -moz-transform: rotate(-32deg); }

#c2 { -moz-transform: skew(29deg); }

#c3 { -moz-transform: scale(1.5); }

#c4 { left:550px; border: 1px solid red; }

#c5 { left:550px; -moz-transform:translate(20px); }

Der erste Container wird mittels rotate um –32 Grad gedreht. skrew verzerrt den zweiten Container um den angegebenen Winkel. Container drei wird auf die eineinhalbfache Größe aufgeblasen während Container fünf gegenüber dem roten Container vier durch translate um 20 Pixel verschoben wird, obwohl die absolute Position von 550 Pixeln vom linken Rand entfernt dieselbe ist (Bild 4).

Die vier Transformationen (Bild 4)

Alle Transforms legen ihren Bezugspunkt auf die Mitte des Elements. Diese kann auch verändert werden. So kann ein Element nicht nur um die Mittelachse gedreht werden, sondern die Drehachse um jeden beliebigen Punkt in Abhängigkeit zum Element gesetzt werden:

#c1 { -moz-transform: rotate(-20deg); }

#c2 { -moz-transform-origin: top left;

-moz-transform: rotate(-20deg); }

In diesem Beispiel wird bei dem linken Container eine Drehung um den Element-Mittelpunkt bewirkt, während der zweite Container um die linke obere Ecke gedreht wird (Bild 5).

Transitions

Transitions bieten eine einfache Möglichkeit der Animation. Streng genommen handelt es sich um eine Keyframe-Animation, die allerdings nur einen Start- und einen Stop-Punkt kennt. Zwischenschritte sind hier nicht möglich. Transitions definieren, welche CSS-Eigenschaften animiert werden, in welcher Zeit das geschieht und in welchem Zeitablauf. Dazu werden die Eigenschaften des Elements zum Start-Zeitpunkt definiert. Mit der Pseudo-Eigenschaft hover werden diese Eigenschaften beim Überfahren des Elements mit der Maus überschrieben. Alternativ kann mittels JavaScript eine neue Klasse zugewiesen werden.

Setzen eines neuen Bezugpunktes (Bild 5)

Die neue Klasse beziehungsweise die Hover-Eigenschaft definiert den Zustand des Stop-Punktes. Alle Zwischenschritte werden automatisch interpoliert:

.myclass{ left: 20px;

-moz-transition:All 3s ease-in;}

.myclass:hover { left:100px;}

In diesem Beispiel wird die Zeit der Animation auf drei Sekunden gesetzt. Der Parameter All besagt, dass alle Eigenschaften animiert werden. In diesem Fall hätte stattdessen auch einfach left ausgereicht. Der letzte Parameter definiert den Zeitablauf. ease-in bedeutet eine einfache langsame Beschleunigung, während ease-out langsam abbremst. Möchte man langsam beschleunigen und sanft abbremsen, kommt ease-in-out zum Zug. Soll die Bewegung gleichbleibend sein, ist linear der richtige Wert. Es kann auch eine eigene Timing-Funktion mit Bezier-Kurven erstellt werden. Ein gutes Hilfsmittel ist Ceaser. Eine einfache Bezier-Kurve könnte dann so aussehen:

-moz-transition-timing-function:

cubic-bezier(0.025, 0.720, 0.975, 0.510);

Aus dem Kopf sind Bezier-Kurven nicht leicht zu definieren, daher sollten Sie Tools wie Ceaser zu Hilfe nehmen. Mit Transitions lassen sich die meisten CSS-Eigenschaften animieren.

CSS3-Animations

Transitions kennen nur einen Start- und einen Stop-Zustand des Objektes. Für komplexere Animationen wird eine richtige Keyframe-Animation benötigt, die mehrere Zustände des Elements im zeitlichen Verlauf abbilden kann:

#c1 {

-moz-animation: myanim 3s;

top:50px;

}

@-moz-keyframes myanim {

0% {left: 50px;}

25% {left: 300px;}

50% {left: 150px; top:450px;}

75% {left: 150px;}

100% {left: 300px;top: 250px;}

}

Die 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)