Matrix-Filter
Das Entscheidende: Für dieses Nichts wird ein Schatten definiert, er soll teiltransparent sein, deswegen die Farbangabe über hsla():...
Das Entscheidende: Für dieses Nichts wird ein Schatten definiert, er soll teiltransparent sein, deswegen die Farbangabe über hsla():
-webkit-box-shadow: 0 15px 10px
hsla(0, 0%, 0%, 0.7);
-moz-box-shadow: 0 15px 10px
hsla(0, 0%, 0%, 0.7);
box-shadow: 0 15px 10px hsla(0, 0%,
0%, 0.7);Schließlich wird das Element noch leicht über CSS-Transforms gedreht.
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}Die Idee für diese Umsetzung von Schatten stammt von Nicolas Gallagher. Er führt auf einer Demoseite vor, was für unterschiedliche und sehr schöne Schatteneffekte sich mit diesem Prinzip erstellen lassen. Seine Demoseite zeigt kleine weiße beschriftete Kärtchen, die sich ganz unterschiedlich wölben - so sieht es aus, aber es sind natürlich die geschickt eingesetzten Schatten. Viele der dort vorgestellten Schattenbeispiele basieren auf zwei ergänzten und gedrehten Schatten, dann kommt neben dem im Beispiel verwendeten :before noch der Selektor :after zum Einsatz.
Matrix-Filter
Die 2D-Transforms werden in allen aktuellen Browsern interpretiert, im Internet Explorer jedoch erst ab Version 9. Für ältere IEs lassen sich Transform-Operationen über den Matrix-Filter nachbilden. Ein Beispiel für eine Drehung um 10 Grad:
/* andere Angaben mit Präfix
ausgelassen */
transform: rotate(10deg);
filter: progid:DXImageTransform.
Microsoft.Matrix( M11=0.984807753012208, M12=-0.17364817766693033, M21=0.17364817766693033, M22=0.984807753012208, sizingMethod='auto expand');
zoom: 1;Link-Tipps
2D-Transformationen: www.w3.org/TR/css3-2d-transforms/ CSS-Prefixer erzeugt aus der Standardeigenschaft die Varianten mit den herstellerspezifischen Präfixen: cssprefixer.appspot.com/ Schöne Beispiele für über CSS Transform gedrehte Schatten: nicolasgallagher.com/css-drop-shadows-without-images/ Matrix-Filter-Angaben für den IE < 9 generieren lassen: css3please.com/ www.useragentman.com/IE TransformsTranslator/ Javascript-Bibliothek css-Sandpaper für Transformationen auch im IE < 9: www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/
3D-Transformationen: www.w3.org/TR/css3-3d-transforms/
Ziemlich verwirrend, nicht? Der Anfang ist soweit noch klar: filter leitet den Microsoft-Filter ein, dann kommt der Name des Filters, er heißt DXImageTransform.Microsoft.Matrix. In runden Klammern werden die Parameter für die Matrix-Drehung angegeben. Die Angabe zoom: 1 ist wichtig für den IE6 und den IE 7, da Filter nur wirken, wenn das entsprechende Element hasLayout hat - was hier über die proprietäre Eigenschaft zoom erreicht wird.Die Erzeugung des IE-Codes, der hier so kryptisch aussieht, sollten Sie anderen überlassen, beispielsweise dem IE-Transform-Translator oder CSS3-Please.Tipp: Für den IE 8 können Sie anstelle von filter auch -ms-filter benutzen und den Wert in Anführungszeichen setzen. Damit ist dann der Code syntaktisch korrektes CSS. Allerdings hat das den Nachteil, dass Sie bei Verwendung von -ms-filter kein Leerzeichen innerhalb der bandwurmlangen Eigenschaftsangabe machen dürfen, was die Lesbarkeit noch einmal erschwert. Da Filter auch in der -ms-filter-Schreibweise proprietärer Code bleiben und der IE 8 die filter-Angabe ebenfalls liest, können Sie auf -ms-filter auch verzichten.
Javascript-Nachhilfe für IE < 9
Komfortabler einzusetzen, wenn es um mehrfache Transformationen geht, ist die Javascript-Bibliothek cssSandpaper.Für cssSandpaper müssen Sie vier Javascript-Dateien einbinden, diese sind aber alle im Download-Paket enthalten.
<script type="text/javascript" src=
"../../shared/js/EventHelpers.js"></script><script type="text/javascript" src=
"../../shared/js/cssQuery-p.js"></script><script type="text/javascript" src=
"../../shared/js/jcoglan.com/sylvester.js"></script><script type="text/javascript" src=
"../../shared/js/cssSandpaper.js"></script>Ihre CSS-Angaben müssen in einer externen Datei stehen, da interne Angaben nicht geparst werden. Zudem funktioniert Sandpaper nur, wenn Sie die Website auf einem Webserver ausführen.Dann können Sie in der CSS-Datei die Transformationen einsetzen, dazu müssen Sie sie allerdings mit dem sand-Präfix versehen.
.gedrehtverzerrt {
-sand-transform: rotate(30deg)
skew(20deg, 20deg);
}
3D-Transformationen
Aber das ist alles noch ein bisschen platt, oder? So richtig wirken die Transformationen erst im 3D-Raum, und in Webkit-Browsern sind sie bereits implementiert. Tipp: Bis einschließlich Chrome 11 müssen Sie die 3D-Transforms erst in den Einstellungen aktivieren. Geben Sie dazu about:flags in der Adresszeile ein und aktivieren Sie den Punkt GPU accelerated compositing. Ab Chrome 12 (zumindest in der Beta) ist das nicht mehr notwendig. Ein kleines Beispiel für 3D-Transformationen:
<div id="eins"><a href="#" class=
"box">3D-Transformationen</a></div><div id="zwei"><a href="#" class=
"box">3D-Transformationen</a></div>Per CSS erhalten die umfassenden Elemente erst einmal eine Perspektive. Der Wert für perspective bestimmt die Intensität des 3D-Effekts: Je höher der Wert, umso entfernter ist der Betrachter.
#eins {
-webkit-perspective: 300;
}
#zwei {
-webkit-perspective: 500;
}Dann werden die Kindelemente über rotate() um die Y-Achse gedreht:
.box {
-webkit-transform: rotateY(45deg);
}Solche Beispiele lassen sich jetzt prächtig erweitern: Beispielsweise könnte man definieren, dass beim Hovern die Elemente wieder in ihrer normalen Position angezeigt werden - dann sind sie besser lesbar. Und damit die Drehbewegung zu sehen ist, greift man zu CSS Transitions - darüber lassen sich dann ganz unglaubliche und wunderbar andere als die altgewohnten Benutzeroberflächen erstellen.
Nicht für alle Browser
Zwar ist die Browserunterstützung für 3D-Transformationen derzeit noch eher dürftig - sie funktionieren leider nur in den Webkit-basierten Browsern, aber immerhin bedeutet das, dass sie bei iPhone und iPad angekommen sind. Und auch für Version 10 des Internet Explorer wurde bereits Unterstützung angekündigt.
