The CSS3 Resize Property
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!
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:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<title> The CSS3 Resize Property </title>
<link rel="Stylesheet" href="style.css" />
Augue scelerisque? Rhoncus risus augue urna turpis vel, sit ultricies? Aliquam sociis. Dapibus sed arcu
turpis? In auctor enim integer cras nisi, porta integer dolor tortor duis. Platea ac tortor dolor nec amet
lacus odio sed magna dictumst? Facilisis risus lorem magnis sociis? Adipiscing lundium aliquam est a amet
ultricies auctor tincidunt enim! Ut, pulvinar augue, arcu porttitor, nec porta ultricies phasellus tincidunt
odio placerat dignissim ac enim elementum non, elit sociis, magnis mid nunc, turpis aenean ridiculus, diam nunc
parturient est amet porttitor, magna. Vut porta aliquam vel lorem a eros habitasse, nunc, augue urna! Lacus a,
purus. Nunc, pulvinar cursus, urna in, magna! Ridiculus, elit risus egestas ac. Habitasse arcu! Parturient proin,
cursus sit pellentesque diam phasellus, aliquam! Enim eros elit montes natoque ac. Massa quis! Mattis ridiculus
turpis proin. Et turpis etiam facilisis sit dapibus nunc nisi, magna phasellus magna elit! Magnis sagittis
pellentesque, dis non rhoncus scelerisque sed! Aliquam sed placerat amet augue pulvinar augue, turpis, in mus
magna ac porta mattis, augue, natoque dapibus nunc duis purus nunc mus nascetur sed! Odio. Etiam rhoncus turpis,
a pulvinar sagittis! Dignissim sed sed pulvinar magna purus elementum ac scelerisque. Rhoncus porttitor sit placerat
massa pulvinar tortor mid.
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:
border: 1px solid;
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!