Google mit CSS3 quergestellt
Ein sehr schönes Beispiel wie neue, mit CSS 3 eingeführte, Cascading Style Sheet Features verwendet werden können zeigt das quergestellte Google. Verwendet wurde das CSS 3 Attribut transform. Im Detail sieht die Eigenschaft wie folgt aus:
transform: rotate(-90deg);
Und das Ergebnis kann live auf antimatter15.com bewundert werden:
Und das die Suche auch wirklich funktioniert zeigt der folgende Screenshot:
Der Vollständigkeit halber hier noch der wirklich eingesetzte CSS Code dieses Beispiels, bei dem man mal wieder sehen kann, dass für den Internet Explorer erneut eine eigene Ausdrucksweise nötig war:
iframe {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
transform: rotate(-90deg);
position: absolute;
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /*fur internet exploderz, which while technically could do the same stuff css3 can do, but did it a billion years ago using totally ugly, hideous syntax*/
}
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
transform: rotate(-90deg);
position: absolute;
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /*fur internet exploderz, which while technically could do the same stuff css3 can do, but did it a billion years ago using totally ugly, hideous syntax*/
}
Lustig ist dieses CSS 3 Beispiel auf jeden Fall =).
(via Google Blogoscoped)
