CSS User Interface
CSS provides many user interface features like resizing elements, outlines and box sizing.
Following is a list of some common properties 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 specifies that whether an element should be resized by the user or not.
Horizontal Resize
Let’s take an example to resize the width of a <div> element. (Horizontal resize)
See this example:
Example2:
Vertical Resize
Let’s take an example to resize the height of a <div> element. (Vertical resize)
See this example:
Both (horizontal & vertical) resize
You can also resize the width and height of a <div> element.
See this example:
CSS3 Outline Offset
The outline-offset property is used to add space between an outline and border of an element.
See this example:
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.0 4.0 -moz- | 9.5 | 4.0 |