CSS3 User interface property allows you to change any element into one of several standard user interface elements. We can divide it into following properties:
nterface properties:
resizeoutline-offset
CSS3 User Interface-Resizing
User interface resize property specifies whether or not an element should be resizable by the user.
div {
border: 3px solid;
padding: 25px;
width: 350px;
resize: horizontal;
overflow: auto;
}
It can be done vertically also:
div {
border: 3px solid;
padding: 25px;
width: 350px;
resize: vertical;
overflow: auto;
}
User Interface Outline-offset
Outline-offset means draw a line around the element at outside of border.
Outlines differ from borders in three ways:
- An outline is a line drawn around elements, outside the border edge
- An outline does not take up space
- An outline may be non-rectangular
div {
margin: 30px;
padding: 20px;
width: 350px;
height: 200px;
border: 2px solid black;
outline: 2px solid red;
/* Move the outline 15px away from the border */
outline-offset: 15px;
}
User Interface Properties
| 1 | appearance This property is used to allow the user to make elements as user interface elements. |
| 2 | box-sizing This property is used to allow users to fix elements on area in clear way. |
| 3 | icon This property is used to provide the icon on area. |
| 4 | resize This property is used to resize elements which are on area. |
| 5 | outline-offset This property is used to draw the behind the outline. |
| 6 | nav-down This property is used to move down when you have pressed on down arrow button in keypad. |
| 7 | nav-left This property is used to move left when you have pressed on left arrow button in keypad. |
| 8 | nav-right This property is used to move right when you have pressed on right arrow button in keypad. |
| 9 | nav-up This property is used to move up when you have pressed on up arrow button in keypad. |