5202

ein Blog über technische Fragen zu Blogger

Skizzenbuch: CSS3 Eigenschaft 'Resize'

von
Ich habe noch mal über das Auf.- und Zuklappen von Texten im Blog nachgedacht. Statt das mit jQuery zu lösen, warum nicht mit einer Textbox und der CSS3 Eigenschaft 'Resize'? Die Eigenschaft ist so gut wie unbekannt, obwohl sie inzwischen von Webkit und Mozilla unterstützt wird. Opera soll auch noch dazu kommen - das wären dann alle 'echten' Browser. Es fehlt - wie immer - der Weltmarktführer, aber den verwendet ja auch keiner.

Wer reitet so spät durch Nacht und Wind?
Es ist der Vater mit seinem Kind;
Er hat den Knaben wohl in dem Arm,
Er faßt ihn sicher, er hält ihn warm.

Mein Sohn, was birgst du so bang dein Gesicht? —
Siehst, Vater, du den Erlkönig nicht?
Den Erlenkönig mit Kron’ und Schweif? —
Mein Sohn, es ist ein Nebelstreif. —

„Du liebes Kind, komm, geh mit mir!
Gar schöne Spiele spiel’ ich mit dir;
Manch’ bunte Blumen sind an dem Strand,
Meine Mutter hat manch gülden Gewand.“ —

Mein Vater, mein Vater, und hörest du nicht,
Was Erlenkönig mir leise verspricht? —
Sei ruhig, bleibe ruhig, mein Kind;
In dürren Blättern säuselt der Wind. —

„Willst, feiner Knabe, du mit mir gehn?
Meine Töchter sollen dich warten schön;
Meine Töchter führen den nächtlichen Reihn
Und wiegen und tanzen und singen dich ein.“ —

Mein Vater, mein Vater, und siehst du nicht dort
Erlkönigs Töchter am düstern Ort? —
Mein Sohn, mein Sohn, ich seh’ es genau:
Es scheinen die alten Weiden so grau. —

„Ich liebe dich, mich reizt deine schöne Gestalt;
Und bist du nicht willig, so brauch’ ich Gewalt.“ —
Mein Vater, mein Vater, jetzt faßt er mich an!
Erlkönig hat mir ein Leids getan! —

Dem Vater grauset’s; er reitet geschwind,
Er hält in Armen das ächzende Kind,
Erreicht den Hof mit Mühe und Not;
In seinen Armen das Kind war tot.

HTML+CSS

Ich hab's versucht so simpel wie möglich zu halten - die Idee mit dem Pseudolement stammt von Stu Nicholls.
HTML
<div class="halter">
Text
</div>
CSS
.halter {
   width:698px;  
   margin:0 auto; 
   text-align:center; 
   height:200px; 
   min-height:200px; 
   resize: vertical; 
   overflow: hidden; 
   position:relative; 
   max-height:1000px; 
   padding:10px 25px; 
   border:1px solid #ddd;
}
.halter:after {
   display:block; 
   font-weight:bold; 
   font-size:15px;
   position:absolute; 
   bottom:48px; right:-35px;
   content: "\25BC …  zieh mich";
   color:red;
   -webkit-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
       -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
           transform: rotate(-90deg);
}
Wer das selber ausprobieren will - wichtig ist eine Mindesthöhe, eine maximale Höhe [weil euch sonst das Layout zerreißt] und ein overflow:hidden, sonst wird der Text nicht verborgen.

Kommentare?

Was meint ihr, haben solche Boxen eine Zukunft im Webdesign? Oder bleiben auf.- und zuploppende Sliders das Mass der Dinge?