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

Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienstleistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.