Text vertikal laufen lassen

Eine Überschrift wird vertikal laufen gelassen und neben den Text platziert. Kommt von einer Anfrage von Chris Heilmann http://www.wait-till-i.com/2011/08/17/css-challenge-90-degree-turned-headings-in-css3-with-a-fallback/ Original: http://jsfiddle.net/Gabri/t9u26/2/ http://css-tricks.com/13641-sideways-headers/

by Jens Grochtdreis

HTML

<script src="https://raw.github.com/Modernizr/Modernizr/master/modernizr.js"></script>
<div>
      <h1>Arbeiterstrandbadstraße</h1>
      <p>Nein, meine Texte les ich nicht, so nicht, stöhnte Oxmox. Er war mit Franklin, Rockwell und dem halbtaxgrauen Panther Weidemann in Memphis (Heartbreak Hotel) zugange. Sie warteten auf die fette Gill, um bei der Bank of Helvetica die Kapitälchen in Kapital umzuwandeln. Oxmox ließ nicht locker. Ich fleh euch an, rettet meine Copy, gebt meinem Body nochn Durchschuß! Kein Problem, erbarmte sich Old Face Baskerville, streichelte seinen Hund, zog seine einspaltige Poppl, legte an und traf! (Zeidank nichts Ernstes – nurn bißchen Fraktur.) Oxmox: Danke, ist jetzt mit Abstand besser. Derweil jumpte der Fox leise over the Buhl, die sich mal wieder immerdar wie jedes Jahr gesellte. </p>
</div>

<div>
    <h1>Kunst &amp; Kultur</h1>
      <p>Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur, weil er Schmerz ist, es sei denn, es kommt zu zufälligen Umständen, in denen Mühen und Schmerz ihm große Freude bereiten können. </p>

</div>


<div>
      <h1>Ganz tolle Überschrift</h1>
      <p>Diesmal war Guaredisch ihr Erwählter, weil seine Laufweite einem vollgetankten Bodoni entsprach und seine ungezügelte Unterlänge ihre Serifen so serafisch streifte, daß sie trotz Techtelmechtelei die magere Futura, jene zuverlässige und gern eingesetzte Langstreckenläuferin, rechtsbündig überholen konnten. Leute, giftelte Tiffany, macht endlich maln Punkt. Und das Komma soll sich gefällixt an die richtige Stelle setzen. Und keine Trennungen. Und nicht zu viele Anschläge heut nacht! Die Goudy war vorbei. Aus einem üblen Geviert tauchte eine Horde Gemeiner auf, angeführt von einem Versalen. Als sie des Grauwerts anblickig wurden, machten sie auf dem Absatz kehrt — ohne Einzug. Die in der letzten Reihe warfen noch schnell eine Handvoll Buchstaben in die Luft.</p>
</div>

CSS

body {
   padding: 0 20px; 
   font: 16px Georgia, Serif;   
    }

div{
    background:#ffc;
    display: block;
    position: relative;  
    padding: 3em 3.5em .5em .7em; 
    margin: 40px;
    overflow: hidden;
    }
    div p {
        margin: 0 0 1em;  
        }
        div p {
         -webkit-transform: translateX(2.5em) translateY(-2em); 
        -moz-transform:    translateX(2.5em) translateY(-2em); 
        -ms-transform:     translateX(2.5em) translateY(-2em); 
        -o-transform:      translateX(2.5em) translateY(-2em); 
        transform:         translateX(2.5em) translateY(-2em);   
            }



div h1 {
    font: 16px Georgia, Serif;
    background: #369;
    color: #fff;
    padding: .7em;
    margin: 0;
    line-height: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 1000%;
    }

div h1{
     -webkit-transform: rotate(90deg) translateX(20px); 
    -moz-transform:    rotate(90deg) translateX(20px);
    -ms-transform:     rotate(90deg) translateX(20px);
    -o-transform:      rotate(90deg) translateX(20px); 
    transform:         rotate(90deg) translateX(20px); 
    -webkit-transform-origin: 1.8em .5em;
    -moz-transform-origin:    1.8em .5em;
    -ms-transform-origin:     1.8em .5em;
    -o-transform-origin:      1.8em .5em;
    transform-origin:         1.8em .5em;
        }

/* just for testing */

div { max-width: 420px;}


/* styling basics */
html {padding: 20px 0; background-color: #efefef;}
body {width: 80%; padding: 40px; margin: 0 auto; background: #fff; box-shadow: 1px 1px 5px rgba(0,0,0,0.5); font-family: Verdana, Arial, sans-serif; }

JavaScript

/* No JS allowed, press the run button to see the code*/