Resize Web Page Elements with CSS3

With CSS3 you can give your users a greater level of control over how they view your pages without having to employ complex JavaScript functions. Using the resize property in CSS3, you can set elements to be automatically resizable. These elements appear within the browser with a subtle indicator at the bottom right corner letting users know that the element is resizable. On clicking and dragging the corner, the user can resize your element.

The resize property in itself is not complex, but can have complex effects on your other elements and on the content of the element being dragged. In this tutorial Sue Smith will run through the basics of using the CSS3 resize property, looking at how it functions in a page with multiple elements and using it for an image. CSS3 resizing does not have full browser support yet, but functions with varying degrees of success in recent versions of Firefox, Safari and Chrome. Internet Explorer and Opera are not yet supporting the property.