Saturday, January 14, 2012

CSS3 user interface properties(resize,box-sizing,outline-offset) with Example


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;
}

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