Designing with CSS – Box Resize

CSS3 offers some great new properties relating to resizing elements such as text areas, outlining, box sizing, and more. We have already discussed some of these features. In this article and subsequent few more we will focus on some of the most significant ways you can enhance user interface features in CSS3.

The CSS3 resize property allows you to specify whether or not a resizing mechanism on an element is present, and if so, horizontally, vertically or both.

The code for this is very simple:

resize: both;
overflow: auto;
-moz-resize: both;  /* Firefox */
-webkit-resize: both;   /* WebKit */

CSS3 Generator

If you are not very comfortable with CSS, or would like to have CSS codes auto-generated for you to save time, here is a useful and handy tool called CSS3 Generator. This simple tool created by Randy Jensen could be used for most basic design elements like rounder corners, box-shadow, text-shadow, etc on your webpages. It will create some cross-browser CSS3 code based on whatever values you want.

You choose the direction in which the element should be resized. The code will be generated.

Your Code:

resize: both;
overflow: auto;
min-width: 50px; /* suggest a min-width & min-height */
min-height 50px; 

But you must also suggest minimum width and height to avoid making the box too small, and it’s also better to set maximum width and height to avoid breaking your layout completely. The overflow property is set to scroll and the contents should be editable.

If your browser supports CSS3 resize property, I give you below three boxes, which can be resized by the user with a bottom-right handle.

Check it out! Whether it works for you or not, please share with me by writing a comment, and mentioning your browser and version. Your feedback would be immensely helpful.

Examples of CSS3 User Interface Box Resize

Example 1 (Resize: Both)
Allows the box to be resized by the user horizontally and vertically.

CSS Code:

resize: both;
overflow: auto;

Example 2 (Resize: Horizontal)
Allows the box to be resized by the user horizontally only.

CSS Code:

resize: horizontal;
overflow: auto;

Example 3 (Resize: Vertical )
Allows the box to be resized by the user vertically only.

CSS Code:

resize: vertical;
overflow: auto;