Neuerungen CSS3

Auf einigen Blogs habe ich schon entdeckt, dass CSS3 bereits verwendet wird. Ja, sogar ich verwende auf Traumfinsternis CSS3, allerdings nur teilweise, da einige Funktionen noch nicht von den gängigsten Browsern voll unterstützt werden.

Zuerst ein paar allgemeine Fakten:

Was ist CSS3?

Die Cascading Style Sheets in der Version 3 sind seit 2000 in der Entwicklung als Nachfolger von CSS2. CSS3 ist im Gegensatz zu den CSS Standards 1.0, 2.0 und 2.1 modular aufgebaut, das heißt, dass Teilbereiche unabhängig voneinander mit eigenen Versionsschritten entwickelt werden.

Wann wird CSS3 offiziell veröffentlicht?

Es ist ja allgemein bekannt, dass selbst die "alten" CSS Standards von einigen Browsern teilweise bis heute nicht richtig interpretiert oder nicht vollständig unterstützt werden. Nachdem die ersten Termine angesetzt und wieder abgesagt wurden, gibt es zurzeit keinen genauen Termin, wann CSS3 die offizielle W3C-Empfehlung werden soll. Das World Wide Web Consortium (W3C) ist übrigens das Gremium zur Standardisierung der Techniken im World Wide Web. Darunter zählen u.a. HTML, XHTML, XML, CSS und SVG.

Hier ist die Übersicht einiger Neuerungen in CSS3:

Klickt auf ein Bild, um zum Inhalt zu scrollen.

CSS3 Fonts

Ich kann mich noch an Zeiten erinnern, wo Website-Betreiber Bilder als Überschrift eingefügt haben, da ihre gewünschte Schriftart keine Standard-Schriftart war und es damals keine andere Möglichkeit gab, diese an jedem PC richtig anzuzeigen. Der Besucher musste den Font schließlich auch installiert haben.

Mit CSS3 kann man nun die Schriftart einfach einbetten, sie wird unabhängig von der Font-Installation auf dem PC angezeigt und ihr braucht keine Bilder mehr, was euch viel Arbeit erspart. Nur sollte man bezüglich der Browser-Unterstützung aufpassen. Alte Browser können den Befehl nämlich nicht interpretieren. Auch müssen die richtigen Font Formate für die Browser eingebunden werden, denn sie benötigen teilweise unterschiedliche Formate, um diese Schriftart anzeigen zu können. Fehlen Formate, dann wird die Schriftart in einigen Browsern nicht angezeigt.

Browser Unterstützung

Alle Beispiele in diesem Artikel sind nur mit einem unterstützenden Browser sichtbar.

Format Unterstützung

Folgende Font-Formate werden von den Browsern unterstützt:

• Internet Explorer:
  • Embedded OpenType (.eot)
  • WOFF (.woff) (seit IE9)
• Mozilla Firefox:
  • TrueType/OpenType TT (.ttf)
  • OpenType PS (.otf)
  • WOFF (.woff) (seit Firefox 3.6)
• Opera:
  • TrueType/OpenType TT (.ttf)
  • OpenType PS (.otf)
  • SVG (.svg)
• Google Chrome:
  • TrueType/OpenType TT (.ttf)
  • OpenType PS (.otf)
  • WOFF (.woff) (seit Version 6)
• Safari/Webkit:
  • TrueType/OpenType TT (.ttf)
  • OpenType PS (.otf)
• SafariMobile (iPhone/iPad):
  • nur SVG Fonts (.svg) bis iOS 4.1
  • TrueType/OpenType (.ttf) seit iOS 4.2

Wenn ihr euch einen Font herunterladet, dann habt sind sicher nicht alle Formate vorhanden. Auf fontsquirrel.com/fontface/generator gibt es einen nützlichen Font-Generator, bei dem ihr euren Font, z.B. "Miama.ttf" hochladen könnt, der anschließend diesen Font in andere Formate, z.B. .eot, .woff und .svg umwandelt. Ladet ihr z.B. ein .otf Font hoch, dann wird auch das Format .ttf generiert.
Wählt bei dem Generator die Funktion "EXPERT... (You decide how best to optimize your fonts.)" aus, damit ihr alle Formate in den Kontrollkästchen aktivieren könnt. Setzt anschließend unten einen Haken bei "Agreement" und downloaded dann euer Font-Paket. Dann nur noch entpacken, hochladen und in CSS einbinden.

Der Syntax

    @font-face {
      font-family: 'NameDesFonts';
      src: url('FontDateiPfad.format');
    }
    @font-face {
      font-family: 'NameDesFonts';
      src: url('FontBoldDateiPfad.format');
      font-weight: bold;
    }
   

Jeden Schriftschnitt müsst ihr separat einfügen und angeben, um welchen es sich handelt (z.B. bold). Bei font-family muss der Name des Fonts angegeben werden und bei src (Source) die Quelle. Bei der url könnt ihr den relativen Pfad eurer Font-Datei angeben.

Beispiel mit dem Font Squirrel Generator

    @font-face {
    font-family: 'MiamaRegular';
    src: url('fonts/miama-webfont.eot');
    src: url('fonts/miama-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/miama-webfont.woff') format('woff'),
         url('fonts/miama-webfont.ttf') format('truetype'),
         url('fonts/miama-webfont.svgz#MiamaRegular') format('svg'),
         url('fonts/miama-webfont.svg#MiamaRegular') format('svg');
    font-weight: normal;
    font-style: normal;
    }
    .text {
      font-family: Miama;
      font-size: 32px;
    }
   

CSS3 Rounded Corners

"Runde Ecken", wie sie im normalen Sprachgebrauch genannt werden. Auf meinem Blog seht ihr fast ausschließlich mit CSS3 abgerundete Ecken.

Eine Zeit lang musste man zusätzlich zum normalen "border-radius" diesen Befehl mit dem Präfix -moz den Browser Firefox und mit dem Präfix -webkit die Browser Chrome und Safari ansprechen. Anders interpretierten sie die Abrundungen nicht. Aber mittlerweile unterstützen sie die Eigenschaften ohne Probleme!

    .box {
      border-radius: 10px;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
    }
   

Browser Unterstützung

Alle Beispiele in diesem Artikel sind nur mit einem unterstützenden Browser sichtbar.

Der Syntax

    border-*-*-radius: ZahlEinsMitEinheit ZahlZweiMitEinheit;
   

Dort, wo die Sternchen stehen, wird angegeben, welche "Ecke" abgerundet werden soll, also z.B. oben rechts oder unten links. Als erstes wird die senkrechte Position angegeben, also oben oder unten (top oder bottom) und als nächstes folgt die Angabe in der Waagerechten, also left oder right. Schreibt ihr nur "border-radius", dann sprecht ihr alle vier Ecken gleichzeitig an. Die "ZahlEinsMitEinheit" gibt den Rundungsgrad in der x-Achse und die "ZahlZweiMitEinheit" den Rundungsgrad in der y-Achse an. Schreibt ihr nur eine Zahl mit Einheit, dann wird die Ecke in beiden Achsen gleich abgerundet.

Beispiel 1

    .runde-ecken-eins {
      background: #EBEAE8;
      border-top-left-radius: 20px 50px;
    }
   

x-Achse: 20px
y-Achse: 50px

Beispiel 2

    .runde-ecken-zwei {
      background: #EBEAE8;
      border-top-left-radius: 50px;
    }
   

x-Achse: 50px
y-Achse: 50px

Beispiel 3

    .runde-ecken-drei {
      background: #EBEAE8;
      border-top-left-radius: 90px 40px;
    }
   

x-Achse: 90px
y-Achse: 40px

Beispiel 4

    .runde-ecken-vier {
      background: #EBEAE8;
      border-top-left-radius: 10px;
      border-top-right-radius: 50px;
      border-bottom-right-radius: 10px;
      border-bottom-left-radius: 50px;
    }
   

Beispiel 4: Verkürzte Schreibweise

Indem man den Rundungagrad hintereinander schreibt, kann man in einer Zeile alle vier Ecken gleichzeitig ansprechen.
Diese Reihenfolge ist zu beachten:
oben links, oben rechts, unten rechts, unten links

    .runde-ecken-vier-kurz {
      background: #EBEAE8;
      border-radius: 10px 50px 10px 50px;
    }
   

Alternative verkürzte Schreibweise

Möchte man in einer Zeile alle Ecken und den Rundungsgrad in x- und y-Achse angeben, dann bietet sich die folgende Schreibweise an. Alle Zahlen vor dem Slash (/) sind die Angaben in der x-Achse in der bekannten Reihenfolge (s.o.). Die Zahlen hinter dem Slash gelten für die y-Achse in der bekannten Reihenfolge (s.o.).

    .runde-ecken-vier-kurz-alt {
      background: #EBEAE8;
      border-radius: 50px 20px 10px 100px / 10px 80px 60px 40px;
    }
   

CSS3 Box Shadow

Auch Schatten bei Box-Elementen habe ich auf meinem Blog per CSS eingefügt.

Browser Unterstützung

Alle Beispiele in diesem Artikel sind nur mit einem unterstützenden Browser sichtbar.

Der Syntax

    box-shadow: xPosition yPosition WeichheitsR AusbreitungsR Farbe;
   

Die x- und yPosition geben an, wo der Schatten in der x- und y-Achse sein soll, hier sind auch negative Werte erlaubt. Der optionale WeichheitsR(adius) gibt an, wie verschwommen, wie weich der Schatten sein soll. Der optionale AusbreitungsR(adius) bestimmt die Ausbreitung des Schattens, der Standardwert beträgt 0, also ist der Schatten genauso groß wie der WeichheitsRadius.

Beispiel 1

    .schatten-eins {
      box-shadow: -5px -5px #666;
    }
   

Beispiel 2

    .schatten-zwei {
      box-shadow: 3px 6px 10px #999;
    }
   

Beispiel 3

    .schatten-drei {
      box-shadow: 3px 6px 10px 3px #999;
    }
   

Beispiel 4

    .schatten-vier {
      box-shadow: 0px 3px 1px #999;
    }
   

Schatten innen

    .schatten-innen {
      box-shadow: inset 3px 6px 10px #999;
    }
   

Schatten innen, Alternative

    .schatten-innen-alt {
      box-shadow: inset 0px 0px 8px #999;
    }
   

CSS3 Text Shadow

Mit einem Text-Schatten kann man viele verschiedene Effekte erzielen.

Browser Unterstützung

Alle Beispiele in diesem Artikel sind nur mit einem unterstützenden Browser sichtbar.

Der Syntax

    text-shadow: xPosition yPosition WeichheitsR Farbe;
   

Die x- und yPosition geben an, wo der Text-Schatten in der x- und y-Achse sein soll, hier sind auch negative Werte erlaubt. Der WeichheitsR(adius) gibt an, wie verschwommen, wie weich der Schatten sein soll.

Beispiel 1: Weicher Schatten

    .textschatten-eins {
      text-shadow: 5px 5px 5px #aaa;
    }
   

Beispiel 1: Harter Schatten

    .textschatten-eins {
      text-shadow: 1px 2px 0 #ccc;
    }
   

Beispiel 2: Mehrere Schatten

    .textschatten-zwei {
      text-shadow: 5px 5px 4px #ccc,
                   -5px -10px 8px #ff0,
                   15px 7px 3px #f0f;
    }
   

Beispiel 3: Kontur

    .textschatten-drei {
      text-shadow: 1px 0 0 #000,
                   -1px 0 0 #000,
                   0 1px 0 #000,
                   0 -1px 0 #000;
    }
   

Beispiel 4: Glow

    .textschatten-vier {
      text-shadow: 0 0 4px #fff,
                   0 -5px 4px #ff3,
                   2px -10px 6px #fd3,
                   -2px -15px 11px #f80,
                   2px -25px 18px #f20;
    }
   

CSS3 Background Size

Per CSS kann man nun ab der Version 3 die Hintergrundbild-Größe bestimmen. Bis dahin konnte man lediglich nur die Bilder, die per img-Tag platziert wurden, in der Größe beeinflussen. Die Hintergrundbilder konnte man nur einfügen oder weglassen.

Browser Unterstützung

Alle Beispiele in diesem Artikel sind nur mit einem unterstützenden Browser sichtbar.

Der Syntax

    background-size: xBreiteMitEinheit yHöheMitEinheit;
   

Der Syntax ist ganz einfach. Bei der xBreiteMitEinheit gebt ihr die Breite des Hintergrundbildes mit der dazugehörigen Einheit an. Bei yHöheMitEinheit die Höhe.
Für den Firefox 3.6 braucht man noch den Präfix -moz-, damit es funktioniert.

Beispiel 1

    .hintergrund {
      width: 250px;
      height: 80px;
      background: url(../images/kasten-bg.jpg);
    }
   

    .hintergrund-groesse {
      background: url(../images/kasten-bg.jpg);
      background-size: 90% 10%;
    }
   

Beispiel 2

    .hintergrund-groesse2 {
      width: 200px;
      height: 100px;
      background: url(../images/kasten-bg.jpg);
      background-size: 200px 100px;
    }
   

CSS3 Background Origin

Auch die Hintergrund-Startposition kann eingestellt werden. Vorher war es nur möglich, beispielsweise einem Div ein Hintergrundbild zu geben, welches dann den gesamten Div ausfüllt. Nun kann auch bestimmt werden, ob das Hintergrundbild einen Rand (Border) oder Innenabstand (Padding) beachten soll.

Browser Unterstützung

Alle Beispiele in diesem Artikel sind nur mit einem unterstützenden Browser sichtbar.

Der Syntax

    background-origin: content-box ODER padding-box ODER border-box;
   

Nachdem z.B, ein Div gestylt wurde, Background-Image, Border und Padding vergeben wurde, kommt Background-Origin. Es gibt hierbei die Einstellungen content-box, padding-box oder border-box. Je nachdem, wo das Hintergrundbild "starten" soll, wo also im Prinzip der Nullpunkt ist, benutzt man eine dieser drei Einstellungen. In den folgenden Schaubildern soll erklärt werden, was mit diesen Einstellungen gemeint ist:

Beispiel 1

    .hintergrund-start-eins {
      width: 200px;
      height: 30px;
      border: 10px solid #999;
      padding: 15px;
      background: url(../images/bildmarke.png);
      background-repeat: no-repeat;
      background-origin: padding-box;
    }
   

Beispiel 2

    .hintergrund-start-zwei {
      width: 200px;
      height: 30px;
      border: 10px solid #999;
      padding: 15px;
      background: url(../images/bildmarke.png);
      background-repeat: no-repeat;
      background-origin: content-box;
    }
   

Beispiel 3

    .hintergrund-start-drei {
      width: 200px;
      height: 30px;
      border: 10px solid #999;
      padding: 15px;
      background: url(../images/bildmarke.png);
      background-repeat: no-repeat;
      background-origin: border-box;
    }
   

CSS3 Multiple Columns

Mehrspaltiger Content geht nun mit CSS3 auch ganz einfach. Wenn ein Text zu viele Zeichen in einer Zeile enthält, dann kann es schnell anstrengend werden ihn zu lesen. Früher musste man umständlich mit manuell gesetzten Divs den Text teilen und mit dem Befehl "float" die Text-Container nebeneinander fließen lassen. Nun kann man einfach um den gesamten Text herum einen Div setzen, der sagt, dass dieser Container beispielsweise zwei Spalten enthalten soll. Dann wird der Text automatisch an der richtigen Stelle getrennt und rechts daneben wieder fortgesetzt.

Browser Unterstützung

Alle Beispiele in diesem Artikel sind nur mit einem unterstützenden Browser sichtbar.

Der Syntax

    column-count: 3;
    -moz-column-count: 3; /* mit Präfix für Firefox */
    -webkit-column-count: 3; /* mit Präfix für Chrome und Safari */
   

Der Befehl "column-count" gibt an, wie viele Spalten es geben soll. Damit es auch im Firefox, Chrome und Safari angezeigt wird, muss hier der entsprechende Präfix vorangestellt werden:
-moz-column-count spricht nur den Mozilla Firefox an und
-webkit-column-count spricht nur Google Chrome und den Sarafi an. Die restlichen Browser, die den Befehl interpretieren, werden mit column-count angesprochen.

Der Spaltenabstand

    column-gap: 40px;
    -moz-column-gap: 40px; /* Firefox */
    -webkit-column-gap: 40px; /* Chrome und Safari */
   

Den Abstand zwischen den Spalten kann man mit "column-gap" definieren. Der Abstand wird ganz normal in Pixeln angegeben. Auch hier gilt für Firefox, Chrome und Safari das gleiche wie oben beschrieben.

Das Spalten-Zwischenraum-Styling

    column-rule: 1px dotted #999;
    -moz-column-rule: 1px dotted #999; /* Firefox */
    -webkit-column-rule: 1px dotted #999; /* Chrome und Safari */
   

"column-rule" ist eine Kurzschreibweise für column-rule-width, column-rule-style und column-rule-color. Damit wird die Trennlinie zwischen den einzelnen Spalten beschrieben. Als erstes die Größe in Pixeln, dann der Style (z.B. solid, dotted, dashed, outset usw.) und schließlich die Farbe. Auch hier gilt für Firefox, Chrome und Safari das gleiche wie oben beschrieben.

Beispiel 1

    .spalten_bsp-eins {
      column-count: 3;
      -moz-column-count: 3;
      -webkit-column-count: 3;
      column-gap: 40px;
      -moz-column-gap: 40px;
      -webkit-column-gap: 40px;
      column-rule: 1px dotted #999;
      -moz-column-rule: 1px dotted #999;
      -webkit-column-rule: 1px dotted #999;
    }
   

Beispiel 2

    .spalten_bsp-zwei {
      column-count: 4;
      -moz-column-count: 4;
      -webkit-column-count: 4;
      column-gap: 20px;
      -moz-column-gap: 20px;
      -webkit-column-gap: 20px;
      column-rule: 2px outset #eee;
      -moz-column-rule: 2px outset #eee;
      -webkit-column-rule: 2px outset #eee;
    }
   

CSS3 Transitions

Ein Bild soll beim Mouseover langsam und weich in ein anderes Bild gewandelt werden. Die Hintergrundfarbe eines Links soll beim Hover langsam und weich in eine andere Farbe faden. Eine Box soll sich langsam dynamisch vergrößern, wenn man mit der Maus rüber fährt. Und noch vieles mehr. Mit den CSS3 Transitions ist es nun möglich, ohne Flash Animationen oder Javascript, einen Effekt hinzuzufügen, wenn von einem Style zu einem anderen gewechselt werden soll. Das heißt: es kann langsam allmählich z.B. beim Hover von einem Effekt zu einem anderen gewechselt werden — ohne harte Übergänge.

Browser Unterstützung

Alle Beispiele in diesem Artikel sind nur mit einem unterstützenden Browser sichtbar.

Der Syntax

    transition-property: CSSEigenschaft;
    transition-duration: ZeitInSekunden;
    transition-timing-function: Geschwindigkeitskurve;
    transition-delay: StartInSekunden;
   

transition-property (CSSEigenschaft) muss angegeben werden, damit definiert werden kann, welche Eigenschaft sich nach und nach verändern soll, z.B. "width" für die Breite oder "all" für alles.
Anschließend folgt die Zeitangabe (transition-duration), also "ZeitInSekunden": in wie vielen Sekunden soll das alles geschehen? Diese Angabe wird in Sekunden gemacht, also z.B. "3s".
Mit transition-timing-function kann angegeben werden, in welcher Geschwindigkeitskurve alles geschehen soll, z.B. soll der Effekt langsam beginnen und ihn dann schnell abschließen (mehr dazu unten).
Und transition-delay gibt an, nach wie vielen Sekunden der Effekt starten soll.

Kurze Schreibweise

    transition: Eigenschaft Zeit Geschwindigkeitskurve Start;
   

Werte eingesetzt:

    transition: all 0.5s ease-in-out;
   

Mit der kurzen Schreibweise erspart ihr euch viele Zeilen. Ich denke, das Beispiel ist selbsterklärend.

transition-timing-function — mögliche Werte

• linear — gleichbleibende Geschwindigkeit
• ease — langsamer Start, wird dann schneller und zum Ende wieder langsamer
• ease-in — langsamer Start
• ease-out — langsames Ende
• ease-in-out — langsamer Start und langsames Ende
• cubic-bezier(n,n,n,n) — Geschwindigkeit selbst definieren, Zahlen von 0 bis 1, Beispiel: cubic-bezier(0.25,0.1,0.25,1)

Präfix für Browser

Damit diese Funktion auch in den gängigen Browsern klappt, müsst ihr mit dem jeweiligen Präfix des Browsers arbeiten.

    transition: all 0.5s ease-in-out;

    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
   

Hier muss der entsprechende Präfix vorangestellt werden:
-moz-transition spricht nur den Mozilla Firefox an,
-webkit-transition spricht nur Google Chrome und den Sarafi an und
-o-transition spricht nur den Opera an. Die restlichen Browser, die den Befehl interpretieren, werden mit transition angesprochen.

Handhabung

transitions muss einer normalen Klasse zugewiesen werden. Zusätzlich muss z.B. ein Hover-Effekt definiert werden, wo alle Eigenschaften, die sich beim Hover ändern sollen, angegeben sind.

Beispiel 1

    .trans-eins {
      background: #EBEAE8;
      color: #999;
      transition: all 3s ease-in-out;
      -moz-transition: all 3s ease-in-out;
      -webkit-transition: all 3s ease-in-out;
      -o-transition: all 3s ease-in-out;
    }
    .trans-eins:hover {
      background: #333;
      color: #FFF;
    }
   

Beispiel 2

    .trans-zwei {
      width: 250px;
      height: 80px;
      transition: all 0.5s linear;
      -moz-transition: all 0.5s linear;
      -webkit-transition: all 0.5s linear;
      -o-transition: all 0.5s linear;
    }
    .trans-zwei:hover {
      width: 400px;
      height: 150px;
    }
   

Beispiel 3 - mit CSS3 2D Transforms

    .trans-drei {
      width: 250px;
      height: 80px;
      transition: all 0.7s ease-in-out;
      -moz-transition: all 0.7s ease-in-out;
      -webkit-transition: all 0.7s ease-in-out;
      -o-transition: all 0.7s ease-in-out;
    }
    .trans-drei:hover {
      transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      -o-transform: rotate(45deg);
    }
   

CSS3 2D Transforms

Mit CSS3 kann man nun Objekte transformieren. Entweder könnt ihr sie anders positionieren, skalieren, rotieren oder verdrehen.

Browser Unterstützung

Alle Beispiele in diesem Artikel sind nur mit einem unterstützenden Browser sichtbar.

Der Syntax

    transform: Methode;
    -ms-transform: Methode; /* Internet Explorer 9 */
    -moz-transform: Methode; /* Firefox */
    -webkit-transform: Methode; /* Safari und Chrome */
    -o-transform: Methode; /* Opera */
   

Der Syntax ist eigentlich ganz simpel. Die verschiedenen Methoden sind weiter unten zu finden. Es muss beachtet werden, dass für die Darstellung der gängigen Browser der entsprechende Präfix vorangestellt werden muss:
-ms-transform spricht nur den Internet Explorer 9 an,
-moz-transform spricht nur den Mozilla Firefox an,
-webkit-transform spricht nur Google Chrome und den Sarafi an und
-o-transform spricht nur den Opera an. Die restlichen Browser, die den Befehl interpretieren, werden mit transform angesprochen.

Die Methoden

translate()

    transform: translate(50px,20px);
    -ms-transform: translate(50px,20px);
    -moz-transform: translate(50px,20px);
    -webkit-transform: translate(50px,20px);
    -o-transform: translate(50px,20px);
   

translate() positioniert beispielsweise den Div an die entsprechende Stelle. Die Angaben gelten für left (links, x-Achse) und top (oben, y-Achse). Im Beispiel wird das Objekt 50px von links aus gesehen und 20px von oben aus gesehen positioniert.

rotate()

    transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    -o-transform: rotate(20deg);
   

rotate() lässt das Objekt rotieren, es wird dann also gedreht angezeigt. Die Angabe in der Klammer ist die Grad-Zahl (deg = degree = Grad).

scale()

    transform: scale(2,5);
    -ms-transform: scale(2,5);
    -moz-transform: scale(2,5);
    -webkit-transform: scale(2,5);
    -o-transform: scale(2,5);
   

scale() skaliert das Objekt, also vergrößert es. Die erste Angabe in der Klammer steht für die Breite, die zweite für die Höhe. Die Zahl steht jeweils für den Faktor, um den es vergrößert wird, die 2 steht dann für die 2-fache Vergrößerung der Originalhöhe.

skew()

    transform: skew(20deg,40deg);
    -ms-transform: skew(20deg,40deg);
    -moz-transform: skew(20deg,40deg);
    -webkit-transform: skew(20deg,40deg);
    -o-transform: skew(20deg,40deg);
   

skew() verdreht das Objekt, es wird dann wie von einem anderen Blickwinkel aus betrachtet angezeigt. Die Angaben in der Klammer sind auch hier die Grad-Zahlen (deg = degree = Grad), wobei die erste Angabe für die Drehung um die x-Achse steht und die zweite für die Drehung um die y-Achse.

matrix()

    transform:matrix(0.3,0.8,-0.5,0.9,0,0);
    -ms-transform:matrix(0.3,0.8,-0.5,0.9,0,0);
    -moz-transform:matrix(0.3,0.8,-0.5,0.9,0,0);
    -webkit-transform:matrix(0.3,0.8,-0.5,0.9,0,0);
    -o-transform:matrix(0.3,0.8,-0.5,0.9,0,0);
   

matrix() kombiniert alle 2D-Transformationen in eine. Es gibt 6 Parameter, die mathematische Funktionen beinhalten, die erlauben Elemente zu rotieren [rotate()], zu skalieren [scale()], zu positionieren [translate()] and zu verdrehen [skew()].

Beispiel 1

    .objekt-eins {
      width: 250px;
      height: 80px;
      background: #EBEAE8;
      transform: translate(100px,20px);
      -ms-transform: translate(100px,20px);
      -moz-transform: translate(100px,20px);
      -webkit-transform: translate(100px,20px);
      -o-transform: translate(100px,20px);
    }
   

Beispiel 2

    .objekt-zwei {
      width: 250px;
      height: 80px;
      background: #EBEAE8;
      transform: rotate(10deg);
      -ms-transform: rotate(10deg);
      -moz-transform: rotate(10deg);
      -webkit-transform: rotate(10deg);
      -o-transform: rotate(10deg);
    }
   

Beispiel 3

    .objekt-drei {
      width: 250px;
      height: 80px;
      background: #EBEAE8;
      transform: scale(1.5,3);
      -ms-transform: scale(1.5,3);
      -moz-transform: scale(1.5,3);
      -webkit-transform: scale(1.5,3);
      -o-transform: scale(1.5,3);
    }
   

Beispiel 4

    .objekt-vier {
      width: 250px;
      height: 80px;
      background: #EBEAE8;
      transform: skew(20deg,10deg);
      -ms-transform: skew(20deg,10deg);
      -moz-transform: skew(20deg,10deg);
      -webkit-transform: skew(20deg,10deg);
      -o-transform: skew(20deg,10deg);
    }
   

Beispiel 5

    .objekt-fünf {
      width: 250px;
      height: 80px;
      background: #EBEAE8;
      transform:matrix(1.4,-0.2,1.6,1,0,0);
      -ms-transform:matrix(1.4,-0.2,1.6,1,0,0);
      -moz-transform:matrix(1.4,-0.2,1.6,1,0,0);
      -webkit-transform:matrix(1.4,-0.2,1.6,1,0,0);
      -o-transform:matrix(1.4,-0.2,1.6,1,0,0);
    }
   

Schlusswort

Ich hoffe, ich konnte euch einen kleinen und verständlichen Überblick über die wichtigsten Neuerungen in CSS3 verschaffen!

Falls sich Fehler eingeschlichen haben sollten, könnt ihr mich darüber gerne hier per Kommentar informieren!

Quellen

1. w3schools.com
2. the-art-of-web.com
3. css3.info
4. ich-lerne-css.de
5. webfonts.info
6. fontsquirrel.com

Ähnliches zu "Neuerungen CSS3":

• Das Staubtuch und der Glanz
• Top Bands von Last.fm einbinden
• Ausbildung zum Mediengestalter
• Einfach zum Responsive Webdesign
• Die Sache mit dem WWW