CSS User Interface

Last Updated : 30 Sep, 2024

User Interface (UI) defines the way humans interact with information systems. In simple terms, the user interface consists of pages, screens, buttons, forms, and other visual elements that allow users to interact with a device. Every app and website has a user interface.

In CSS, the user interface properties allow us to change elements into standard UI components. In this article, we will discuss two important user interface properties:

  • resize
  • outline-offset

1. resize Property

The resize property allows the user to resize an element (usually a box). However, this property does not apply to inline elements or block elements with visible overflow. For the resize property to work, the overflow property must be set to "scroll", "auto", or "hidden".

Syntax:

resize: horizontal | vertical | both;

Values:

  • horizontal: Allows the user to resize the width of the element.
  • vertical: Allows the user to resize the height of the element.
  • both: Allows the user to resize both the height and width of the element.

Example 1: Resizing Horizontally

HTML 
<!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:horizontalExample 2: Resizing Vertically

HTML 
<!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

Example 3:

Resizing Both Horizontally and Vertically

html 
<!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


2. outline-offset Property

The outline-offset property in CSS specifies the distance between an element's outline and its border or edge. The space between the element and the outline is transparent.

Syntax:

outline-offset: length;

Note: length is the value that defines the space between the element and its outline.

Example:

html 
<!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
Comment

Explore