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 we 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.
Create a Web Page
Since we are using CSS3 properties, let’s go ahead and create an HTML5 page using the following structure:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
</body>
</html>We will place HTML elements in the body and a style section in the head.
Add Some Elements
Let’s start with a few simple elements, adding the following markup to your page body section:
<div class="textContent">
<div>CONTENT A</div>
<div>CONTENT B</div>
<div>CONTENT C</div>
<div>CONTENT D</div>
<div>CONTENT E</div>
<div>CONTENT F</div>
</div>As you can see these elements contain some simple text indicating which is which, so that you can get a good sense of what the browser does when you resize. The container element is just there so that we can identify the group of elements within our CSS code using the class attribute.
Add Some Style
Style the “div” elements with the following declarations in your head CSS code:
.textContent div {
background-color:#dedede;
float:left;
margin:10px;
padding:10px;
resize:both;
overflow:auto;
}We set a variety of default styling properties in addition to the resize property – you must set the overflow property to a value other than “visible” for resizing to function correctly. The other properties are just there to make the demonstration clearer.
Open your page in a browser and experiment with clicking and dragging to resize the elements. Notice what happens when you resize an element so that it prevents the other elements from fitting alongside it horizontally. The float property will determine how the browser rearranges the elements to fit on the page.
Options
In certain browsers, the default behavior is to prevent you from resizing the elements so that they become smaller, but in others you can resize larger and smaller. The support level for the property will of course change in the near future.
Notice that in the code above, we used the “both” value, meaning that the element can be resized by the user both horizontally and vertically. You can optionally choose to specify “horizontal” or “vertical” if you only want the element to resize along one axis. This can be helpful when attempting to strike a balance between allowing the user to customize the appearance of your page and still remaining faithful to your original visual design.
Resizing Images
Strictly speaking, the resize property is not really designed to be used with images. However, using a combination of CSS properties we can begin to see how this level of customization may develop. Add an image inside a “div” element in your page body as follows:
<div class="imgContent">
<img src="picture.jpg" alt="pic"/>
</div>In this case we are assuming the image is 400 pixels wide and 300 pixels in height. You can of course alter the file-name to point to an image of your own. Now style the containing element for the image in your CSS area:
.imgContent {
width:400px;
height:300px;
resize:both;
overflow:hidden;
background-color:#ffff99;
padding:5px;
}We set the dimensions of the containing “div” to match the dimensions of the image. By setting the resize property, overflow to hidden and adding a small padded area, the user will be able to resize the containing div element. Now we style the image:
img {
width:100%;
height:100%;
}Using relative size values for the image means that its size will stretch and scale to fill the specified percentage of the parent element. The parent element can be resized, so the image will automatically resize along with it. Test your page in a browser to see the effect. Adding a small amount of padding on the parent element makes dragging the element easier.
Conclusion
CSS3 resizing is one of the many techniques that is not being widely used yet, mainly due to a poor level of support. Although it’s early days to start relying on this function, it does give us an exciting glimpse into the level of customization future Web users will enjoy while browsing.
See what the finished product looks like here.
