CSS offers a variety of user interface functionalities such as adjusting element sizes, creating outlines, and defining box dimensions.
Here are several typical characteristics of CSS3 user interface:
| Values | Description |
|---|---|
| appearance | It facilitates users to make elements as user interface elements. |
| box-sizing | It facilitates users to fix elements on area in clear way. |
icon |
It is used to provide the icon on area. |
| resize | It is used to resize elements which are on area. |
| outline-offset | It is used to set space between an outline and the edge or border of an element. |
| nav-down | It is used to move down while pressing the down arrow button in keypad. |
| nav-left | It is used to move left while pressing the left arrow button in keypad. |
| nav-right | It is used to move right while pressing the right arrow button in keypad. |
| nav-up | It is used to move up while pressing the up arrow button in keypad. |
Note: resize and outline-offset are the most important properties of the CSS user interface. Resize property can have 3 common values:
- Horizontal resize
- Vertical resize
- Both (horizontal & vertical) resize.
CSS3 Resize property
The CSS3 resize property determines if an element can be resized by the user.
Horizontal Resize
Let's consider an illustration to adjust the width of a <div> element. (Horizontal resizing)
See this example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: horizontal;
overflow: auto;
}
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer does not support the resize property.</p>
<div>This example specifies how to resize the width of a div element.</div>
</body>
</html>
Example2:
Vertical Resize
Let's consider an instance where we adjust the height of a <div> element. (Vertical resizing)
See this example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: vertical;
overflow: auto;
}
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer does not support the resize property.</p>
<div>This example specifies how to resize the height of a div element.</div>
</body>
</html>
Both (horizontal & vertical) resize
You have the option to adjust the width and height dimensions of a <div> element.
See this example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: both;
overflow: auto;
}
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer does not support the resize property.</p>
<div>This example specifies how to resize both the height and the width of this div element.</div>
</body>
</html>
CSS3 Outline Offset
The outline-offset attribute is utilized to insert distance between an outline and the border of an element.
See this example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 20px;
padding: 10px;
width: 300px;
height: 100px;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 10px;
}
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer does not support the outline-offset property.</p>
<div>This example specifies an outline 10px outside the border edge.</div>
</body>
</html>
Supporting Browsers
| Property | Chrome | IE | Firefox | Opera | Safari |
|---|---|---|---|---|---|
| resize | 4.0 | not supported | 5.04.0 -moz- | 15.0 | 4.0 |
| outline-offset | 4.0 | not supported | 5.04.0 -moz- | 9.5 | 4.0 |