/    /  CSS User Interface

CSS User Interface

 

CSS provides more user interfaces features like resizing elements, outlines, and box-sizing(box – border).

 

List of CSS3 user interface:

 

  • appearance: Elements as user interface elements.
  • box-sizing: Fix elements on an area in a clear way.
  • icon: Provide the icon on the area.
  • resize: Resize elements that are on the area.
  • outline-offset: Space between an outline and the edge or border of an element.
  • nav-down: Move down while pressing the down arrow button on the keypad.
  • nav-left: Move left while pressing the left arrow button on the keypad.
  • nav-right: Move right while pressing the right arrow button on the keypad.
  • nav-up: Move up while pressing the up arrow button on the keypad.

 

CSS3 Resize property:

 

Horizontal Resize:

 

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 2px solid red;
  padding: 20px;
  width: 300px;
  resize: horizontal;
  overflow: auto;
}
</style>
</head>
<body>
<div>This example specifies how to resize the width of a div element.</div>
</body>
</html>

 

OUTPUT:

 

CSS User Interface