Home » CSS User Interface

CSS User Interface

by Online Tutorials Library

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:

Test it Now

Example2:


Vertical Resize

Let’s take an example to resize the height of a <div> element. (Vertical resize)

See this example:

Test it Now


Both (horizontal & vertical) resize

You can also resize the width and height of a <div> element.

See this example:

Test it Now


CSS3 Outline Offset

The outline-offset property is used to add space between an outline and border of an element.

See this example:

Test it Now


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
Next TopicCSS Pagination

You may also like