13.05.2012 | von | Webdesign | Kommentare (14)

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

ab V. 8
ab V. 3.6
ab V. 4
ab V. 3
ab V. 10

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;
    }
   

Dieser Text wird in der Schriftart Miama angezeigt.

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

ab V. 9
ab V. 4
ab V. 5
ab V. 5
ab V. 10.5

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

Arrows

Beispiel 2

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

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

Arrows

Beispiel 3

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

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

Arrows

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;
    }
   

Diese Box hat abgerundete Ecken.

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;
    }
   

Diese Box hat abgerundete Ecken.

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;
    }
   

Diese Box hat abgerundete Ecken.

CSS3 Box Shadow

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

Browser Unterstützung

ab V. 9
ab V. 4
ab V. 10
ab V. 10.5

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

ab V. 3
ab V. 4
ab V. 4
ab V. 10

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;
    }
   

Dies ist ein Text mit Schatten.

Beispiel 1: Harter Schatten

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

Dies ist ein Text mit Schatten.

Beispiel 2: Mehrere Schatten

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

Dies ist ein Text mit Schatten.

Beispiel 3: Kontur

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

Dies ist ein Text mit Schatten.

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;
    }
   

Dies ist ein Text mit Schatten.

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

ab V. 9
ab V. 4
ab V. 4
ab V. 5
ab V. 10.5

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);
    }
   

Original-Bild.

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

90% größer in Breite (zu 90% ausgefüllte Fensterbreite) und 10% in der Höhe.

Beispiel 2

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

Das Bild ist nun 200px breit und 100px hoch.

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

ab V. 9
ab V. 4
ab V. 4
ab V. 5
ab V. 10.5

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:

Background-Origin

Background-Origin

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;
    }
   

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;
    }
   

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;
    }
   

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

-moz-
-webkit-
-webkit-

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;
    }
   

Dieser Text wird in drei Spalten angezeigt. Fülltext: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

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;
    }
   

Dieser Text wird in vier Spalten angezeigt. Fülltext: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

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

-moz-
-webkit-
-webkit-
-o-

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;
    }
   

Beim Hover wechselt sanft die Hintergrund- und die Schriftfarbe.

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;
    }
   

Beim Hover vergrößert sich sanft die Box.

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);
    }
   

Beim Hover rotiert die Box sanft.

CSS3 2D Transforms

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

Browser Unterstützung

-ms-
-moz-
-webkit-
-webkit-
-o-

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);
    }
   

Die Box ist um 100px nach rechts und 20px nach unten bewegt worden.

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);
    }
   

Die Box ist im 10° gedreht worden.

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);
    }
   

Die Box ist in der Breite um das 1 1/2-fache und in der Höhe um das 3-fache skaliert worden.

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);
    }
   

Die Box ist in der x-Achse um 20° und in der y-Achse um 10° verdreht worden.

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);
    }
   

Die Box mit rotate(), scale() und translate() verändert worden.

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!

Nächster Artikel: Die Technik zur digitalen Fotografie?

Meine lieben Leser,
da ich mich schon mit einigen über semiprofessionelle digitale Fotografie unterhalten habe, und es doch teilweise Unsicherheiten in der Technik gab, habe ich mir überlegt, ob ich euch nicht einen kleinen technischen Artikel zur Fotografie schreibe.
Auf folgende Schlagworte werde ich eingehen: Belichtungszeit, Blende, ISO, Weißausgleich, Brennweite der Objektive, Kamera-Sensor, Crop-Faktor (Zusatz: EF und EF-S Objektive von Canon), Schärfentiefe, Bildrauschen u.v.m.

Meine Frage an euch lautet: Besteht allgemeines Interesse an diesem Artikel, oder meint ihr, dass es genug solcher Tipps und Anleitungen gibt? Ich würde mich dann im ersten Fall erst nach meiner Abschlussprüfung an diesem Beitrag setzen, dies könnte also noch gut einen Monat dauern. Schreibt mir gerne eure Meinung dazu!

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":

Ähnliche Beiträge

Die Sache mit dem WWW

Da ich in letzter Zeit vermehrt festgestellt habe, dass das „www“ in einer Dom … weiter

Das Staubtuch und der …

Meine lieben Besucher, dem einen oder anderen wird sicherlich aufgefallen sein … weiter

Tags

Webdesign

Flügel

13. Mai 2012, 21:08 Uhr

Sehr schöner Artikel (auch wenn ich mich irgendwie gewundert habe, dass DU über solche Themen schreibst). Schön im Sinne von Informativ und vor allem übersichtlich. Da war bestimmt sehr viel Arbeit dahinter.

Ich bin ein großer Fan von CSS3. Vor allem "Transistions", da sie großes Potential haben und hoffentlich Javascript (welches ich nicht so mag) verdrängen *g*
Schade, dass noch nicht alle Browser die neuen Techniken unterstützen.

namimosa

14. Mai 2012, 11:15 Uhr

mit diesem ganzen codierungs-zeug hab ich mich schon ewig nicht mehr auseinander gesetzt. irgendwie habe ich da ganz schön den überblick verloren, befürchte ich. ich sollte mich doch mal wieder damit auseinander setzten.

na ja, zumindest haben wir uns über das geschenk köstlich amüsiert. :) aber mal ehrlich: von einem telefonanbieter gäbe es doch eine vielzahl an besseren treuegeschenken. ein paar freiminuten oder so wären doch 10 mal sinnvoller gewesen. darüber hätten wir uns ehrlich gesagt schon mehr gefreut.
vor allem weil die form aus total labbrigen plastik ist und ich bezweifle, dass man damit wirklich gut irgendwas ausstechen kann. auf grund mangelnden kochkenntnissen und lust dazu, werde ich das aber eher nicht in der praxis testen. ;)
na ja, und um ehrlich zu sein... also derjenige den ich recht gern hab, der hat sich auch kaputt gelacht über diese idee. ich glaube der fände herzförmiges essen jetzt auch nur so semi-romantisch und eher zum lachen... ich glaube das lasse ich lieber auch in zukunft bleiben! ^^

dankeschön für dein großes lob zu meinen fotos! es freut mich natürlich total zu lesen, dass die fotos profesionell aussehn. ein schönes kompliment.
ja, meine freundin ist wirklich sehr hübsch. hat aber kein interesse am model (außer für mich).

Dani

14. Mai 2012, 12:36 Uhr

Halli hallo!

Diesen Beitrag finde ich richtig toll - CSS3 scheint richtig interessant zu sein! Ich habe auch schon einen "Tipp" von dir ausprobiert - vielleicht stelle ich es einmal online oder so! :)

Find ich wirklich gelungen! Hoffentlich kommen noch mehr solcher Tipps von dir? Ich würde mich darüber wirklich sehr freuen! :)

Wie gehts dir eigentlich so? Hattest du ein schönes Wochenende?

Liebe Grüße
Dani

Andy

15. Mai 2012, 12:55 Uhr

Heyho :)
Ich schäme mich.. Ich nehme mir jetzt schon seid dem 30.04. vor dir endlich wieder zu schreiben, aber irgendwie bin ich nicht so ganz in Fahrt gekommen... Aber heute ist es soweit! Zu war ein freier Tag doch alles gut ist, besonders wenn die Server von nem Spiel "down" sind... :D

Jedes Mal frage ich mich wieder, wie man so super Einträge schreiben kann. Gefällt mir echt wahnsinnig gut, besonders wie der Eintrag augebaut ist. Es ist informativ, übersichtlich und klar strukturiert und das ist einfach schön zu lesen dann!

Andy

15. Mai 2012, 12:57 Uhr

Teil 2 (irgendwie habe ich einen Teil rausgelöscht ausversehen)

Wirklich ein sehr schöner Eintrag! Vielleicht kommen ja noch mehr solche Einträge zum Thema CSS oder der Gleichen - egal, hauptsache man liest etwas hier! :D (Nein, ich möchte jetzt nicht eine Schleimspur hier ziehen)

Ich persönlich würde mich über den Artikel "Die Technik zur digitalen Fotografie?" sehr freuen, weil es vor allem sehr spannend ist und man lernt vor allem auch nie aus. Da ich sowieso deine Artikel sehr mag, darfst du dir auch so viel Zeit lassen, wie du möchtest und das vor allem auch, wenn es um die Abschlussprüfung geht! Da ist es völlig Verständlich, dass es auch mal ein wenig dauert! Viel Glück für die Prüfung!

Ich wünsche dir jetzt noch einen schönen Dienstag!

Viele liebe Grüße!

Fyn

15. Mai 2012, 23:15 Uhr

Tolle Zusammenfassung und schöne Darstellung!

neri

20. Mai 2012, 23:23 Uhr

hey isabel, lang nix mehr gehört wie geht es dir denn?

bitte ändere doch einmal meine url, wäre ganz lieb ;)

http://www.ladybird.bplaced.net

ps: ich meld mich künftig öfter, war kaum on in letzter zeit

neri

Melina

22. Mai 2012, 05:07 Uhr

Danke :) Die Hauptnavi beim Stuff ist nur für die Stuffunterseiten aufrufbar. Einfach nur eine kleine Spielerei, nur für den Stuff. Ja, mit den Buttons zum Scrollen hab ich mir schon gedacht gehabt, dass viele das erst mal nicht sehen oder verstehen werden. Aber wie du schon sagtest, ist nicht alltäglich und ich wollte einfach mal wieder was "neues" ^^
Mit dem Thema von deinem Eintrag hatte ich mich vor kurzem auch schon befasst. Das hast du gut erklärt und sehr schön dargestellt :)

nickaey

25. Mai 2012, 17:56 Uhr

schöner artikel. :) ich selbst nutz auch schon seit längerem verschiedene css3 effekte und hachja, ich liebe es. schade dass der internet explorer da nicht mithalten kann, selbst in version 9 noch nicht.

ich weiß garnicht, wie ichs sagen soll, ohne dass es dumm rüberkommt, aber es gab probleme mit meiner domain weshalb ich nun wieder meinen taess server nutzen MUSS. ._. könntest du mich vielleicht doch wieder umlinken? wär super. die domain wurd gelöscht.

liebe grüße ♥

Jenny

03. Juni 2012, 19:15 Uhr

Wow, du hast dir echt viel Zeit dafür genommen. Der Aufbau des Artikels ist dir super gelungen. Finde ich toll, dass sich die einzelnen Kurztutorials in einem kleinen Fenster öffnen (ich habe gerade den Namen dafür vergessen). Total übersichtlich und wunderbar beschrieben!

Zu deiner Frage: Schreib, schreib, schreib! Wirklich, du machst das echt toll. Man merkt, dass du Ahnung hast: Somit liest man deine Tipps sehr gerne. Ich würde mich wirklich total darüber freuen, wenn du etwas über Fotografie schreiben würdest. Da würden sich auch für mich einige Fragen in Luft auflösen.

Viel Glück für deine Abschlussprüfung. Wirst du zwar nicht brauchen, aber man wünscht es ja doch schon mal ganz gerne.

Ich habe heute übrigens das erste Mal deine "private" Homepage mit deinen Kenntnissen etc. gesehen und bin hin und weg. So eine Person wie dich wünscht man sich als große Schwester und jeder Mann als Frau. Ab heute bist du mein neues Vorbild, was die Kenntnisse, Ansichten etc. angeht. Motiviert mich total! Mach weiter so!

PS: Bin ich froh, dass es auch Frauen gibt, die in dieser Branche arbeiten und auch wirklich Ahnung davon haben.

PSS: Wie bist du zu dieser Ausbildung gekommen? Welche Schulen hast du besucht? Was hast du in Zukunft vor zu machen? (Irgendwie klingt das hier wie ein Bewerbungsgespräch...)

Ganz liebe Grüße,
Jenny

Dani

06. Juni 2012, 16:53 Uhr

Oh ja, ich kann dich ja so gut verstehen ... Ich bin in der Matura (Abitur) ... Die schriftliche hab ich schon hinter mir und am Montag hab ich die mündliche ... Ich hab schon sehr sehr sehr viel Angst, ich hoffe, dass ich das schaff ...

Danke für die Bewertuntg ... Tenzi wird sich sicher darüber sehr freuen :D ich mag den Blog auch sehr gerne und schaue da nun auch öfters rein ... :)
Freue mich schon auf neue Beiträge von dir!

Liebe Grüße und viel Erfolg bei deinen Prüfungen!

Dani

nickaey

06. Juni 2012, 18:38 Uhr

ach ist doch halb so wild. :)

ja, es gibt was neues. war eine spontanaktion vor.. etwas über ner woche oderso. die gründe, die an behindyourmask hingen warn mir einfach zu negativ. brauchte einfach was neues. sorry, falls es umstände macht. :)

viel glück bei der prüfung übrigens! schaffst du schon. ♥
liebe grüße.

Pat

16. Dezember 2012, 19:36 Uhr

Hey,

wollt mich nur bedanken deine Seite hat mir extrem viel für CSS 3 gebracht. Muss eine Präsi über CSS 3 und seine Neuerungen machen und deine Erklärungen und Beispiele sind top. weiß nich ob du das liest aber auf jeden Fall danke.

LG Pat

Dracovina

19. Dezember 2012, 09:05 Uhr

Hallo Pat,

auch, wenn ich hier nicht mehr so oft aktiv bin, lese ich trotzdem alle Kommentare :)
Vielen lieben Dank für dein Lob. Es freut mich, dass die meine kleinen Erklärungen weiter helfen konnten! :)

Erlaubte Tags: <b><i><br>
Keine <3 oder sonstige Zeichen mit < oder >, außer die erlaubten Tags!



* erforderlich

Über die Autorin

Nun ist es an der Zeit, dass ich mich euch als Autorin von Traumfinsternis ein wenig vorstelle. … mehr lesen

Musik: Nightwish – Turn Loose the Mermaids

260
^ Top