CSS | User Interface - GeeksforGeeks

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:To resize: Click and drag the bottom right corner of this div 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: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:To resize: Click and drag the bottom right corner of this div 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: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:To resize: Click and drag the bottom right corner of this div 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: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: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
CSS-Basics
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
CSS to put icon inside an input element in a form
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?