CSS | User Interface

Last Updated : 02 Jan, 2019

User Interface (UI) defines the way humans interact with the information systems. In Layman’s term, User Interface (UI) is a series of pages, screens, buttons, forms and other visual elements that are used to interact with the device. Every app and every website has a user interface.
The user interface property is used to change any element into one of several standard user interface elements. In this article we will discuss the following user interface property:

resize
outline-offset

resize Property: The resize property is used to resize a box by user. This property does not apply to inline elements or block elements where overflow is visible. In this property, overflow must be set to “scroll”, “auto”, or “hidden”.

Syntax:

resize: horizontal|vertical|both;

horizontal: This property is used to resize the width of the element.

Syntax:

resize: horizontal;

Example:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>user interface Property</title> 
        <style>  
            div { 
              border: 2px solid; 
              padding: 20px;  
              width: 300px; 
              resize: horizontal; 
              overflow: auto; 
            } 
        </style> 
    </head> 
    <body style = "text-align: center;"> 
        <div style = "background: green;"> 
            <h1 style = "color: white;">GeeksforGeeks</h1> 
            <p style = "color: white;">  resize: horizontal;</p> 
        </div> 
    </body> 
</html>

Output:
horizontal
To resize: Click and drag the bottom right corner of this div element.

vertical: This property is used to resize the height of the element.

Syntax:

resize: vertical;

Example:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>user interface Property</title> 
        <style>  
            div { 
              border: 2px solid; 
              padding: 20px;  
              width: 300px; 
              resize: vertical; 
              overflow: auto; 
            } 
        </style> 
    </head> 
    <body style = "text-align: center;"> 
        <div style = "background: green;"> 
            <h1 style = "color: white;">GeeksforGeeks</h1> 
            <p style = "color: white;">  resize: vertical;</p> 
        </div> 
    </body> 
</html>

Output:
vertical
To resize: Click and drag the bottom right corner of this div element.

both: This property is used to resize both the height and width of the element.

Syntax:

resize: both;

Example:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>user interface Property</title> 
        <style>  
            div { 
              border: 2px solid; 
              padding: 20px;  
              width: 300px; 
              resize: both; 
              overflow: auto; 
            } 
        </style> 
    </head> 
    <body style = "text-align: center;"> 
        <div style = "background: green;"> 
            <h1 style = "color: white;">GeeksforGeeks</h1> 
            <p style = "color: white;">  resize: both;</p> 
        </div> 
    </body> 
</html> 

Output:
both
To resize: Click and drag the bottom right corner of this div element.

Supported Browsers: The browser supported by resize property are listed below:

Apple Safari 4.0
Google Chrome 4.0
Firefox 5.0 4.0 -moz-
Opera 15.0
Internet Explorer Not Supported

outline-offset: The outline-offset property in CSS is used to set the amount of space between an outline and the edge or border of an element. The space between the element and its outline is transparent.

Syntax:

outline-offset: length;

Note: Length is the width of the space between the element and its outline.
Example:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>user interface property</title> 
        <style>  
            div.ex1 { 
                margin: auto; 
                padding: 8px; 
                color: white; 
                width: 600px; 
                border: 1px solid black; 
                background-color: green; 
                outline: 4px solid red; 
                outline-offset: 15px; 
            } 
        </style> 
    </head> 
    <body style = "text-align: center;"> 
        <h1 style = "color: green;">GeeksforGeeks</h1> 
        <br> 
        <div class="ex1">A computer science portal for geeks.</div> 
    </body> 
</html> 