The resize property in CSS3

Always wanted to be able to resize elements in a site? Done dirty hacks for it? CSS3 offers the solution in it’s CSS3 User interface section: the resize property. It allows you to specify if a box is resizable. WebKit implemented it in the latest nightlies. Below is an example box, which is resizable if your browser supports resize:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

The code for this is very simple:

div.resize {
	width: 100px;
	height: 100px;
	border: 1px solid;
	resize: both;
	overflow: auto;
}

Now it supports resize: both; like the box above, but also resize: horizontal; and resize: vertical;. Here’s the horizontal one, which has a max-width, so you won’t break the layout completely, and a min-width so you can’t make it to small either:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

And the vertical one. with a max-height and a min-height:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Hosting by: