We hebben al aardig wat nieuwe functies van CSS3 besproken, maar daar zijn we nog niet helemaal klaar mee. Vandaag gaan we eens kijken hoe je op een eenvoudige manier met CSS3 iemand de grootte van een element, bijvoorbeeld een div-element, kan laten aanpassen. Dit gaan we doen met de 'resize property', wat een nieuwe functie is binnen CSS3 en dus ook alleen werkt in de browsers die CSS3 ondersteunen.

Hoe werkt het?

Hoe gaat dit in zijn werk? Heel simpel, door in je stylesheet de resize property toe te voegen. Er zijn hier 3 mogelijkheden voor:

• resize: both; - Hiermee kun je zowel verticaal als horizontaal de grootte aanpassen.
• resize: vertical; - Hiermee kun je alleen verticaal de grootte aanpassen.
• resize: horizontal; - Hiermee kun je alleen horizontaal de grootte aanpassen.

.resize {
    background: #ff00ff;
    width: 200px;
    height: 200px;
    resize: both;
    overflow: auto;
}

Op deze manier kun je nu door rechtsonderin het 'resize' knopje te verslepen de grootte van dit element aanpassen tot onbeperkte grootte. Wil je een maximum breedte/hoogte instellen, dan kun je 'max-width' of 'max-height' toevoegen.

Demo

Bekijk een demo van deze webtip hier.