Text mit CSS3 rotieren - Guru 2.0
Text mit CSS3 rotieren

Text mit CSS3 rotieren

Ich finde jetzt immer mehr Techniken um mit CSS3 und HTML (bis vor kurzem HTML 5) zu arbeiten. Immer mehr Browser untersützen jetzt die neuen Versionen der Auszeichnungssprachen. Manche Befehle werden schon quer über alle Browser unterstützt, manche nur mit den browserspezifischen Präfixes und andere sind leider nur in der Spezifikation enthalten und bleiben (noch) ein Wunsch.

Heute stelle ich euch die Textdrehung vor. Diese wird von den meisten Browsern (IE/Win, Safari und Firfox) bereits unterstützt. Das ganze sollte dann so aussehen:

29
Jan.
2011

und wie geht das ganze? Eigentlich ganz einfach. Du brauchst natürlich in deinem Element das passende Datum, welches sich aus div– und span-Elementen zusammensetzt.

Nun folgen die Stile, welche Du im passenden Stilesheet einfügen musst.

Bei Safari/FireFox können wir die in der Definition vorhande transform-Eigenschaft (mit den browserspezifischen Präfixes) verwenden. Für unseren Lieblingsbrowser IE, brauchen wir leider einen conditional-Tag und müssen mit der browsereigenen filter-Eigenschaft arbeiten.
Für alle Browser ist es notwendig, dass der zu drehende Text als block-Element dargestellt wird.

Wer mehr wissen will…

Schaut sich mal bei Webkompetenz zu HMTL/CSS3 um. Natürlich ist auch die Definition bzw. der Standard beim W3C [EN] interessant. Für die Browserweiche beim IE gibt es einen Post bei Stil mit {stil}.

Blogheim.at Logo
Diese Website verwendet Cookies - nähere Informationen dazu finden Sie in unserer „Datenschutzerklärung“. Klicken Sie auf „Ich stimme zu“, um Cookies zu akzeptieren und unsere Webseite zu besuchen, oder klicken Sie auf „Cookie-Einstellungen“, um Ihre Cookies selbst zu verwalten.