CSS User Interface

Introduction

User Interface can be defined as series of visual elements like screens, buttons, forms that help the user interact with the software application or hardware device.

CSS User Interface allows the user to resize an element, give outlines and resize the box. It provides various standard user interface properties to change the style and functionality of HTML or XML elements.

The main aim of User Interface is to style the basic user interface elements using its properties and values such as resize, box-sizing, etc.

Properties of CSS3 User Interface:

Some of the common properties of CSS3 User Interface are given below:

• Appearance:
  This property is used to display an element as a user interface element. It uses platform-native styling based on the operating system.
          The Firebox browser uses the property -moz-appearance, and browsers like Safari and Chrome use-webkit-appearance.

Syntax:

appearance: none | auto | menulist-button | textfield | <compat-auto>

where

<compat-auto> may be searchfield, textarea, push-button, slider-horizontal, checkbox, radio, square-button, menulist, listbox, meter, progress-bar, button.

• resize:
  This property decides whether an element is resizable: if yes, it decides the directions in which it will be resized. 

Syntax:

resize: none | horizontal | vertical | both | inline | block;

Resize property sets the element such that it can be resized horizontally, vertically or in both the directions. The values are:

• horizontal
  Displays a functionality that allows user to resize the element in horizontal direction.
• vertical:
  Displays a functionality that allows user to resize the element in vertical direction.
• both:
  Displays a functionality that allows user to resize the element in both horizontal and vertical directions.
• none:
  Displays no such functionality to manipulate the element.
• inline:
  Displays a functionality that allows user to resize element in the inline direction (vertical or horizontal depending on thedirectionandwriting-modeproperties).
• block:
  Displays a functionality that allows user to resize element in the block direction (vertical or horizontal depending on thedirectionandwriting-modexproperties).

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 300px;
width: 400px;
font-family: arial;
}
h3{
color: tomato;
}
.both{
border: 2px solid;
padding: 20px;
width: 300px;  
resize: both;
overflow: auto;
}
.vertical{
border: 2px dotted;
padding: 20px;  
width: 300px;  
resize: vertical;
}
.horizontal{
	border: 2px solid;
padding: 20px;  
width: 300px;
resize: horizontal;  
}
</style>
</head>
<body>
<div>
<h3>This is an example to display the resize property of CSS User Interface</h3>
<p class="both">This box can be resized in both the directions i.e horizontally and vertically. (See the bottom right corner of box)</p>
<p class="vertical">This box can be resized vertically.</p>
<p class="horizontal">This box can be resized horizontally.</p>
</div>
</body>
</html>

Output:

Here, the output displays resize property using vertical, horizontal and both values.

• Box-sizing:
  This property allows user to set the fixed elements clearly. It decides the way to calculate the total width and height of an element.
  While using the CSS Box Model property, the assigned width and height apply only to the content-box of element. If the element have padding or border, the values of width and height has to be adjusted accordingly.
  Consider an example where there are three boxes with width: 30%; if any one of the boxes has left or right padding, or border, it will not fit in line with the parent container. 

Syntax:

box-sizing: content-box | border-box;

where

• content-box:
  It is the default value of the box-sizing property. As the name suggests, the width and height include the content; however, it does not include border, margin, or padding.
  For example, if you set the width of an element as 200px, the width will be set to 200px, and the respective width of padding or border will be added to the final width, making the element wider than 200px.
• border-box:
  When you use border-box property, the width and height includes the content, padding and border, but it doesn't include margin.
  For example, if you set the width of element as 200px, it will include existing border or padding, and the content box will shrink accordingly. 

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 160px;
height: 80px;
padding: 20px;
margin: 20px;
border: 10px solid brown;
background: skyblue;
}
.content-box{
box-sizing: content-box;
}
.border-box{
box-sizing: border-box;
} 
</style>
</head>
<body>
<h3 style="color: tomato">Example of CSS Box-sizing property of User Interface</h3>
<div class="content-box">This is a content-box</div>
<br>
<div class="border-box">This is a border-box</div>
</body>
</html>

Output:

Here, the box-sizing property is used to display content-box and border-box.

• icon:
  This property is used to display icons ina particular arthea.
• outline-offset:
  This property sets the space value between an outline and the border or edge of an element.

It should be noted that the outline is different from the border. It is drawn outside the border and can overlap the content. Also, the width and height of an element are not affected by width of outline.

Syntax:

outline-offset: <length>;

where;

<length> is the width between element and outline. If the length is negative, the outline is placed inside the element. And if the length is 0, outline is placed such that there is no space between element and outline.

Note: outline-offset is the most used property. However, there are similar properties to manipulate outline:

• outline-width: To set the width of element's outline.
• outline-style: To set the style of outline as dotted, solid, or groove.
• outline-color: To set the color of the outline.

The outline is a shorthand property to set all the outline properties at once.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 300px;
width: 400px; 
font-family: arial;
padding: 10px;
}
h3{padding:20px;}
p{
border: 2px solid;
padding: 20px;  
margin: 20px;
width: 300px; 
background: skyblue;
outline: 2px dashed red;
outline-offset: 20px;
}
</style>
</head>
<body>
<div>
<h3>This is an example to display the outline-offset property of CSS User Interface</h3>
<p>Outline-Offset Property</p>
</div>
</body>
</html>

Output:

Here, the red dotted line depicts the outline of the border.

• nav-down:
  This property allows the user to navigate down using the down arrow button of keyboard.
• nav-left:
  This property allows the user to navigate to the left using the left arrow button of keyboard.
• nav-right:
  This property allows the user to navigate to the right using the right arrow button of keyboard.
• nav-up:
  This property allows the user to navigate up using the up arrow button of keyboard.
• cursor:
  This property is used to set the type of mouse cursor when hovered over the particular element.
  Syntax:
  cursor: [ <url>[auto | default | help | wait | crosshair | not-allowed | zoom-in | grab] ];
  Here, user can provide his own cursor image using url(image). 

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p { 
font-size: 20px;
width: 300px;
cursor: crosshair;
}
h3 {
	border: px solid;
	cursor: help;
	width: 200px;
}


/* A fallback keyword value is given when using a URL */
h4 {
	color: red;
	border: dotted 2px ;
	width: 200px;
cursor: url("music.png"), not-allowed;
}
</style>
</head>
<body>
<p class="div" >This is an example of CSS User Interface: cursor property</p>
<h3>For any help hover here</h3>
<h4>User defined cursor. If the image not found, it takes the fallback value</h4>
</body>
</html>

Note: Some browsers may not support all the properties explained above. It varies with every browser. Some properties and browser versions that support them are given:

Property	Chrome	Internet Explorer	Firefox	Opera	Microsoft Edge	Safari
resize	4.0	Not supported	5.0	15.0	79.0	4.0
outline-offset	4.0	Not supported	5.0	9.5	15.0	4.0

In this way, we have learned the different properties of the CSS User Interface to fascinate the user interaction with the software.