Skip to content
Related Articles

Related Articles

Improve Article

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>

Output:
outlineoffset
Supported Browsers: The browser supported by outline-offset property are listed below:

  • Apple Safari 3.1
  • Google Chrome 4.0
  • Firefox 3.5
  • Opera 10.5
  • Internet Explorer 15.0



My Personal Notes arrow_drop_up
Recommended Articles
Page :