CSS3: Größe beliebiger Elemente ändern

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

Diesen Beitrag teilen:

Verwandte Beiträge:

2 Kommentare

    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.