CSS User Interface

The CSS user interface allows you to resizing any element, outlines and box sizing into one of several standard user interface elements.

These are the some common properties of user interface:

Values	Description
appearance	It allows the user to make elements as user interface elements.
box-sizing	It is used to allow the user to fix elements on area in clear way.
icon	It is used to facilitates the icon on area.
resize	It can be used to resize an elements which are on area.
outline-offset	It is used to set a space between an outline and the edge or border of an element or draw behind the outline.
nav-down	It is used to move down when you pressing the down arrow button in keypad.
nav-left	To move left when you pressing the left arrow button in keypad.
nav-right	It is used to move right when you pressing the right arrow button in keypad.
nav-up	It is used to move up when you pressing the up arrow button in keypad.

CSS3 resize property

Resize property having three common values

horizontal
vertical
both

horizontal Resize

Let's take an example:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  border: 2px solid;
  padding: 20px; 
  width: 300px;
  resize: horizontal;
  overflow: auto;
}
</style>
</head>
<body>
<p>Note: Internet Explorer does not support the resize property.</p>
<div><p> Click and drag the bottom right corner of this div element for resizing.</p></div>
</body>
</html>

Output:

Note: Internet Explorer does not support the resize property.

Click and drag the bottom right corner of this div element for resizing.

Vertical Resize

Let's take an example:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  border: 2px solid;
  padding: 20px; 
  width: 300px;
  resize: vertical;
  overflow: auto;
}
</style>
</head>
<body>
<p>Note:Internet Explorer does not support the resize property.</p>
<div><p>Click and drag the bottom right corner of this div element for resizing.</p></div>
</body>
</html>

Output:

Note:Internet Explorer does not support the resize property.

Click and drag the bottom right corner of this div element for resizing.

Both Resize

Let's take an example:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  border: 2px solid;
  padding: 20px; 
  width: 300px;
  resize: both;
  overflow: auto;
}
</style>
</head>
<body>
<p>Note:Internet Explorer does not support the resize property.</p>
<div><p>Click and drag the bottom right corner of this div element for resizing.</p></div>
</body>
</html>

Output:

Note:Internet Explorer does not support the resize property.

Click and drag the bottom right corner of this div element for resizing.

Outline Offset

Let's take an example:

<!DOCTYPE html>
<html>
<head>
<style> 
div.exm1 {
  margin: 20px;
  border: 1px solid black;
  outline: 4px solid #34dbeb;
  outline-offset: 15px;
} 
div.exm2 {
  margin: 10px;
  border: 1px solid black;
  outline: 5px dotted #e632f0;
  outline-offset: 5px;
} 
</style>
</head>
<body>
<div class="exm1">This example specifies an outline 4px outside the border edge.</div>
<br>
<div class="exm2">This example specifies an outline 5px outside the border edge.</div>
</body>
</html>

Output:

This example specifies an outline 4px outside the border edge.

This example specifies an outline 5px outside the border edge.

« Previous Next »

CSS Tutorial What is CSS CSS Syntax CSS Selectors How to add CSS CSS Colors CSS Comments CSS Background CSS Border CSS Display property How do I hide an element when printing a web page CSS Float CSS Font CSS Line Height CSS Opacity property CSS Overflow CSS Padding CSS Margin property CSS Position CSS Vertical align CSS White Space CSS Width CSS Word Wrap CSS Outline CSS Visibility CSS Media Queries CSS Animation CSS Gradient CSS Transition CSS Tooltips CSS Tooltip Animation CSS Arrow CSS Flexbox CSS 2D Transforms CSS 3D Transform CSS Aural Media CSS User Interface CSS Pagination CSS Table

No Sidebar ads