WordPress & Webwork

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

2 Reaktion(en)

Die Kommentare in diesem Beitrag sind geschlossen.

✉ WordPress-Newsletter ✉

Tipps und News als E-Mail in deinem Postfach? Dann abonniere einfach den ersten deutsch­sprachigen Word­Press-Newsletter:


Der Newsletter ist hinterher jederzeit abbestellbar.

Eintragen!