In CSS3, some of the new user interface features are resizing elements, box sizing, and outlining.
The user interface properties are:
- resize
- box-sizing
- outline-offset
Browser Support
The resize property is supported in Firefox 4+, Chrome, and Safari.The box-sizing is supported in Internet Explorer, Chrome, and Opera. Firefox requires the prefix -moz-. Safari requires the prefix -webkit-.
The outline property is supported in all major browsers, except Internet Explorer.
Resizing CSS3
The resize property specifies whether an element should be resizable by the user or not.
This div element is resizable by the user (in Firefox 4+,
Chrome, and Safari).
Syntax:
Specify that a div element should be resizable by the user:
div
{
resize:both;
overflow:auto;
}
{
resize:both;
overflow:auto;
}
Example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
div
{
border:2px solid;
padding:10px 40px;
width:300px;
resize:both;
overflow:auto;
}
</style>
</head>
<body>
<p><b>Note:</b> Firefox 4+, Safari, and
Chrome support the resize property.</p>
<div>The resize property specifies whether or not an
element is resizable by the user.</div>
</body>
</html>
No comments:
Post a Comment