Mit CSS3-Eigenschaft resize kann man dem Besucher erlauben, die Größe beliebiger Elemente anzupassen, hier ein einfacher Absatz:

Ich bin ein Absatz und mich kann man vergrößern oder verkleinern. Einfach mit dem Mauscursor unten rechts klicken und ziehen.

Folgender CSS-Code kam hier zum Einsatz:

p {
    width: 470px;
    background: #ddd;
    border: 1px solid #bbb;
    padding: 1.2em;
    margin-left: auto; margin-right: auto; 
    resize: both;
    overflow: hidden;
}

Wichtig sind aber die zwei letzten Code-Zeilen, die ich auch hervorgehoben habe. Mit resize: both; erreicht man, dass das Element sowohl in der Breite als auch in der Höhe veränderbar ist. Weitere mögliche Werte für diese Eigenschaft sind:

  • vertical: nur vertikale Änderung
  • horizontal: nur horizontale Änderung
  • none: keine Änderung erlaubt

Die zweite Angabe overflow: hidden; dient dazu da um das Verhalten von Safari zu fixen. Wobei auch andere Browser, die diese Eigenschaft unterstützen, für die Eigenschaft overflow einen Wert benötigen, der nicht visible ist … also müssen die Werte auto, scroll oder hidden zum Einsatz kommen.

Unterstützt wird das ganze von Chrome, Firefox und Safari.

Weitere Links

Divi: Premium-Theme für WordPress
Werbung

Geschrieben von Vladimir

Vladimir Simović, arbeitet seit 2000 mit HTML & CSS und seit Januar 2004 mit WordPress. Im Laufe der Jahre hat er diverse Fachbücher und Fachartikel publiziert.

  1. Sehr praktisch beispielsweise für längere Listings. Auf http://jendryschik.de/weblog/2010/08/17/funktionsweise-meiner-glossareinbindung/ beispielsweise stören die Listings den Lesefluss, vor allem das lange JavaScript. Ich könnte nun die Höhe der Listings beschränken und den Leser das Element entsprechend vergrößern lassen, wenn er mehr Quelltext sehen möchte. Diese Funktion müsste natürlich deutlich sichtbar sein.

    1. Ja, du hast Recht, die sechs kleinen Punkte sind jetzt wirklich gut sichtbar. Es wäre gut wenn man da auch Einfluss nehmen könnte.

Kommentare sind geschlossen.