CSS Introduction

CSS Tutorial What is CSS CSS Syntax CSS Selector How to include CSS CSS Comments

CSS Attributes

CSS Background CSS Border CSS Display CSS Float CSS Font CSS Color CSS Hover CSS Important CSS Line-height CSS Margin CSS Opacity CSS Filter CSS Images CSS Overflow CSS Padding CSS Position CSS Vertical align CSS White space CSS Width Word-wrap in CSS Box-shadow in CSS Text-transform in CSS CSS Outline CSS Visibility CSS Counters CSS Clear fix CSS Icons CSS Justify-content Text-decoration in CSS CSS Lists CSS nth selector CSS Sticky CSS Background-clip CSS Checkbox-style CSS Letter-spacing CSS Navigation bar CSS Overlay CSS Root CSS Specificity CSS Text-indent CSS Text-stroke CSS Zoom CSS Order CSS Descendent selector CSS Clip CSS calc() CSS Background-blend-mode CSS radio-button CSS Superscript and subscript CSS Text-effects CSS Text-align CSS Variables CSS Page-break-before CSS Page-break-inside CSS Page-break-after CSS Content property CSS Word-spacing CSS Animation CSS @keyframes rules CSS Pseudo-classes CSS Pseudo-elements CSS Radial-gradient CSS Translate CSS Gradients CSS z-index CSS Loaders CSS Units CSS Transition CSS Masking CSS Arrow CSS Pagination

Misc

What is Bootstrap CSS What is CSS used for Difference between HTML and CSS How to center a table in CSS What is a CSS File How to center a button in CSS How to change background color in CSS How to change the font in CSS How to change font size in CSS How to resize an image in CSS How to get rid of bullet pioints in CSS Is CSS a programming language Grid Vs Flexbox in CSS How to edit CSS in WordPress How to use google fonts in CSS

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:

CSS User Interface

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:

CSS User Interface

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:

CSS User Interface

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.



ADVERTISEMENT
ADVERTISEMENT