maddesigns

Dank der vollständigen Unterstützung von CSS3 Transforms in den neuen Browsern und des Matrix-Filters in den älteren IE ist es uns heutzutage möglich, Elemente auf einer Seite in allen Browsern kreuz und quer rotiert darzustellen, und zwar eben ohne den Rückgriff auf vorberechnete rotierte Grafiken. Damit eröffnet sich eine ganze Palette neuer Gestaltungsmöglichkeiten, wie zum Beispiel eine dynamisch erzeugte Bildergalerie, die einer Gruppe auf einem Tisch verstreuter Polaroids ähnelt:

Es lässt aber genauso eine Google Maps Karte rotiert einbinden, wie es die Kollegen von vortrieb.net vormachen:

So weit, so gut. CSS3 Transforms, wie auch der IE Matrix Filter haben in der Praxis allerdings auch Schattenseiten: Verschiedene Browser haben nämlich starke Probleme bei der Schrift- und Kantenglättung rotierter Elemente. Vereinzelt sieht das Ergebnis so übel aus, dass man geneigt ist, ganz auf das Rotieren per CSS zu verzichten.

Ein erstes Negativbeispiel ist das Erscheinungsbild von rotierten Bildern in iOS:

Die Kanten des Bildes sind sichtbar stufig und sägen damit stark am visuellen Wow-Effekt.

Ein probates Gegenmittel für iOS hat Thierry Koblentz Mitte des Jahres gefunden, nämlich das zu rotierende Bild nicht als <img> Element, sondern als (Inline-)Block-Element mit entsprechendem Hintergrundbild auszuführen, um dieses dann mit der Anweisung background-clip: padding-box; rundherum glatt zu abschneiden. So sieht der Code für unser Kätzchen aus:

div.kitten {
	width: 200px;
	height: 300px;
	background: url('http://placekitten.com/200/300');

	-webkit-background-clip: padding-box; /* IOS fix */
	background-clip: padding-box; /* IOS fix */

	/* Damit das Element sich wie ein Bild verhält,
	muss display: inline-block gesetzt werden */
	display: inline-block;

	/* Inline-Block für IE6/7 über display: inline + zoom: 1
	per Stern-Hack nur sichtbar für IE6/7 */
	*display: inline;

	/* 6° Rotation via CSS3 Transforms */
	-webkit-transform: rotate(6deg); /* Webkit */
	-moz-transform: rotate(6deg); /* Mozilla Firefox */
	-o-transform: rotate(6deg); /* Opera */
	-ms-transform: rotate(6deg); /* IE9+ */
	transform: rotate(6deg); /* W3C */

	/* 6° Rotation via IE Matrix Filter, IE6-9 */
	filter: progid:DXImageTransform.Microsoft.Matrix(
            M11=0.9945218953682733,
            M12=-0.10452846326765346,
            M21=0.10452846326765346,
            M22=0.9945218953682733, sizingMethod='auto expand');

	/* Ohne zoom gehen Filter und Inline-Block nicht in IE6/7 */
	zoom: 1;
}

div.kitten:nth-of-type(1n) {
	/* Deaktivieren des Filters in IE9,
	der ja CSS Transforms beherrscht */
	filter: none;
}

Damit wäre in iOS alles glattgerechnet, aber nun hat der Chrome-Browser Glättungsprobleme, die er mit dem <img>-Element so nicht hatte:

Im Chrome-Browser hilft jedoch ein Trick, der bei rotierten Elementen unter WebKit fast immer greift: Man zwingt den Browser dazu, das Objekt mit Hardware-Beschleunigung zu zeichnen. Dankenswerterweise ist es dann so, dass die Grafikkarte automatisch alles zu Zeichenende glattrechnet. Wie aktiviert man die Hardware-Beschleunigung? Indem man zusätzlich eine CSS 3D-Transformations-Anweisung einbaut, die aber eigentlich nichts transformiert sondern nur so tut, zum Beispiel ein translate3d mit Null-Werten:

-webkit-transform: translate3d(0,0,0) rotate(6deg);

Das Endresultat (live):

Code: http://jsfiddle.net/maddesigns/xgQ6M/

Rotierter Text mit CSS3 glätten

Die nächste problematische Situation gibt es, wenn Sie Elemente mit CSS3-Farbverläufen und Rand, oder Elemente mit Text darin rotieren. Verschiedene Konstellationen machen da verschiedene Fehler:

Die WebKit-Browser unter Windows zum Beispiel ziehen einigermaßen saubere Kanten, verhunzen den Text jedoch, weil sie noch auf die ältere Cleartype-Schriftglättung zurückgreifen, die dem Szenario nicht gewachsen ist. Firefox hingegen hat mit der Schrift null Probleme, weil er das modernere DirectWrite nutzt (in Vista und Windows 7). Dafür reisst er jedoch Lücken zwischen dem CSS3-Farbverlauf und dem ebenfalls per CSS gesetzten Border auf. Safari unter OSX hat aufgrund der sehr guten Schriftglättung von Quarz kein Problem mit der Schrift, aber auch dort könnten die Kanten wie unter Windows noch eine Spur schöner sein.

Wieder können wir für die WebKit-Browser den Joker “CSS 3D-Transformation” ziehen, der dafür sorgt, dass die Kanten glatter werden.

-webkit-transform: translate3d(0,0,0) rotate(6deg);

Damit die Schrift unter Cleartype etwas weniger bröckelig wirkt, wenden wir ein minimales Text-Glühen in der Farbe des Textes an:

text-shadow: 0 0 1px rgba(255,255,255,0.25);

Nun bleibt noch, in Firefox die Lücken zwischen Hintergrundverlauf und Rahmen zu beheben. Das bewerkstelligen wir auf ganz ungewöhnliche Art und Weise, nämlich dadurch, dass wir den Farbverlauf durch eine Kombination von Hintergrundfarbe und einem einseitig innen gerichteten Box-Shadow nachbauen:

/* untere Farbverlaufsfarbe */
background: #a40518;

/* innerer Schatten, der von oben weich hineinverläuft

box-shadow: inset 0 [element Höhe] [element Höhe]
([element Höhe] * -0.5) [obere Farbverlaufsfarbe] */    

-webkit-box-shadow: inset 0 34px 34px -17px #dd001a;
-moz-box-shadow: inset 0 34px 34px -17px #dd001a;
-o-box-shadow: inset 0 34px 34px -17px #dd001a;
box-shadow: inset 0 34px 34px -17px #dd001a;

Das visuelle Ergebnis ist letztendlich dasselbe, aber Firefox lässt nun keine Lücken mehr. Ein weiterer Vorteil dieses “Farbverlaufs” ist der, dass auch IE9 ihn darstellen kann, wohingegen er ja sonst keine echten Farbverläufe beherrscht. Hier das Live-Ergebnis:

Code: http://jsfiddle.net/Schepp/TsuDf/

Die älteren IEs haben hier übrigens null Probleme. Wo sie jedoch Probleme haben ist wenn man rotierte Texte transparent vor einem Hintergrund platziert:

Die alten IEs reagieren hier mit überfetteter Schrift, da es ihnen an “Verfügungsmasse” zum Glätten fehlt, sprich an Hintergrundfarbe im rotierten Element selbst, mit der sie die Textfarbe weich überblenden können. Chrome unter Windows hat dasselbe Problem wie eben schon einmal, nämlich das Cleartype-Problem. Und wieder juckt es Firefox nicht, denn der nutzt DirectWrite.

Chromes Problem lösen wir genauso schnell wie vorhin, indem wir einen minimalen Textschatten hinzufügen, der die Schrift weichzeichnet:

text-shadow: 0 0 1px rgba(128,128,128,0.1);

Dem IE können wir auch helfen. Und zwar müssen wir dem rotierten Element zunächst einmal eine Hintergrundfarbe geben, damit er die Schrift weich überblenden kann. Idealerweise nehmen wir dafür eine Farbe, die ungefähr dem Farbton des eigentlich geplanten Hintergrunds entspricht, hier also sandfarben:

*background: #c49e6d;

Das *-Sternchen sorgt dafür, dass nur IE6 und 7 diese Anweisung sehen. Und jetzt kommt’s: Nun hängen wir vor dem Matrix-Filter zusätzlich einen Chroma-Filter ein:

filter:
	progid:DXImageTransform.Microsoft.Chroma(color="#c49e6d"),
	progid:DXImageTransform.Microsoft.Matrix(M11=0.99452190,
				M12=-0.10452846,
				M21=0.10452846,
				M22=0.99452190,
				sizingMethod='auto expand');

Mehrere Filter lassen sich problemlos kommagetrennt in eine filter-Eigenschaft stecken. Der Chroma-Filter sorgt dafür, dass alle Bereiche eines Elements in einer definierten Farbe ausgestanzt und damit durchsichtig werden. Wir konfigurieren ihn mit der Farbe, die wir als (Hilfs-)Hintergrund genutzt haben, also #c49e6d, und machen die Bereiche um unseren fertig geglätteten Text dadurch wieder transparent, ganz so wie wir es ursprünglich wollten. Danach erst darf der Matrix-Filter seines Amtes walten und das Element rotieren. Das Live-Ergebnis:

Code: http://jsfiddle.net/Schepp/NDrCU/

Im Großen und Ganzen sollte man sich also nicht entmutigen lassen, sondern sich mit diesen Tricks gegen Browserbugs wehren. Gleichzeitig schadet es natürlich nicht, wenn wir weiter darauf hin arbeiten, die alten IEs loszuwerden, und den WebKit-Machern so lange auf den Keks gehen, bis sie ihren Browser mal auf Vordermann gebracht haben.

---

Dies ist ein Gastartikel von Christian ”Schepp” Schaefer im CSS3-Adventskalender. Christian ist freiberuflicher Webentwickler aus Düsseldorf. Er ist Autor der Ladezeitenbeschleuniger-Bibliothek CSS-JS-Booster sowie Moderator des wöchentlich erscheinenden Working Draft Podcasts and er verfolgt Eure Tweets mit seinem Account derSchepp.

---

CSS3 Adventskalender Gewinnspiel

In Woche 2 im CSS3 Adventskalender Gewinnspiel verlosen wir das Video-Training “Webseiten programmieren und gestalten” von Christian ”Schepp” Schaefer – Hier ein kleiner Einblick:

Um das Video-Training zu gewinnen gebt einfach ein Kommentar ab. Teilnahmeschluß ist der 11.12.2010 um 24 Uhr. Der Rechtsweg ist ausgeschlossen. Die Auslosung erfolgt unter Zuhilfenahme von random.org.

Related posts:

1. CSS3 Adventskalender Tag 14
2. CSS3 Adventskalender Tag 18
3. Fun with Border-Radius – CSS Sprechblasen – CSS3 Adventskalender Tag 23
4. text-shadow – Text-Effekte – CSS3 Adventskalender Tag 7
5. CSS3 Adventskalender 2011 – Tag 4