CSS3 is adding quite a few new features to our styling toolkits, and today’s brief tutorial will talk about one of the ones that you may have not heard about yet, the resize property. In the past there have been a few hacks to give a box the ability to be resized, but now with CSS3 it only takes a single line of code. Ready to see how it works? Let’s go!

STEP ONE:

The HTML

Our page layout is again, very simple. All we have is a single div element with some text inside of it. Here’s what the HTML looks like:

STEP TWO:

The CSS

The next step will be to make our div element a bit more visible. Here’s the CSS that we’ll use to accomplish that:

So, now we can see our div a little bit better, and because the overflow is set to hidden, the text will not break outside of the box. The next step is to make our lovely div element resizable. Are you ready for the insane amount of code it takes to get this working? Here it is:

That’s it! Both just mean that you’d like the user to be able to resize the div both vertically and horizontally. You could substitute the both declaration and use only horizontal or vertical if you so choose. Either way, you now have a very simple solution to making your div elements resizable. This works best in situations like the demo in which you have a large group of text that you’d like the user to be able to shrink and expand at will.

The resize property is just one of the many tools that are on the menu for the final CSS3 specs. Keep in mind that not all browsers fully support CSS3, but you can begin adding it to your sites today! Using the resize property gives you just one more way to keep things compact, but dynamic enough for your user to manipulate. Until next time!

Download Source Files